使用 puppeteer 實現前端 E2E 測試

前言

頁面交互一直是前端最爲重要的組成部分，可要實現其 UI 層次的自動化測試一直是老大難的問題。過去，咱們只能經過人工去點擊頁面，測試頁面交互、數據傳輸。所以，E2E 測試應需而生，E2E 測試極爲便捷的解決了用戶層面的交互測試。

基於 puppeteer 的 E2E 測試

什麼是 E2E

E2E（End To End）即端對端測試，屬於沙盒測試，經過編寫測試用例，模擬用戶操做，確保頁面交互時，組件間通訊正常、數據傳遞如預期。結合 Puppeteer 和谷歌瀏覽器擴展程序 Puppeteer recorder 能夠很快實現一個 E2E 測試用例。

Puppeteer

Puppeteer 是一個 Node 庫，它提供了一個許多高級 API 來經過 DevTools 協議控制 Chromium 或 Chrome。
Puppeteer API 是分層次的，反映了瀏覽器結構。

What can puppeteer do?

• 生成頁面的屏幕截圖和PDF。
• 抓取SPA並生成預渲染內容（即「SSR」）。
• 自動錶單提交，UI測試，鍵盤輸入等。
• 建立最新的自動化測試環境。 使用最新的JavaScript和瀏覽器功能直接在最新版本的Chrome中運行測試。
• 捕獲您網站的[時間線跟蹤]
• 實現簡單的爬蟲

安裝依賴

新建 node 項目下執行指令：

cnpm install puppeteer --save

按需引入

const puppeteer = require('puppeteer')

Puppeteer recorder

Puppeteer recorder 是一個 Chrome 擴展程序，可記錄您的瀏覽器交互並生成 Puppeteer 腳本。編寫用於抓取、測試和監視的 Puppeteer 腳本可能很棘手，而Puppeteer recorder 能夠很便捷的實現。

簡單的說，Puppeteer recorder 能夠幫助你記錄在 Chrome 瀏覽器上執行的操做，並生成 Punppeter 代碼。實現「一次操做，生成測試」，極大的縮短了咱們書寫 E2E 測試的時間。