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 是後來新增加的)

Playwright

 

其它指令

測試單一測試檔

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

Playwright

 

自動產出腳本

下 codegen 後來接著網站連結,然後輸出存放至 js

就可以用滑鼠點一點瀏覽器畫面互動,過程它會記錄起來,當成腳本

npx playwright codegen ssorc.tw --output ./tests/ssorc.spec.js

滑鼠的動作及輸入,都有提示並自動記錄起來

Playwright end-to-end testing

也可以直接選擇換成其它程式的內容

Playwright end-to-end testing

如果要做更複雜的動作,是需要手動調整腳本的

像是網站如果有 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 });

 

 

Related posts 相關文章
使用 vscode 結合 playwright
More...

作者

留言

撰寫回覆或留言

發佈留言必須填寫的電子郵件地址不會公開。