Playwright 是微軟出的一套網站測試工具
測試什麼，測試像人一樣在瀏覽網頁的過程，只是它是自動化了
它支援 Chromium, WebKit(類 Safari), Firefox 當測試瀏覽器
可用 TypeScript, JavaScript, Python, .NET, Java 程式寫測試內容
也可以把它想成是一個爬蟲工具
不過看到 API reference 就暈了
先從簡單的地方來
安裝 playwright
用 node 安裝執行 playwright
會需要選擇使用 TypeScript 或 JavaScript
選定腳本的放置目錄 tests
是否用 GitHub Actions
可用的瀏覽器
npm init playwright@latest
更新 playwright
npm install -D @playwright/test@latest
開始測試 playwright
它會根據 playwright.config.js 去跑 tests 目錄裡面的所有的 .js 或 .ts 腳本
跑遍每個瀏覽器測試
npx playwright test
預設的 tests/example.spec.js
幾個動作，瀏覽網站、確認有無某字串、點擊等測試
// @ts-check
const { test, expect } = require('@playwright/test');
test('has title', async ({ page }) => {
await page.goto('https://playwright.dev/');
// Expect a title "to contain" a substring.
await expect(page).toHaveTitle(/Playwright/);
});
test('get started link', async ({ page }) => {
await page.goto('https://playwright.dev/');
// Click the get started link.
await page.getByRole('link', { name: 'Get started' }).click();
// Expects the URL to contain intro.
await expect(page).toHaveURL(/.*intro/);
});
指令下的結果
有兩個測試群組，如果要看報告要下 show-report
Running 2 tests using 2 workers 2 passed (10.9s) To open last HTML report run: npx playwright show-report
圖形介面測試
也可以透過圖形化介面測試
npx playwright test --ui
它會列出全部的腳本，可以選擇要測那一個，或換瀏覽器，並看到測試過程
(ssorc.spec.js 的 test 是後來新增加的)
其它指令
測試單一測試檔
npx playwright test tests/example.spec.js
或
npx playwright test example
測試單一目錄裡的
npx playwright test tests/dir/
測試某一行
npx playwright test tests/example.spec.js:11
測試某個 title
可以把它想成是一個群組
npx playwright test -g "has title"
列出有那些測試 (不會真的執行)
npx playwright test --list
Listing tests: [chromium] › example.spec.js:4:1 › has title [chromium] › example.spec.js:11:1 › get started link [chromium] › ssorc.spec.js:3:5 › test Total: 3 tests in 2 files
用那個瀏覽器測試
有 <chromium|firefox|webkit|all>
npx playwright test --browser chromium
也可以到 playwright.config.js 把不用的註解
// {
// name: 'firefox',
// use: { ...devices['Desktop Firefox'] },
// },
查看測試報告
npx playwright show-report
自動產出腳本
下 codegen 後來接著網站連結，然後輸出存放至 js
就可以用滑鼠點一點瀏覽器畫面互動，過程它會記錄起來，當成腳本
npx playwright codegen ssorc.tw --output ./tests/ssorc.spec.js
滑鼠的動作及輸入，都有提示並自動記錄起來
也可以直接選擇換成其它程式的內容
如果要做更複雜的動作，是需要手動調整腳本的
像是網站如果有 alert(); 的時候
不然 test 時是會出錯的
測試加上 –headed
會在測試時，瀏覽器會被打開來看到過程，不過跑得很快
npx playwright test ssorc --headed
其它指令
根據視窗大小
npx playwright codegen --viewport-size=800,600 ssorc.tw
根據設備
device 名稱打錯的話，它會列出全部可支援的設備
npx playwright codegen --device="iPhone 13" ssorc.tw
背景黑色
npx playwright codegen --color-scheme=dark playwright.dev
坐標
npx playwright codegen --geolocation="41.890221,12.492348" maps.google.com
Preserve authenticated state
npx playwright codegen github.com/microsoft/playwright --save-storage=auth.json
Load authenticated state
npx playwright codegen --load-storage=auth.json github.com/microsoft/playwright
用 python 測試
使用 python 獨立運作 playwright
python 安裝 playwright
pip install playwright
將模擬結果存在 test.py 裡
python -m playwright codegen --target python -o test.py -b chromium https://ssorc.tw
測試
python test.py
網站快照
在腳本加入，存成圖片
await page.screenshot({ path: 'screenshot.png', fullPage: true });
留言