前言：

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

先了解一下概念

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

單元測試相信大部分人都寫過，接下來主要談?wù)勂綍r做得比較少的e2e測試

e2e實(shí)戰(zhàn)小項目

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

打開是否正常

搜索功能是否正常

初始化請求是否正常&&參數(shù)是否有缺失

涉及技術(shù)/工具

Node

Typescript

puppeteer

完整代碼地址

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

測試流程

項目介紹

目錄結(jié)構(gòu)

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

怎么跑起來？

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

例子1：頁面打開測試

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

• index.ts

• test-open.ts
  

例子2：搜索功能測試

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

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

例子3：請求是否正常參數(shù)是否有缺失

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

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

其他：

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。