前言：

此文先在其他平臺發表，如有雷同，有可能那個也是我~

先了解一下概念

自動化測試的類型及工具都有挺多：單元測試、集成測試、UI測試、e2e測試等等，相關概念網上有挺多文章介紹了，就不多聊，比如這篇就不錯：
試試前端自動化測試！（基礎篇），概念比較模糊的話可以先看看~

單元測試相信大部分人都寫過，接下來主要談談平時做得比較少的e2e測試

e2e實戰小項目

本文將以百度首頁為測試對象，有三個測試目標：

打開是否正常

搜索功能是否正常

初始化請求是否正常&&參數是否有缺失

涉及技術/工具

Node

Typescript

puppeteer

完整代碼地址

https://github.com/XieTongXue/happy-front-end/tree/master/e2e-test

測試流程

項目介紹

目錄結構

app.ts 入口、創建測試進程 config.json 測試配置 interface.ts ts類型定義 server-img.ts 圖片服務 test-open.ts 頁面打開測試 test-search.ts 搜索功能測試 test-request.ts 初始化請求測試

怎么跑起來？

npm run dev // ts變更監聽、編譯npm run server-img // 圖片服務<!-- 當前已有功能 -->npm run test-open // 例子1：頁面打開測試npm run test-search // 例子2：搜索功能測試npm run test-request // 例子3：初始化請求測試

例子1：頁面打開測試

放一個例子的縮寫版代碼讓大家大概了解一下流程~

• index.ts

• test-open.ts
  

例子2：搜索功能測試

代碼就不講解了，大家看之前或者看的時候可以帶著以下問題

• 搜索功能測試的整體思路是怎樣的？
• 如何判斷動作1已完成可以執行動作2？

例子3：請求是否正常參數是否有缺失

這個測試目標是平時開發中遇到比較多的，頁面初始化時打點數據的采集、性能的上報等等都需要發請求，那么如何保證這些請求有發起，并且參數是正常的呢？請看第三個例子，代碼就不講解啦，感覺還是自己去看然后跑跑好一些，看代碼之前可以先思考一下以下問題：

• 如何捕獲請求？
• config.json中，假設請求是亂序的，如何保證請求都有測試過
• 如何判斷請求全部測試完成？
• 怎么知道瀏覽器正在測，還是已經測完了？

其他：

從官網了解到，puppeteer還能做服務端渲染，也嘗試了一下；
親測速度比較慢，如果是為了提高用戶體驗，不適合用puppeteer做服務端渲染。可用場景：識別爬蟲，是爬蟲的話再去請求puppeteer ssr服務，僅用于解決seo問題。

總結

以上是生活随笔為你收集整理的Node + ts + puppeteer e2e前端自动化测试的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。