大家好，今天的篇章要介紹的是 Puppeteer，前幾天都是單元測試，component 測試，最後想要玩一波 E2E 測試，不過在真的寫測試之前，這一篇算是會先介紹 Puppeteer 的函式庫，可能得稱它為爬蟲？而後才會結合 Jest 進行測試

本篇會新開一個空白的專案目錄來進行，筆者認為 E2E 所需要寫的程式碼完全不依賴開發環境上的所有函式庫，所以獨立一個即可

Puppeteer

Puppeteer 是一個 Node 庫，它提供了 API 來通過 DevTools 協議控制 Chrome 或 Chromium

我能做什麼？
您可以在瀏覽器中手動執行的大多數操作都可以使用 Puppeteer 完成！以下是一些入門示例：

• 頁面的螢幕截圖和 PDF
• 搜尋 SPA（單頁應用程序）並生成預渲染的內容（即 "SSR" （服務器端渲染））
• 自動執行表單提交，UI測試，鍵盤輸入等
• 創建最新的自動化測試環境。使用最新的 JavaScript 和瀏覽器功能，直接在最新版本的 Chrome 中運行測試。
• 捕獲時間線跟踪 您的網站以幫助診斷性能問題。
• 測試 Chrome 擴展程序。

以上為抄 官方文件 得來的

新建一個空白專案吧，筆者的資料夾名稱取為 typescript-puppeteer-practice，不過名稱依各位自己的喜好即可

安裝配置 ts-node 的環境，要用來執行 .ts 檔

npm i -D ts-node typescript

+ tsconfig.json

這個我是拿前幾天用專案內的複製來用，只有改到一個地方，ts-node 原本在執行 import 語法時會錯，所以修改成這個

{
  "compilerOptions": {
    "target": "es5",
-   "module": "ESNext",
+   "module": "commonjs",
    // "lib": [],

package.json 的 scripts 要新增

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
+   "start": "ts-node"
  },

這樣就能用 ts-node 直接 run .ts 檔了

不過還有其它雜七雜八的東西想裝，像是 ESLint，只是用來檢查 coding style

npx install-peerdeps --dev eslint-config-airbnb-base
npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

+ .eslintrc.js

然後就可以新增一個簡單的 puppeteer 使用範例

+ src/launch.ts

這邊只是單純的開啟無頭瀏覽器，然後馬上單純的關閉

執行的話會看到什麼也沒發生 @@

npm run start -- src/launch.ts

改掉一些程式碼來讓瀏覽器能夠看得到

再執行一次

npm run start -- src/launch.ts

執行結果

確定可以運作了

接下來要撰寫一份自動操作表單用的 code

要拿來玩的頁面是這一頁 https://littlehorseboy.github.io/typescript-react/dist/#/

1. 對 input 輸入值
2. 按下 登入
3. 按下 示範表單 切換 router

4. 輸入姓名
5. 輸入年齡
6. 下拉選單選擇 male
7. Radio Button 選擇
8. Checkbox 選擇
9. Submit 送出

要做的動作大概是這樣，寫成 puppeteer 的程式碼

+ src/typescript-react-formik.ts

npm run start -- src/typescript-react-formik.ts

執行結果

以上就是用 puppeteer 來做填寫表單的使用範例，按照 puppeteer 的官方文件來說，應該是只要是你有辦法用手動的方式操控瀏覽器達到的事情，那麼用 puppeteer 也幾乎都能夠做到

這一篇 typescript 的存在感挺薄弱的 XD

最後附上原始碼
https://github.com/littlehorseboy/typescript-puppeteer-practice/tree/day29-puppeteer

明天要讓 Puppeteer 搭配 Jest 來實現 E2E 測試