Puppeteer 提供一個架構,可用來建立網站的自動化測試,同時也提供測試 Chrome 擴充功能的功能。這類高階端對端測試,在網站或擴充功能建構成最終產品後,可測試其功能。在本教學課程中,我們將示範如何為範例存放區中的擴充功能編寫基本測試。
事前準備
複製或下載 chrome-extensions-samples 存放區。我們會使用 api-samples/history/showHistory
中的 History API 示範做為測試擴充功能。
您還需要安裝 Node.JS,它是執行階段 Puppeteer 的內建功能。
撰寫測試
步驟 1:啟動 Node.JS 專案
我們必須設定基本的 Node.JS 專案。在新資料夾中,建立含有以下內容的 package.json
檔案:
pacakge.json:
{
"name": "puppeteer-demo",
"version": "1.0"
}
與擴充功能的 manifest.json
檔案類似,所有節點專案都需要這個檔案。
步驟 2:安裝 Puppeteer 和 Jest
執行 npm install puppeteer jest
,將 Puppeteer 和 Jest 新增為依附元件。系統會自動將其新增到 package.json
檔案中。
您可以編寫獨立的 Puppeteer 測試,但我們會使用 Jest 為測試執行器為程式碼提供一些額外的結構。
步驟 3:建立進入點
建立名為 index.test.js
的新檔案,並新增下列程式碼:
index.test.js:
const puppeteer = require('puppeteer');
const EXTENSION_PATH = '../../api-samples/history/showHistory';
const EXTENSION_ID = 'jkomgjfbbjocikdmilgaehbfpllalmia';
let browser;
beforeEach(async () => {
// TODO: Launch the browser.
});
afterEach(async () => {
// TODO: Close the browser.
});
步驟 4:啟動瀏覽器
更新 beforeEach
和 afterEach
即可啟動並關閉瀏覽器。執行多項測試時,建議您使用相同的瀏覽器。不過,我們通常不建議採取這種做法,因為這可以減少測試之間的隔離,而且可能會導致一項測試會影響另一個測試的結果。
index.test.js:
beforeEach(async () => {
browser = await puppeteer.launch({
headless: false,
args: [
`--disable-extensions-except=${EXTENSION_PATH}`,
`--load-extension=${EXTENSION_PATH}`
]
});
});
afterEach(async () => {
await browser.close();
browser = undefined;
});
步驟 5:新增別名
為方便測試,請在 package.json
檔案上新增別名:
package.json:
{
"name": "puppeteer-demo",
"version": "1.0",
"dependencies": {
"puppeteer": "^21.3.6"
},
"scripts": {
"start": "jest ."
}
}
這麼做會執行目前目錄中所有結尾為 .test.js
的檔案。
步驟 6:開啟彈出式視窗
我們要新增一項基本測試,用來在新頁面開啟彈出式視窗。由於 Puppeteer 不支援從彈出式視窗存取擴充功能彈出式視窗,因此我們必須執行此項操作。加入下列程式碼︰
index.test.js:
test('popup renders correctly', async () => {
const page = await browser.newPage();
await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);
});
步驟 7:斷言目前狀態
我們改為斷言,如果擴充功能未正常運作,測試就會失敗。我們知道彈出式視窗應會顯示最近造訪的網頁,因此來看看是否能夠:
index.test.js:
test('popup renders correctly', async () => {
const page = await browser.newPage();
await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);
const list = await page.$('ul');
const children = await list.$$('li');
expect(children.length).toBe(1);
});
步驟 8:執行測試
如要執行測試,請使用 npm start
。您應該會看到輸出內容指出測試已通過。
您可以前往 chrome-extensions-samples 存放區查看完整專案。
後續步驟
掌握基本概念後,請嘗試為自己的擴充功能建構測試套件。Puppeteer API 參考資料含有更多可能實現的資訊,目前有許多功能未在此說明。