【筆記】Playwright 瀏覽器自動化工具

Suifeng0214 Lv3

官方 Docs

常用指令(待整理

1
2
3
4
5
6
7
8
9
10
11
pnpm exec playwright test
pnpm exec playwright show-report
pnpm exec playwright test -–ui

npx playwright test
npx playwright test -–ui
npx playwright test –-headed
npx playwright test –-debug

若要指定您想要在哪個瀏覽器上執行測試,請使用–project標誌後面跟著瀏覽器的名稱。
npx playwright test –-project webkit

page.locator(‘role=dialog’) 是什麼?

Playwright 支援一套 ARIA selector 語法
page.locator('role=<roleName>') 可以直接選取具備 role=”“ 屬性的元素,或是符合無障礙規範(Accessible Rich Internet Applications,ARIA)的隱含角色(implicit role)

Codegen

pnpm exec playwright codegen <url> [--save-storage=state.json] 彈跳出 GUI ,錄製瀏覽器操作行為,自動轉換為 Playwright 腳本 做為參考使用。

  • 也可以順便抓取並匯出瀏覽器的 storage state(也就是 cookies、localStorage、sessionStorage)到一個 JSON 檔,讓後續自動化能「免登入」直接帶著已登入的狀態執行。
    之後好像要這樣用
    1
    2
    3
    4
    const browser = await chromium.launch();
    const context = await browser.newContext({ storageState: 'state.json' });
    const page = await context.newPage();
    // 直接訪問需要登入的頁面,就已經處於登入狀態

特殊技巧?

  • hasText:
    await page.locator('.select-option-text', { hasText: matchResult.score }).click();
On this page
【筆記】Playwright 瀏覽器自動化工具