跳轉到主要內容

版本說明

版本 1.60​

🌐 跟蹤 (Tracing) 中的 HAR 錄製​

tracing.startHar() / tracing.stopHar() 將 HAR 錄製功能作為一等跟蹤 API 開放，支援與 recordHar 相同的 content、mode 和 urlFilter 選項。返回的 Disposable 物件使得透過 await using 控制錄製範圍變得非常簡單。

await using har = await context.tracing.startHar('trace.har');
const page = await context.newPage();
await page.goto('https://playwright.programming.tw');
// HAR is finalized when `har` goes out of scope.

🪝 拖拽 (Drop) API​

全新的 locator.drop() 可以模擬將檔案或類剪貼簿資料拖拽到元素上的行為。Playwright 會在頁面上下文中透過合成的 [DataTransfer] 分發 dragenter、dragover 和 drop 事件——該功能支援跨瀏覽器，非常適合測試上傳區域。

await page.locator('#dropzone').drop({
  files: { name: 'note.txt', mimeType: 'text/plain', buffer: Buffer.from('hello') },
});

await page.locator('#dropzone').drop({
  data: {
    'text/plain': 'hello world',
    'text/uri-list': 'https://example.com',
  },
});

🎯 Aria 快照 (Aria snapshots)​

🛑 test.abort()​

新增的 test.abort() 可從 fixture、hook 或路由處理程式中終止當前正在執行的測試，並可選擇攜帶一條訊息。當你檢測到無法恢復的錯誤並希望立即讓測試失敗時，可以使用此方法。

test('does not publish to the shared page', async ({ page }) => {
  await page.route('**/publish', route => {
    test.abort('Tests must not publish to the shared page. Use the `clone` option.');
    return route.abort();
  });
  // ...
});

新 API​

瀏覽器、上下文和頁面 (Browser, Context and Page)​

定位器與斷言 (Locators and Assertions)​

網路​

  • webSocketRoute.protocols() 返回頁面請求的 WebSocket 子協議。
  • browserType.connectOverCDP() 新增 noDefaults 選項，用於停用 Playwright 在預設上下文上的預設覆蓋（如下載行為、焦點模擬、媒體模擬等），從而避免在連線使用者日常使用的瀏覽器時干擾其狀態。

錯誤與報告 (Errors and Reporting)​

測試執行器 (Test runner)​

  • testProject.snapshotPathTemplate 新增 {testFileBaseName} 令牌——即不帶副檔名的檔名。
  • 當配置檔案嘗試覆蓋非選項 fixture 或設定 workers: 0 或負值時，測試執行器現在會報錯。

🛠️ 其他改進​

  • HTML 報告
    • npx playwright show-report 現在直接支援 .zip 檔案——無需先解壓。
    • 包含巢狀子步驟附件的步驟會在父步驟上顯示指示器。
    • 當 repeatEachIndex 非零時，會顯示在測試頁首中。
  • Trace Viewer 在網路詳情面板中為 JSON / 表單請求和響應體增加了“美化列印”切換開關。

重大變更 ⚠️​

  • 移除長期棄用的 API
    • Locator.ariaRef() —— 請使用標準的 locator.ariaSnapshot() 流。
    • BrowserContext.exposeBinding 和 Page.exposeBinding 上的 handle 選項。
    • BrowserType.connect 和 BrowserType.connectOverCDP 上的 logger 選項 —— 請改用 tracing。
    • 上下文選項 videosPath / videoSize —— 請改用 recordVideo。

瀏覽器版本​

  • Chromium 148.0.7778.96
  • Mozilla Firefox 150.0.2
  • WebKit 26.4

此版本還針對以下穩定通道進行了測試

  • Google Chrome 147
  • Microsoft Edge 147

版本 1.59​

🎬 截圖錄製 (Screencast)​

新增 page.screencast API，提供統一的頁面內容捕獲介面，支援：

  • 截圖錄製
  • 操作標註
  • 視覺覆蓋層
  • 即時幀捕獲
  • 智慧代理影片憑證 (Agentic video receipts)
Demo

Screencast 錄製 —— 支援精確的開始/停止錄製控制，作為 recordVideo 選項的替代方案。

await page.screencast.start({ path: 'video.webm' });
// ... perform actions ...
await page.screencast.stop();

操作標註 — 啟用內建的視覺標註，在錄製過程中高亮顯示互動元素並顯示操作標題

await page.screencast.showActions({ position: 'top-right' });

screencast.showActions() 接受 position（支援 'top-left', 'top', 'top-right', 'bottom-left', 'bottom', 'bottom-right'）、duration（每個註解的毫秒數）和 fontSize（畫素）。返回一個可處理物件以停止顯示動作。

動作註解也可以在測試 fixture 中透過 video 選項啟用。

// playwright.config.ts
export default defineConfig({
  use: {
    video: {
      mode: 'on',
      show: {
        actions: { position: 'top-left' },
        test: { position: 'top-right' },
      },
    },
  },
});

視覺覆蓋層 — 在頁面頂部新增章節標題和自定義 HTML 覆蓋層，以實現更豐富的旁白

await page.screencast.showChapter('Adding TODOs', {
  description: 'Type and press enter for each TODO',
  duration: 1000,
});

await page.screencast.showOverlay('<div style="color: red">Recording</div>');

即時幀捕獲 — 流式傳輸 JPEG 編碼的幀，用於縮圖、即時預覽、AI 視覺處理等自定義處理

await page.screencast.start({
  onFrame: ({ data }) => sendToVisionModel(data),
  size: { width: 800, height: 600 },
});

智慧代理影片憑證 — 編碼代理可以生成其工作的影片證據。完成任務後，代理可以錄製帶有豐富標註的演練影片，供人工評審

await page.screencast.start({ path: 'receipt.webm' });
await page.screencast.showActions({ position: 'top-right' });

await page.screencast.showChapter('Verifying checkout flow', {
  description: 'Added coupon code support per ticket #1234',
});

// Agent performs the verification steps...
await page.locator('#coupon').fill('SAVE20');
await page.locator('#apply-coupon').click();
await expect(page.locator('.discount')).toContainText('20%');

await page.screencast.showChapter('Done', {
  description: 'Coupon applied, discount reflected in total',
});

await page.screencast.stop();

生成的影片可作為憑證：章節標題提供上下文，操作標註高亮顯示每次互動，且視覺演練比文字日誌更易於檢視。

🔗 互操作性​

新增 browser.bind() API，使已啟動的瀏覽器可供 playwright-cli、@playwright/mcp 及其他客戶端連線。

繫結瀏覽器 — 啟動並繫結瀏覽器，以便他人可以連線

const { endpoint } = await browser.bind('my-session', {
  workspaceDir: '/my/project',
});

從 playwright-cli 連線 — 從您喜愛的編碼代理連線到正在執行的瀏覽器。

playwright-cli attach my-session
playwright-cli -s my-session snapshot

從 @playwright/mcp 連線 — 或者將您的 MCP 伺服器指向正在執行的瀏覽器。

@playwright/mcp --endpoint=my-session

從 Playwright 客戶端連線 — 使用 API 連線到瀏覽器。支援同時連線多個客戶端！

const browser = await chromium.connect(endpoint);

傳遞 host 和 port 選項以透過 WebSocket 而非命名管道進行繫結

const { endpoint } = await browser.bind('my-session', {
  host: 'localhost',
  port: 0,
});
// endpoint is a ws:// URL

呼叫 browser.unbind() 可停止接受新連線。

📊 可觀測性​

執行 playwright-cli show 以開啟儀表板，它會列出所有已繫結的瀏覽器及其狀態，並允許與它們進行互動

  • 檢視您的代理在後臺瀏覽器上正在執行的操作
  • 點選進入會話以進行人工干預
  • 開啟 DevTools 以檢查來自後臺瀏覽器的頁面。
Demo
  • playwright-cli 會自動繫結其所有瀏覽器，以便您觀察代理的動態。
  • 傳遞 PLAYWRIGHT_DASHBOARD=1 環境變數，即可在儀表板中檢視所有 @playwright/test 瀏覽器。

🐛 代理 CLI 偵錯程式​

編碼代理 (Coding agents) 現在可以執行 npx playwright test --debug=cli 來透過 playwright-cli 附加和除錯測試——非常適合在代理工作流中自動修復測試。

$ npx playwright test --debug=cli
### Debugging Instructions
- Run "playwright-cli attach tw-87b59e" to attach to this test

$ playwright-cli attach tw-87b59e
### Session `tw-87b59e` created, attached to `tw-87b59e`.
Run commands with: playwright-cli --session=tw-87b59e <command>
### Paused
- Navigate to "/" at output/tests/example.spec.ts:4

$ playwright-cli --session tw-87b59e step-over
### Page
- Page URL: https://playwright.programming.tw/
- Page Title: Fast and reliable end-to-end testing for modern web apps | Playwright
### Paused
- Expect "toHaveTitle" at output/tests/example.spec.ts:7

📋 代理 CLI 跟蹤分析​

編碼代理可以執行 npx playwright trace 來探索 Playwright 跟蹤，並從命令行了解導致失敗或不穩定的測試。

$ npx playwright trace open test-results/example-has-title-chromium/trace.zip
  Title:        example.spec.ts:3 › has title

$ npx playwright trace actions --grep="expect"
     # Time       Action                                                  Duration
  ──── ─────────  ─────────────────────────────────────────────────────── ────────
    9. 0:00.859  Expect "toHaveTitle"                                        5.1s  ✗

$ npx playwright trace action 9
  Expect "toHaveTitle"
  Error: expect(page).toHaveTitle(expected) failed
    Expected pattern: /Wrong Title/
    Received string:  "Fast and reliable end-to-end testing for modern web apps | Playwright"
    Timeout: 5000ms
  Snapshots
    available: before, after
    usage:     npx playwright trace snapshot 9 --name <before|after>

$ npx playwright trace snapshot 9 --name after
### Page
- Page Title: Fast and reliable end-to-end testing for modern web apps | Playwright

$ npx playwright trace close

♻️ await using​

許多 API 現在返回 非同步可處理物件 (async disposables)，使得可以使用 await using 語法進行自動清理。

await using page = await context.newPage();
{
  await using route = await page.route('**/*', route => route.continue());
  await using script = await page.addInitScript('console.log("init script here")');
  await page.goto('https://playwright.programming.tw');
  // do something
}
// route and init script have been removed at this point

🔍 快照與定位器​

新 API​

截圖錄製​

儲存、控制檯和錯誤​

雜項​

🛠️ 其他改進​

  • UI 模式新增選項，僅顯示受原始碼更改影響的測試。
  • UI 模式和 Trace Viewer 改進了動作過濾功能。
  • HTML 報告顯示同一 Worker 的執行列表。
  • HTML 報告允許過濾測試步驟以進行快速搜尋。
  • 新增跟蹤模式 'retain-on-failure-and-retries'，為每次測試執行錄製跟蹤，並在嘗試失敗時保留所有跟蹤——非常適合比較透過的跟蹤與不穩定的失敗測試的跟蹤。

重大變更 ⚠️​

  • 移除了 WebKit 對 macOS 14 的支援。建議升級您的 macOS 版本，或保留舊版本的 Playwright。
  • 移除 @playwright/experimental-ct-svelte 包。

瀏覽器版本​

  • Chromium 147.0.7727.15
  • Mozilla Firefox 148.0.2
  • WebKit 26.4

此版本還針對以下穩定通道進行了測試

  • Google Chrome 146
  • Microsoft Edge 146

版本 1.58​

時間線 (Timeline)​

如果你使用 合併報告，HTML 報告的 Speedboard 標籤頁現在會顯示時間線。

Timeline chart in the HTML report

UI 模式和 Trace Viewer 改進​

  • 新的“系統”主題選項，跟隨作業系統的深色/淺色模式偏好
  • 程式碼編輯器現已支援搜尋功能 (Cmd/Ctrl+F)
  • 網路詳情面板已重新整理，以提高易用性
  • JSON 響應現在會自動格式化以便於閱讀

感謝 @cpAdm 貢獻這些改進！

雜項​

browserType.connectOverCDP() 現在接受 isLocal 選項。設定為 true 時，告知 Playwright 它與 CDP 伺服器執行在同一主機上，從而開啟檔案系統最佳化。

破壞性變更 ⚠️​

  • 移除 _react 和 _vue 選擇器。請參閱 定位器指南 獲取替代方案。
  • 移除了 :light 選擇器引擎字尾。請改用標準 CSS 選擇器。
  • 移除 browserType.launch() 中的 devtools 選項。請改用 args: ['--auto-open-devtools-for-tabs']。
  • 移除了 WebKit 對 macOS 13 的支援。建議升級您的 macOS 版本，或繼續使用舊版本的 Playwright。

瀏覽器版本​

  • Chromium 145.0.7632.6
  • Mozilla Firefox 146.0.1
  • WebKit 26.0

此版本還針對以下穩定通道進行了測試

  • Google Chrome 144
  • Microsoft Edge 144

版本 1.57​

Speedboard​

在 HTML 報告中，有一個我們稱之為“Speedboard”的新標籤頁。

Speedboard

它按緩慢程度對所有已執行的測試進行排序，可以幫助你瞭解測試套件在哪些地方耗時過長。檢查一下你的測試——也許你會發現一些測試等待的時間比預期的要長！

Chrome for Testing​

Playwright 現在執行在 Chrome for Testing 構建版本上，而非 Chromium。有頭模式使用 chrome；無頭模式使用 chrome-headless-shell。升級到 v1.57 後，現有測試應能繼續透過。

我們預計這次切換不會帶來功能性變化。最大的變化是工具欄中新的圖示和標題。

new and old logo

如果你仍然看到意外的行為變化，請提交一個 issue。

在 Arm64 Linux 上，Playwright 繼續使用 Chromium。

等待 Web 伺服器輸出​

testConfig.webServer 增加了 wait 欄位。傳入一個正則表示式，Playwright 將等待直到 Web 伺服器日誌匹配該表示式。

import { defineConfig } from '@playwright/test';

export default defineConfig({
  webServer: {
    command: 'npm run start',
    wait: {
      stdout: /Listening on port (?<my_server_port>\d+)/
    },
  },
});

如果你在表示式中包含具名捕獲組，Playwright 將透過環境變數提供捕獲組的內容。

import { test, expect } from '@playwright/test';

test.use({ baseURL: `https://:${process.env.MY_SERVER_PORT ?? 3000}` });

test('homepage', async ({ page }) => {
  await page.goto('/');
});

這不僅對於捕獲開發伺服器的不同埠很有用，還可以用於等待不支援 HTTP 就緒檢查，但會向 stdout 或 stderr 列印就緒訊息的服務。

破壞性變更​

在棄用 3 年後，我們從 API 中移除了 page.accessibility。如果需要測試頁面無障礙性，請使用其他庫，例如 Axe。請參閱我們的 Node.js 整合指南。

新 API​

雜項​

  • Playwright Docker 映象從 Node.js v22 切換到 Node.js v24 LTS。

瀏覽器版本​

  • Chromium 143.0.7499.4
  • Mozilla Firefox 144.0.2
  • WebKit 26.0

版本 1.56​

Playwright 測試代理​

引入 Playwright 測試代理，三種自定義代理定義，旨在引導大模型 (LLM) 完成構建 Playwright 測試的核心過程：

  • 🎭 planner：探索應用程式並生成 Markdown 測試計劃。
  • 🎭 generator：將 Markdown 計劃轉換為 Playwright 測試檔案。
  • 🎭 healer：執行測試套件並自動修復失敗的測試。

使用你選擇的客戶端執行 npx playwright init-agents 以生成最新的代理定義。

# Generate agent files for each agentic loop
# Visual Studio Code
npx playwright init-agents --loop=vscode
# Claude Code
npx playwright init-agents --loop=claude
# opencode
npx playwright init-agents --loop=opencode

瞭解更多關於 Playwright 測試代理的資訊。

新 API​

UI 模式和 HTML 報告​

  • 在 'html' 報告器中添加了停用“複製提示”按鈕的選項。
  • 在 'html' 報告器和 UI 模式中添加了合併檔案的選項，將測試和 describe 塊摺疊為單一統一列表。
  • 在 UI 模式中添加了映象 --update-snapshots 選項的配置。
  • 在 UI 模式中添加了每次僅執行單個 Worker 的選項。

重大變更​

雜項​

  • Aria 快照會渲染並比較 input 的 placeholder
  • 向 Playwright Worker 程序添加了環境變數 PLAYWRIGHT_TEST，以允許識別測試狀態。

瀏覽器版本​

  • Chromium 141.0.7390.37
  • Mozilla Firefox 142.0.1
  • WebKit 26.0

版本 1.55​

新 API​

  • 新增屬性 testStepInfo.titlePath，返回從測試檔案開始，包括測試和步驟標題的完整標題路徑。

Codegen​

  • 自動 `toBeVisible()` 斷言：Codegen 現在可以為常見的 UI 互動生成自動 `toBeVisible()` 斷言。此功能可在 Codegen 設定 UI 中啟用。

重大變更​

  • ⚠️ 停止支援 Chromium 擴充套件程式清單 v2。

雜項​

  • 新增對 Debian 13 "Trixie" 的支援。

瀏覽器版本​

  • Chromium 140.0.7339.16
  • Mozilla Firefox 141.0
  • WebKit 26.0

此版本還針對以下穩定通道進行了測試

  • Google Chrome 139
  • Microsoft Edge 139

版本 1.54​

亮點​

  • browserContext.cookies() 和 browserContext.addCookies() 中新增 Cookie 屬性 partitionKey。該屬性允許儲存和恢復分割槽 Cookie。更多資訊請參閱 CHIPS MDN 文章。注意不同瀏覽器對 Cookie 分割槽的支援和預設設定各不相同。

  • 新增 noSnippets 選項以停用 HTML 報告中的程式碼片段。

    import { defineConfig } from '@playwright/test';

    export default defineConfig({
      reporter: [['html', { noSnippets: true }]]
    });

  • 測試註解中新增 location 屬性（例如在 testResult.annotations 和 testInfo.annotations 中）。它顯示了 test.skip 或 test.fixme 等註解是在何處新增的。

命令列​

  • 多條命令中新增選項 `user-data-dir`。您可以指定相同的使用者資料目錄來在會話之間重用瀏覽狀態，例如身份驗證。

    npx playwright codegen --user-data-dir=./user-data

  • 從 npx playwright test 命令中移除了 -gv 選項。請使用 --grep-invert。

  • npx playwright open 不再開啟測試錄製器。請使用 npx playwright codegen。

雜項​

  • 移除了對 Node.js 16 的支援。
  • 棄用了對 Node.js 18 的支援，未來將移除。

瀏覽器版本​

  • Chromium 139.0.7258.5
  • Mozilla Firefox 140.0.2
  • WebKit 26.0

此版本還針對以下穩定通道進行了測試

  • Google Chrome 140
  • Microsoft Edge 140

版本 1.53​

跟蹤檢視器和 HTML 報告器更新​

  • Trace Viewer 和 HTML 報告中的新步驟。

    New Trace Viewer Steps

  • 'html' 報告器中的新選項，用於設定特定測試執行的標題。

    import { defineConfig } from '@playwright/test';

    export default defineConfig({
      reporter: [['html', { title: 'Custom test run #1028' }]]
    });

雜項​

  • testInfo.snapshotPath() 中新增 kind 選項，用於控制使用哪個快照路徑模板。

  • 新增方法 locator.describe() 以描述定位器，用於 Trace Viewer 和報告。

    const button = page.getByTestId('btn-sub').describe('Subscribe button');
    await button.click();

  • npx playwright install --list 現在將列出所有已安裝的瀏覽器、版本和位置。

瀏覽器版本​

  • Chromium 138.0.7204.4
  • Mozilla Firefox 139.0
  • WebKit 18.5

此版本還針對以下穩定通道進行了測試

  • Google Chrome 137
  • Microsoft Edge 137

版本 1.52​

亮點​

  • 新增方法 expect(locator).toContainClass()，用於符合人體工程學地斷言元素上的單個類名。

    await expect(page.getByRole('listitem', { name: 'Ship v1.52' })).toContainClass('done');

  • Aria 快照 獲得了兩個新屬性：/children 用於嚴格匹配，/url 用於連結。

    await expect(locator).toMatchAriaSnapshot(`
      - list
        - /children: equal
        - listitem: Feature A
        - listitem:
          - link "Feature B":
            - /url: "https://playwright.programming.tw"
    `);

測試執行器​

  • 新增屬性 testProject.workers，允許指定用於測試專案的併發 Worker 程序數量。全侷限制 testConfig.workers 仍然適用。
  • 新增 testConfig.failOnFlakyTests 選項，用於在檢測到任何不穩定（flaky）測試時使測試執行失敗，類似於 --fail-on-flaky-tests。這對確保所有測試在部署前都穩定的 CI/CD 環境非常有用。
  • 新增屬性 testResult.annotations，包含每次測試重試的註解。

雜項​

  • apiRequest.newContext() 中新增 maxRedirects 選項，用於控制最大重定向次數。
  • HTML 報告器現在支援透過 !@my-tag、!my-file.spec.ts 或 !p:my-project 進行非過濾 (NOT filtering)。

破壞性變更​

  • page.route() 等方法中的 Glob URL 模式不再支援 ? 和 []。我們建議改用正則表示式。
  • 方法 route.continue() 不再允許覆蓋 Cookie 請求頭。如果提供了 Cookie 頭，它將被忽略，Cookie 將從瀏覽器的 Cookie 儲存中載入。要設定自定義 Cookie，請使用 browserContext.addCookies()。
  • macOS 13 已棄用，將不再接收 WebKit 更新。請升級到更新的 macOS 版本以繼續受益於最新的 WebKit 改進。

瀏覽器版本​

  • Chromium 136.0.7103.25
  • Mozilla Firefox 137.0
  • WebKit 18.4

此版本還針對以下穩定通道進行了測試

  • Google Chrome 135
  • Microsoft Edge 135

版本 1.51​

IndexedDB 的 StorageState​

  • browserContext.storageState() 新增 indexedDB 選項，允許儲存和恢復 IndexedDB 內容。對於應用程式使用 IndexedDB API 儲存身份驗證令牌（如 Firebase Authentication）的情況非常有用。

    以下是一個遵循 身份驗證指南 的示例。

    tests/auth.setup.ts
    import { test as setup, expect } from '@playwright/test';
    import path from 'path';

    const authFile = path.join(__dirname, '../playwright/.auth/user.json');

    setup('authenticate', async ({ page }) => {
      await page.goto('/');
      // ... perform authentication steps ...

      // make sure to save indexedDB
      await page.context().storageState({ path: authFile, indexedDB: true });
    });

複製為提示 (Copy as prompt)​

HTML 報告、Trace Viewer 和 UI 模式中的錯誤資訊處新增了“複製提示”按鈕。點選即可複製一個預填寫的 LLM 提示詞，其中包含錯誤資訊和修復錯誤的有用上下文。

Copy prompt

過濾可見元素​

locator.filter() 新增 visible 選項，允許僅匹配可見元素。

example.spec.ts
test('some test', async ({ page }) => {
  // Ignore invisible todo items.
  const todoItems = page.getByTestId('todo-item').filter({ visible: true });
  // Check there are exactly 3 visible ones.
  await expect(todoItems).toHaveCount(3);
});

HTML 報告中的 Git 資訊​

設定 testConfig.captureGitInfo 選項以捕獲 Git 資訊到 testConfig.metadata。

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  captureGitInfo: { commit: true, diff: true }
});

HTML 報告在可用時將顯示此資訊。

Git information in the report

測試步驟改進​

測試步驟中現在提供一個新的 TestStepInfo 物件。你可以新增步驟附件或在某些條件下跳過該步驟。

test('some test', async ({ page, isMobile }) => {
  // Note the new "step" argument:
  await test.step('here is my step', async step => {
    step.skip(isMobile, 'not relevant on mobile layouts');

    // ...
    await step.attach('my attachment', { body: 'some text' });
    // ...
  });
});

雜項​

瀏覽器版本​

  • Chromium 134.0.6998.35
  • Mozilla Firefox 135.0
  • WebKit 18.4

此版本還針對以下穩定通道進行了測試

  • Google Chrome 133
  • Microsoft Edge 133

版本 1.50​

測試執行器​

  • 新增 timeout 選項，允許指定單個測試步驟的最長執行時間。步驟超時將導致測試執行失敗。

    test('some test', async ({ page }) => {
      await test.step('a step', async () => {
        // This step can time out separately from the test
      }, { timeout: 1000 });
    });

  • 新增方法 test.step.skip() 以停用測試步驟的執行。

    test('some test', async ({ page }) => {
      await test.step('before running step', async () => {
        // Normal step
      });

      await test.step.skip('not yet ready', async () => {
        // This step is skipped
      });

      await test.step('after running step', async () => {
        // This step still runs even though the previous one was skipped
      });
    });

  • 擴充套件了 expect(locator).toMatchAriaSnapshot()，允許將 Aria 快照儲存在單獨的 YAML 檔案中。

  • 新增方法 expect(locator).toHaveAccessibleErrorMessage()，用於斷言定位器指向具有給定 aria errormessage 的元素。

  • testConfig.updateSnapshots 添加了配置列舉 changed。changed 僅更新已更改的快照，而 all 現在無論是否有差異都會更新所有快照。

  • 新增 testConfig.updateSourceMethod 選項，定義配置 testConfig.updateSnapshots 時如何更新原始碼。除了建立補丁檔案的 patch 模式外，還添加了將更改直接寫入原始碼的 overwrite 和 3-way 模式。

    npx playwright test --update-snapshots=changed --update-source-method=3way

  • testConfig.webServer 添加了 gracefulShutdown 欄位，用於指定除預設 SIGKILL 之外的程序終止訊號。

  • 從報告器 API 中公開了 testStep.attachments，以允許檢索該步驟建立的所有附件。

  • testConfig.expect 配置中為 toHaveScreenshot 和 toMatchAriaSnapshot 斷言添加了 pathTemplate 選項。

UI 更新​

  • 更新了預設 HTML 報告器以改進附件顯示。
  • Codegen 中新增按鈕，用於選擇元素以生成 aria 快照。
  • 現在在跟蹤中，除了操作 API 呼叫外，還顯示附加詳細資訊（例如按下的鍵）。
  • 在跟蹤中顯示 `canvas` 內容容易出錯。現在預設停用顯示，可透過 `Display canvas content` UI 設定啟用。
  • “呼叫”和“網路”面板現在顯示額外的計時資訊。

重大變更​

瀏覽器版本​

  • Chromium 133.0.6943.16
  • Mozilla Firefox 134.0
  • WebKit 18.2

此版本還針對以下穩定通道進行了測試

  • Google Chrome 132
  • Microsoft Edge 132

版本 1.49​

Aria 快照​

新斷言 expect(locator).toMatchAriaSnapshot() 透過與預期無障礙樹（以 YAML 表示）進行比較來驗證頁面結構。

await page.goto('https://playwright.programming.tw');
await expect(page.locator('body')).toMatchAriaSnapshot(`
  - banner:
    - heading /Playwright enables reliable/ [level=1]
    - link "Get started"
    - link "Star microsoft/playwright on GitHub"
  - main:
    - img "Browsers (Chromium, Firefox, WebKit)"
    - heading "Any browser • Any platform • One API"
`);

你可以使用 測試生成器 (Test Generator) 生成此斷言，並使用 --update-snapshots 命令列標誌更新預期的快照。

在 aria 快照指南 中瞭解更多資訊。

測試執行器​

破壞性變更：chrome 和 msedge 渠道切換到新的無頭模式​

如果您在 `playwright.config.ts` 中使用以下通道之一，此更改會影響您

  • `chrome`, `chrome-dev`, `chrome-beta`, 或 `chrome-canary`
  • `msedge`, `msedge-dev`, `msedge-beta`, 或 `msedge-canary`

我需要做什麼？​

更新到 Playwright v1.49 後，執行你的測試套件。如果它仍然透過，那麼一切就緒。如果失敗，你可能需要更新快照，並調整一些圍繞 PDF 檢視器和擴充套件的測試程式碼。有關 Chromium 無頭模式的更多詳細資訊，請參閱問題 #33566。

其他破壞性變更​

  • Ubuntu 20.04 和 Debian 11 上的 WebKit 不再有更新。我們建議您將作業系統更新到更高版本。
  • 包 @playwright/experimental-ct-vue2 將不再更新。
  • 包 @playwright/experimental-ct-solid 將不再更新。

嘗試新的 Chromium 無頭模式​

您可以使用 `'chromium'` 通道選擇加入新的無頭模式。正如 Chrome 官方文件所述

另一方面，新的無頭模式是真正的 Chrome 瀏覽器，因此更真實、可靠，並提供更多功能。這使其更適合高精度端到端 Web 應用測試或瀏覽器擴充套件測試。

有關你可能遇到的潛在中斷列表和 Chromium 無頭模式的更多詳細資訊，請參閱問題 #33566。如果在選擇加入後發現任何問題，請提交一個 issue。

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'], channel: 'chromium' },
    },
  ],
});

雜項​

  • 快照中的 `` 元素現在會繪製預覽。
  • 新增方法 tracing.group()，用於在跟蹤中直觀地分組動作。
  • Playwright Docker 映象從 Node.js v20 切換到 Node.js v22 LTS。

瀏覽器版本​

  • Chromium 131.0.6778.33
  • Mozilla Firefox 132.0
  • WebKit 18.2

此版本還針對以下穩定通道進行了測試

  • Google Chrome 130
  • Microsoft Edge 130

版本 1.48​

WebSocket 路由​

新增方法 page.routeWebSocket() 和 browserContext.routeWebSocket()，允許攔截、修改和模擬頁面中發起的 WebSocket 連線。以下是一個透過響應 "request" 並回復 "response" 來模擬 WebSocket 通訊的簡單示例。

await page.routeWebSocket('/ws', ws => {
  ws.onMessage(message => {
    if (message === 'request')
      ws.send('response');
  });
});

有關詳細資訊，請參閱 WebSocketRoute。

UI 更新​

  • HTML 報告中新增了用於註解和測試位置的“複製”按鈕。
  • route.fulfill() 等路由方法呼叫不再顯示在報告和 Trace Viewer 中。你可以在網路標籤頁中檢視哪些網路請求已被路由。
  • 網路選項卡中請求的新“複製為 cURL”和“複製為 fetch”按鈕。

雜項 (Miscellaneous)​

瀏覽器版本​

  • Chromium 130.0.6723.19
  • Mozilla Firefox 130.0
  • WebKit 18.0

此版本還針對以下穩定通道進行了測試

  • Google Chrome 129
  • Microsoft Edge 129

版本 1.47​

網路選項卡改進​

UI 模式和 Trace Viewer 中的網路標籤頁有幾項不錯的改進。

  • 按資產型別和 URL 篩選
  • 更好地顯示查詢字串引數
  • 字型資產預覽
Network tab now has filters

--tsconfig CLI 選項​

預設情況下，Playwright 會使用啟發式方法為每個匯入的檔案查詢最近的 tsconfig。你現在可以在命令列中指定單個 tsconfig 檔案，Playwright 將將其用於所有匯入的檔案，而不限於測試檔案。

# Pass a specific tsconfig
npx playwright test --tsconfig tsconfig.test.json

APIRequestContext 現在接受 URLSearchParams 和 string 作為查詢引數​

你現在可以傳遞 URLSearchParams 和 string 作為 APIRequestContext 的查詢引數。

test('query params', async ({ request }) => {
  const searchParams = new URLSearchParams();
  searchParams.set('userId', 1);
  const response = await request.get(
      'https://jsonplaceholder.typicode.com/posts',
      {
        params: searchParams // or as a string: 'userId=1'
      }
  );
  // ...
});

雜項​

  • mcr.microsoft.com/playwright:v1.47.0 現在提供基於 Ubuntu 24.04 Noble 的 Playwright 映象。要使用基於 22.04 jammy 的映象，請改用 mcr.microsoft.com/playwright:v1.47.0-jammy。
  • 新增 behavior、behavior 和 behavior 選項，用於等待正在進行的監聽器完成。
  • TLS 客戶端證書現在可以透過傳遞 clientCertificates.cert 和 clientCertificates.key 作為緩衝區（而不是檔案路徑）從記憶體中傳遞。
  • 具有 text/html 內容型別的附件現在可以在 HTML 報告的新標籤頁中開啟。這對於在 Playwright 測試報告中包含第三方報告或其他 HTML 內容並分發給你的團隊非常有用。
  • locator.selectOption() 中的 noWaitAfter 選項已被棄用。
  • 我們發現 GitHub Actions `macos-13` 上 WebGL 在 Webkit 中表現異常的報告。我們建議將 GitHub Actions 升級到 `macos-14`。

瀏覽器版本​

  • Chromium 129.0.6668.29
  • Mozilla Firefox 130.0
  • WebKit 18.0

此版本還針對以下穩定通道進行了測試

  • Google Chrome 128
  • Microsoft Edge 128

版本 1.46​

TLS 客戶端證書​

Playwright 現在允許你提供客戶端證書，以便伺服器可以對其進行驗證，如 TLS 客戶端身份驗證所指定。

以下程式碼片段為 https://example.com 設定了客戶端證書。

import { defineConfig } from '@playwright/test';

export default defineConfig({
  // ...
  use: {
    clientCertificates: [{
      origin: 'https://example.com',
      certPath: './cert.pem',
      keyPath: './key.pem',
      passphrase: 'mysecretpassword',
    }],
  },
  // ...
});

你還可以向特定的 測試專案 提供客戶端證書，或者作為 browser.newContext() 和 apiRequest.newContext() 的引數。

--only-changed CLI 選項​

新 CLI 選項 --only-changed 將僅執行自上次 Git 提交或特定 Git "ref" 以來已更改的測試檔案。它還將執行所有匯入了已更改檔案的測試檔案。

# Only run test files with uncommitted changes
npx playwright test --only-changed

# Only run test files changed relative to the "main" branch
npx playwright test --only-changed=main

元件測試：新的 router fixture​

此版本引入了實驗性的 router fixture，用於在元件測試中攔截和處理網路請求。有兩種使用路由器 fixture 的方法：

  • 呼叫 router.route(url, handler)，其行為類似於 page.route()。
  • 呼叫 router.use(handlers) 並傳入 MSW 庫 的請求處理程式。

這是一個在測試中重用現有 MSW 處理程式的示例。

import { handlers } from '@src/mocks/handlers';

test.beforeEach(async ({ router }) => {
  // install common handlers before each test
  await router.use(...handlers);
});

test('example test', async ({ mount }) => {
  // test as usual, your handlers are active
  // ...
});

此 fixture 僅在 元件測試 中可用。

UI 模式 / Trace Viewer 更新​

  • 測試註解現在顯示在 UI 模式中。
  • 文字附件的內容現在在附件窗格中內聯呈現。
  • 新的設定用於顯示/隱藏路由操作，如 route.continue()。
  • 請求方法和狀態顯示在網路詳細資訊選項卡中。
  • 新按鈕用於將原始檔位置複製到剪貼簿。
  • 元資料窗格現在顯示 baseURL。

雜項​

  • apiRequestContext.fetch() 中新增 maxRetries 選項，用於在 ECONNRESET 網路錯誤時重試。
  • 新增 box a fixture 的選項，以最大限度地減少測試報告和錯誤訊息中的 fixture 暴露。
  • 新增提供 自定義 fixture 標題 的選項，以便在測試報告和錯誤訊息中使用。

瀏覽器版本​

  • Chromium 128.0.6613.18
  • Mozilla Firefox 128.0
  • WebKit 18.0

此版本還針對以下穩定通道進行了測試

  • Google Chrome 127
  • Microsoft Edge 127

版本 1.45​

時鐘​

利用新的 Clock API 可以操作和控制測試中的時間，以驗證與時間相關的行為。此 API 涵蓋了許多常見場景，包括：

  • 使用預定義時間進行測試；
  • 保持一致的時間和計時器；
  • 監控不活動；
  • 手動逐時推進時間。
// Initialize clock and let the page load naturally.
await page.clock.install({ time: new Date('2024-02-02T08:00:00') });
await page.goto('https://:3333');

// Pretend that the user closed the laptop lid and opened it again at 10am,
// Pause the time once reached that point.
await page.clock.pauseAt(new Date('2024-02-02T10:00:00'));

// Assert the page state.
await expect(page.getByTestId('current-time')).toHaveText('2/2/2024, 10:00:00 AM');

// Close the laptop lid again and open it at 10:30am.
await page.clock.fastForward('30:00');
await expect(page.getByTestId('current-time')).toHaveText('2/2/2024, 10:30:00 AM');

有關更多詳細資訊，請參閱 時鐘指南。

測試執行器​

  • 新增 CLI 選項 --fail-on-flaky-tests，在出現任何不穩定測試時將退出程式碼設定為 1。注意，預設情況下，當所有失敗的測試在重試後恢復時，測試執行器會以程式碼 0 退出。使用此選項，在這種情況下測試執行將失敗。

  • 新的環境變數 PLAYWRIGHT_FORCE_TTY 控制內建的 list、line 和 dot 報告器是否假定存在即時終端。例如，當 CI 環境不能很好地處理 ANSI 控制序列時，這可能很有用。或者，如果你計劃對輸出進行後處理並處理控制序列，即使在沒有即時終端的情況下也可以啟用 tty 行為。

    # Avoid TTY features that output ANSI control sequences
    PLAYWRIGHT_FORCE_TTY=0 npx playwright test

    # Enable TTY features, assuming a terminal width 80
    PLAYWRIGHT_FORCE_TTY=80 npx playwright test

  • testConfig.respectGitIgnore 和 testProject.respectGitIgnore 新選項控制在搜尋測試時是否排除匹配 .gitignore 模式的檔案。

  • 自定義期望匹配器 (expect matchers) 現在可以使用新屬性 timeout。此屬性考慮了 playwright.config.ts 和 expect.configure()。

    import { expect as baseExpect } from '@playwright/test';

    export const expect = baseExpect.extend({
      async toHaveAmount(locator: Locator, expected: number, options?: { timeout?: number }) {
        // When no timeout option is specified, use the config timeout.
        const timeout = options?.timeout ?? this.timeout;
        // ... implement the assertion ...
      },
    });

雜項​

  • 方法 locator.setInputFiles() 現在支援為 <input type=file webkitdirectory> 元素上傳目錄。

    await page.getByLabel('Upload directory').setInputFiles(path.join(__dirname, 'mydir'));

  • locator.click() 或 locator.press() 等多種方法現在支援 ControlOrMeta 修飾鍵。此鍵在 macOS 上對映到 Meta，在 Windows 和 Linux 上對映到 Control。

    // Press the common keyboard shortcut Control+S or Meta+S to trigger a "Save" operation.
    await page.keyboard.press('ControlOrMeta+S');

  • apiRequest.newContext() 中新增屬性 httpCredentials.send，允許始終傳送 Authorization 頭，或僅在響應 401 Unauthorized 時傳送。

  • apiRequestContext.dispose() 中新增 reason 選項，該選項將包含在被上下文銷燬中斷的持續操作的錯誤訊息中。

  • browserType.launchServer() 中新增 host 選項，允許在特定地址上接受 WebSocket 連線，而不是預設的 0.0.0.0。

  • Playwright 現在支援 Ubuntu 24.04 上的 Chromium、Firefox 和 WebKit。

  • v1.45 是 macOS 12 Monterey 接收 WebKit 更新的最後一個版本。請更新 macOS 以繼續使用最新的 WebKit。

瀏覽器版本​

  • Chromium 127.0.6533.5
  • Mozilla Firefox 127.0
  • WebKit 17.4

此版本還針對以下穩定通道進行了測試

  • Google Chrome 126
  • Microsoft Edge 126

版本 1.44​

新 API​

可訪問性斷言

  • expect(locator).toHaveAccessibleName() 檢查元素是否具有指定的無障礙名稱。

    const locator = page.getByRole('button');
    await expect(locator).toHaveAccessibleName('Submit');

  • expect(locator).toHaveAccessibleDescription() 檢查元素是否具有指定的無障礙描述。

    const locator = page.getByRole('button');
    await expect(locator).toHaveAccessibleDescription('Upload a photo');

  • expect(locator).toHaveRole() 檢查元素是否具有指定的 ARIA 角色。

    const locator = page.getByTestId('save-button');
    await expect(locator).toHaveRole('button');

定位器處理程式

  • 在執行透過 page.addLocatorHandler() 新增的處理程式後，Playwright 現在會等待直到觸發處理程式的覆蓋層不再可見。你可以透過新的 noWaitAfter 選項選擇退出此行為。
  • 你可以使用 page.addLocatorHandler() 中的新 times 選項來指定應執行處理程式的最大次數。
  • page.addLocatorHandler() 中的處理程式現在接受定位器作為引數。
  • 新增 page.removeLocatorHandler() 方法，用於刪除之前新增的定位器處理程式。
const locator = page.getByText('This interstitial covers the button');
await page.addLocatorHandler(locator, async overlay => {
  await overlay.locator('#close').click();
}, { times: 3, noWaitAfter: true });
// Run your tests that can be interrupted by the overlay.
// ...
await page.removeLocatorHandler(locator);

雜項選項

  • apiRequestContext.fetch() 中的 multipart 選項現在接受 FormData 並支援重複使用相同名稱的欄位。

    const formData = new FormData();
    formData.append('file', new File(['let x = 2024;'], 'f1.js', { type: 'text/javascript' }));
    formData.append('file', new File(['hello'], 'f2.txt', { type: 'text/plain' }));
    context.request.post('https://example.com/uploadFiles', {
      multipart: formData
    });

  • expect(callback).toPass({ intervals }) 現在可以透過 testConfig.expect 在全域性範圍內配置，或者在 testProject.expect 中按專案配置 expect.toPass.intervals 選項。

  • expect(page).toHaveURL(url) 現在支援 ignoreCase 選項。

  • testProject.ignoreSnapshots 允許按專案配置是否跳過截圖斷言。

報告器 API

  • 新增方法 suite.entries()，按宣告順序返回子測試套件和測試用例。suite.type 和 testCase.type 可用於區分列表中的測試用例和套件。
  • Blob 報告器現在允許透過單個選項 outputFile 覆蓋報告檔案路徑。同一個選項也可以指定為環境變數 PLAYWRIGHT_BLOB_OUTPUT_FILE，這在 CI/CD 中可能更方便。
  • JUnit 報告器現在支援 includeProjectInTestName 選項。

命令列

  • --last-failed CLI 選項，用於僅執行在上一次執行中失敗的測試。

    首先執行所有測試。

    $ npx playwright test

    Running 103 tests using 5 workers
    ...
    2 failed
      [chromium] › my-test.spec.ts:8:5 › two ─────────────────────────────────────────────────────────
      [chromium] › my-test.spec.ts:13:5 › three ──────────────────────────────────────────────────────
    101 passed (30.0s)

    現在修復失敗的測試，並再次使用 --last-failed 選項執行 Playwright。

    $ npx playwright test --last-failed

    Running 2 tests using 2 workers
      2 passed (1.2s)

瀏覽器版本​

  • Chromium 125.0.6422.14
  • Mozilla Firefox 125.0.1
  • WebKit 17.4

此版本還針對以下穩定通道進行了測試

  • Google Chrome 124
  • Microsoft Edge 124

版本 1.43​

新 API​

  • 方法 browserContext.clearCookies() 現在支援過濾器，僅刪除部分 Cookie。

    // Clear all cookies.
    await context.clearCookies();
    // New: clear cookies with a particular name.
    await context.clearCookies({ name: 'session-id' });
    // New: clear cookies for a particular domain.
    await context.clearCookies({ domain: 'my-origin.com' });

  • 新增 retain-on-first-failure 模式用於 testOptions.trace。在此模式下，會為每個測試的第一次執行錄製跟蹤，但不會為重試錄製。當測試執行失敗時，跟蹤檔案會被保留，否則會被刪除。 

    import { defineConfig } from '@playwright/test';

    export default defineConfig({
      use: {
        trace: 'retain-on-first-failure',
      },
    });

  • 新增屬性 testInfo.tags，在測試執行期間公開測試標籤。

    test('example', async ({ page }) => {
      console.log(test.info().tags);
    });

  • 新增方法 locator.contentFrame()，將 Locator 物件轉換為 FrameLocator。當你在某處獲得一個 Locator 物件，並且稍後想與框架內的內容互動時，這非常有用。 

    const locator = page.locator('iframe[name="embedded"]');
    // ...
    const frameLocator = locator.contentFrame();
    await frameLocator.getByRole('button').click();

  • 新增方法 frameLocator.owner()，將 FrameLocator 物件轉換為 Locator。當你在某處獲得一個 FrameLocator 物件，並且稍後想與 iframe 元素互動時，這非常有用。 

    const frameLocator = page.frameLocator('iframe[name="embedded"]');
    // ...
    const locator = frameLocator.owner();
    await expect(locator).toBeVisible();

UI 模式更新​

Playwright UI Mode
  • 在測試列表中檢視標籤。
  • 透過輸入 @fast 或點選標籤本身按標籤進行過濾。
  • 新快捷鍵：
    • “F5”執行測試。
    • “Shift F5”停止執行測試。
    • “Ctrl `”切換測試輸出。

瀏覽器版本​

  • Chromium 124.0.6367.8
  • Mozilla Firefox 124.0
  • WebKit 17.4

此版本還針對以下穩定通道進行了測試

  • Google Chrome 123
  • Microsoft Edge 123

版本 1.42​

新 API​

  • 新方法 page.addLocatorHandler() 註冊一個回撥函式，當指定的元素變得可見並可能阻塞 Playwright 操作時呼叫該回調。回撥可以處理掉遮罩。以下是一個關閉 Cookie 對話方塊的示例：
// Setup the handler.
await page.addLocatorHandler(
    page.getByRole('heading', { name: 'Hej! You are in control of your cookies.' }),
    async () => {
      await page.getByRole('button', { name: 'Accept all' }).click();
    });
// Write the test as usual.
await page.goto('https://www.ikea.com/');
await page.getByRole('link', { name: 'Collection of blue and white' }).click();
await expect(page.getByRole('heading', { name: 'Light and easy' })).toBeVisible();
electronApp.on('console', async msg => {
  const values = [];
  for (const arg of msg.args())
    values.push(await arg.jsonValue());
  console.log(...values);
});
await electronApp.evaluate(() => console.log('hello', 5, { foo: 'bar' }));
  • 新語法，用於向測試新增標籤（測試標題中的 @-tokens 仍然支援）。
test('test customer login', {
  tag: ['@fast', '@login'],
}, async ({ page }) => {
  // ...
});

使用 --grep 命令列選項僅執行帶有特定標籤的測試。

npx playwright test --grep @fast
  • --project 命令列 標誌 現在支援 '*' 萬用字元。
npx playwright test --project='*mobile*'
test('test full report', {
  annotation: [
    { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/23180' },
    { type: 'docs', description: 'https://playwright.programming.tw/docs/test-annotations#tag-tests' },
  ],
}, async ({ page }) => {
  // ...
});

公告​

  • ⚠️ Ubuntu 18 不再受支援。

瀏覽器版本​

  • Chromium 123.0.6312.4
  • Mozilla Firefox 123.0
  • WebKit 17.4

此版本還針對以下穩定通道進行了測試

  • Google Chrome 122
  • Microsoft Edge 123

版本 1.41​

新 API​

瀏覽器版本​

  • Chromium 121.0.6167.57
  • Mozilla Firefox 121.0
  • WebKit 17.4

此版本還針對以下穩定通道進行了測試

  • Google Chrome 120
  • Microsoft Edge 120

版本 1.40​

測試生成器更新​

Playwright Test Generator

生成斷言的新工具

這是一個帶有斷言的生成測試示例

import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {
  await page.goto('https://playwright.programming.tw/');
  await page.getByRole('link', { name: 'Get started' }).click();
  await expect(page.getByLabel('Breadcrumbs').getByRole('list')).toContainText('Installation');
  await expect(page.getByLabel('Search')).toBeVisible();
  await page.getByLabel('Search').click();
  await page.getByPlaceholder('Search docs').fill('locator');
  await expect(page.getByPlaceholder('Search docs')).toHaveValue('locator');
});

新 API​

其他變更​

瀏覽器版本​

  • Chromium 120.0.6099.28
  • Mozilla Firefox 119.0
  • WebKit 17.4

此版本還針對以下穩定通道進行了測試

  • Google Chrome 119
  • Microsoft Edge 119

版本 1.39​

將自定義匹配器新增到你的 expect​

你可以透過提供自定義匹配器來擴充套件 Playwright 斷言。這些匹配器將可在 expect 物件上使用。

test.spec.ts
import { expect as baseExpect } from '@playwright/test';
export const expect = baseExpect.extend({
  async toHaveAmount(locator: Locator, expected: number, options?: { timeout?: number }) {
    // ... see documentation for how to write matchers.
  },
});

test('pass', async ({ page }) => {
  await expect(page.getByTestId('cart')).toHaveAmount(5);
});

檢視文件 獲取完整示例。

合併測試 fixture​

你現在可以從多個檔案或模組合併測試 fixture。

fixtures.ts
import { mergeTests } from '@playwright/test';
import { test as dbTest } from 'database-test-utils';
import { test as a11yTest } from 'a11y-test-utils';

export const test = mergeTests(dbTest, a11yTest);
test.spec.ts
import { test } from './fixtures';

test('passes', async ({ database, page, a11y }) => {
  // use database and a11y fixtures.
});

合併自定義 expect 匹配器​

你現在可以從多個檔案或模組合併自定義 expect 匹配器。

fixtures.ts
import { mergeTests, mergeExpects } from '@playwright/test';
import { test as dbTest, expect as dbExpect } from 'database-test-utils';
import { test as a11yTest, expect as a11yExpect } from 'a11y-test-utils';

export const test = mergeTests(dbTest, a11yTest);
export const expect = mergeExpects(dbExpect, a11yExpect);
test.spec.ts
import { test, expect } from './fixtures';

test('passes', async ({ page, database }) => {
  await expect(database).toHaveDatabaseUser('admin');
  await expect(page).toPassA11yAudit();
});

隱藏實現細節：裝箱測試步驟​

你可以將 test.step() 標記為“裝箱 (boxed)”，這樣內部的錯誤會指向步驟呼叫的位置。 

async function login(page) {
  await test.step('login', async () => {
    // ...
  }, { box: true });  // Note the "box" option here.
}
Error: Timed out 5000ms waiting for expect(locator).toBeVisible()
  ... error details omitted ...

  14 |   await page.goto('https://github.com/login');
> 15 |   await login(page);
     |         ^
  16 | });

檢視 test.step() 文件獲取完整示例。

新 API​

瀏覽器版本​

  • Chromium 119.0.6045.9
  • Mozilla Firefox 118.0.1
  • WebKit 17.4

此版本還針對以下穩定通道進行了測試

  • Google Chrome 118
  • Microsoft Edge 118

版本 1.38​

UI 模式更新​

Playwright UI Mode
  1. 縮放時間範圍。
  2. 網路面板重新設計。

新 API​

棄用​

破壞性變更：Playwright 不再自動下載瀏覽器​

注意：如果你正在使用 @playwright/test 包，此更改不會影響你。

Playwright 建議使用 @playwright/test 包，並透過 npx playwright install 命令下載瀏覽器。如果你遵循此建議，對你而言沒有任何改變。

然而，在 v1.38 之前，安裝 playwright 包（而不是 @playwright/test）會自動下載瀏覽器。現在情況已不再如此，我們建議透過 npx playwright install 命令顯式下載瀏覽器。

v1.37 及更早版本

playwright 包在 npm install 期間下載瀏覽器，而 @playwright/test 則沒有。

v1.38 及更高版本

playwright 和 @playwright/test 包在 npm install 期間都不會下載瀏覽器。

推薦遷移

在 npm install 後執行 npx playwright install 以下載瀏覽器。例如，在你的 CI 配置中： 

- run: npm ci
- run: npx playwright install --with-deps

另一種遷移選項 - 不推薦

將 @playwright/browser-chromium、@playwright/browser-firefox 和 @playwright/browser-webkit 作為依賴項新增。這些包在 npm install 期間下載相應的瀏覽器。確保所有 playwright 包的版本保持同步。 

// package.json
{
  "devDependencies": {
    "playwright": "1.38.0",
    "@playwright/browser-chromium": "1.38.0",
    "@playwright/browser-firefox": "1.38.0",
    "@playwright/browser-webkit": "1.38.0"
  }
}

瀏覽器版本​

  • Chromium 117.0.5938.62
  • Mozilla Firefox 117.0
  • WebKit 17.0

此版本還針對以下穩定通道進行了測試

  • Google Chrome 116
  • Microsoft Edge 116

版本 1.37​

新的 npx playwright merge-reports 工具​

如果你在多個分片上執行測試，你現在可以使用新的 merge-reports CLI 工具將所有報告合併為單個 HTML 報告（或任何其他報告）。

使用 merge-reports 工具需要執行以下步驟：

  1. 在 CI 上執行時，向配置新增一個新的“blob”報告器。

    playwright.config.ts
    export default defineConfig({
      testDir: './tests',
      reporter: process.env.CI ? 'blob' : 'html',
    });

    “blob”報告器將生成包含測試執行所有資訊的 “.zip” 檔案。

  2. 將所有“blob”報告複製到單個共享位置並執行 npx playwright merge-reports。 

npx playwright merge-reports --reporter html ./all-blob-reports

在 我們的文件 中閱讀更多內容。

📚 Debian 12 Bookworm 支援​

Playwright 現在支援 Debian 12 Bookworm 上的 x86_64 和 arm64 的 Chromium、Firefox 和 WebKit。如果您遇到任何問題，請告訴我們！

Linux 支援如下所示

Ubuntu 20.04Ubuntu 22.04Debian 11Debian 12
Chromium✅✅✅✅
WebKit✅✅✅✅
Firefox✅✅✅✅

UI 模式更新​

  • UI 模式現在尊重專案依賴項。你可以透過在專案列表中勾選/取消勾選來控制要尊重的依賴項。
  • 測試中的控制檯日誌現在顯示在控制檯標籤頁中。

瀏覽器版本​

  • Chromium 116.0.5845.82
  • Mozilla Firefox 115.0
  • WebKit 17.0

此版本還針對以下穩定通道進行了測試

  • Google Chrome 115
  • Microsoft Edge 115

版本 1.36​

🏝️ 夏季維護版本。

瀏覽器版本​

  • Chromium 115.0.5790.75
  • Mozilla Firefox 115.0
  • WebKit 17.0

此版本還針對以下穩定通道進行了測試

  • Google Chrome 114
  • Microsoft Edge 114

版本 1.35​

亮點​

  • UI 模式現在可以透過新的“Show trace viewer”按鈕在 VSCode Playwright 擴充套件中提供。 Playwright UI Mode

  • UI 模式和 Trace Viewer 標記了使用 page.route() 和 browserContext.route() 處理程式處理的網路請求，以及透過 API 測試 發出的請求。 Trace Viewer

  • page.screenshot()、locator.screenshot()、expect(page).toHaveScreenshot() 和 expect(locator).toHaveScreenshot() 中新增 maskColor 選項，用於更改預設遮罩顏色。 

    await page.goto('https://playwright.programming.tw');
    await expect(page).toHaveScreenshot({
      mask: [page.locator('img')],
      maskColor: '#00FF00', // green
    });

  • 新的 `uninstall` CLI 命令用於解除安裝瀏覽器二進位制檔案。

    $ npx playwright uninstall # remove browsers installed by this installation
    $ npx playwright uninstall --all # remove all ever-install Playwright browsers

  • UI 模式和 Trace Viewer 現在都可以作為瀏覽器標籤頁開啟。 

    $ npx playwright test --ui-port 0 # open UI mode in a tab on a random port
    $ npx playwright show-trace --port 0 # open trace viewer in tab on a random port

⚠️ 破壞性變更​

  • playwright-core 二進位制檔案已從 playwright 重新命名為 playwright-core。因此，如果你使用 playwright-core CLI，請確保更新名稱。 

    $ npx playwright-core install # the new way to install browsers when using playwright-core

    此更改不影響 @playwright/test 和 playwright 包使用者。

瀏覽器版本​

  • Chromium 115.0.5790.13
  • Mozilla Firefox 113.0
  • WebKit 16.4

此版本還針對以下穩定通道進行了測試

  • Google Chrome 114
  • Microsoft Edge 114

版本 1.34​

亮點​

  • UI 模式現在顯示步驟、fixture 和附件。 UI Mode attachments

  • 新增屬性 testProject.teardown 以指定需要在本測試及所有依賴專案完成後執行的專案。銷燬 (Teardown) 有助於清理該專案獲取的任何資源。

    一個常見的模式是帶有相應 teardown 的 setup 依賴項。

    playwright.config.ts
    import { defineConfig } from '@playwright/test';

    export default defineConfig({
      projects: [
        {
          name: 'setup',
          testMatch: /global.setup\.ts/,
          teardown: 'teardown',
        },
        {
          name: 'teardown',
          testMatch: /global.teardown\.ts/,
        },
        {
          name: 'chromium',
          use: devices['Desktop Chrome'],
          dependencies: ['setup'],
        },
        {
          name: 'firefox',
          use: devices['Desktop Firefox'],
          dependencies: ['setup'],
        },
        {
          name: 'webkit',
          use: devices['Desktop Safari'],
          dependencies: ['setup'],
        },
      ],
    });

  • 新方法 expect.configure，用於建立具有自己預設值（如 timeout 和 soft）的預配置 expect 例項。 

    const slowExpect = expect.configure({ timeout: 10000 });
    await slowExpect(locator).toHaveText('Submit');

    // Always do soft assertions.
    const softExpect = expect.configure({ soft: true });

  • testConfig.webServer 中新增 stderr 和 stdout 選項，用於配置輸出處理。

    playwright.config.ts
    import { defineConfig } from '@playwright/test';

    export default defineConfig({
      // Run your local dev server before starting the tests
      webServer: {
        command: 'npm run start',
        url: 'http://127.0.0.1:3000',
        reuseExistingServer: !process.env.CI,
        stdout: 'pipe',
        stderr: 'pipe',
      },
    });

  • 新方法 locator.and() 用於建立同時匹配兩個定位器的定位器。 

    const button = page.getByRole('button').and(page.getByTitle('Subscribe'));

  • 新增事件 browserContext.on('console') 和 browserContext.on('dialog')，以訂閱給定瀏覽器上下文中任何頁面的任何對話方塊和控制檯訊息。使用新方法 consoleMessage.page() 和 dialog.page() 定位事件源。

⚠️ 破壞性變更​

  • 如果你同時安裝了 playwright 和 @playwright/test，npx playwright test 將不再工作。不需要同時安裝兩者，因為你可以始終直接從 @playwright/test 匯入瀏覽器自動化 API。

    automation.ts
    import { chromium, firefox, webkit } from '@playwright/test';
    /* ... */

  • Node.js 14 自 2023 年 4 月 30 日 達到生命週期終點 後，不再受支援。

瀏覽器版本​

  • Chromium 114.0.5735.26
  • Mozilla Firefox 113.0
  • WebKit 16.4

此版本還針對以下穩定通道進行了測試

  • Google Chrome 113
  • Microsoft Edge 113

版本 1.33​

定位器更新​

  • 使用 locator.or() 建立匹配兩個定位器中任一者的定位器。考慮一種場景，你想點選“新郵件”按鈕，但有時會顯示安全設定對話方塊。在這種情況下，你可以等待“新郵件”按鈕或對話方塊，並相應地採取行動。 

    const newEmail = page.getByRole('button', { name: 'New email' });
    const dialog = page.getByText('Confirm security settings');
    await expect(newEmail.or(dialog)).toBeVisible();
    if (await dialog.isVisible())
      await page.getByRole('button', { name: 'Dismiss' }).click();
    await newEmail.click();

  • 在 locator.filter() 中使用新選項 hasNot 和 hasNotText 來查詢不匹配某些條件的元素。 

    const rowLocator = page.locator('tr');
    await rowLocator
        .filter({ hasNotText: 'text in column 1' })
        .filter({ hasNot: page.getByRole('button', { name: 'column 2 button' }) })
        .screenshot();

  • 使用新的 Web 優先斷言 expect(locator).toBeAttached() 來確保元素存在於頁面的 DOM 中。不要將其與確保元素既已附加又可見的 expect(locator).toBeVisible() 混淆。

新 API​

⚠️ 重大變更​

  • mcr.microsoft.com/playwright:v1.33.0 現在提供基於 Ubuntu Jammy 的 Playwright 映象。要使用基於 focal 的映象，請改用 mcr.microsoft.com/playwright:v1.33.0-focal。

瀏覽器版本​

  • Chromium 113.0.5672.53
  • Mozilla Firefox 112.0
  • WebKit 16.4

此版本還針對以下穩定通道進行了測試

  • Google Chrome 112
  • Microsoft Edge 112

版本 1.32​

引入 UI 模式（預覽版）​

新 UI 模式 讓你探索、執行和除錯測試。內建 watch 模式。 Playwright UI Mode

使用新標誌 --ui 開啟。 

npx playwright test --ui

新 API​

⚠️ 元件測試中的破壞性變更​

注意：僅元件測試，不影響端到端測試。

  • @playwright/experimental-ct-react 現在僅支援 React 18。
  • 如果你正在執行 React 16 或 17 的元件測試，請將 @playwright/experimental-ct-react 替換為 @playwright/experimental-ct-react17。

瀏覽器版本​

  • Chromium 112.0.5615.29
  • Mozilla Firefox 111.0
  • WebKit 16.4

此版本還針對以下穩定通道進行了測試

  • Google Chrome 111
  • Microsoft Edge 111

版本 1.31​

新 API​

  • 新屬性 testProject.dependencies 用於配置專案之間的依賴關係。

    使用依賴項允許全域性設定生成跟蹤和其他製品，在測試報告中檢視設定步驟等。

    playwright.config.ts
    import { defineConfig } from '@playwright/test';

    export default defineConfig({
      projects: [
        {
          name: 'setup',
          testMatch: /global.setup\.ts/,
        },
        {
          name: 'chromium',
          use: devices['Desktop Chrome'],
          dependencies: ['setup'],
        },
        {
          name: 'firefox',
          use: devices['Desktop Firefox'],
          dependencies: ['setup'],
        },
        {
          name: 'webkit',
          use: devices['Desktop Safari'],
          dependencies: ['setup'],
        },
      ],
    });

  • 新斷言 expect(locator).toBeInViewport() 確保定位器指向根據 Intersection Observer API 與視口相交的元素。 

    const button = page.getByRole('button');

    // Make sure at least some part of element intersects viewport.
    await expect(button).toBeInViewport();

    // Make sure element is fully outside of viewport.
    await expect(button).not.toBeInViewport();

    // Make sure that at least half of the element intersects viewport.
    await expect(button).toBeInViewport({ ratio: 0.5 });

雜項​

  • 跟蹤檢視器中的 DOM 快照現在可以在單獨的視窗中開啟。
  • 用於 playwright.config 的新方法 defineConfig。
  • 方法 route.fetch() 的新選項 maxRedirects。
  • Playwright 現在支援 Debian 11 arm64。
  • 官方 Docker 映象 現在包含 Node 18 而不是 Node 16。

⚠️ 元件測試中的破壞性變更​

注意：僅元件測試，不影響端到端測試。

元件測試 的 playwright-ct.config 配置檔案現在需要呼叫 defineConfig。 

// Before

import { type PlaywrightTestConfig, devices } from '@playwright/experimental-ct-react';
const config: PlaywrightTestConfig = {
  // ... config goes here ...
};
export default config;

將 config 變數定義替換為 defineConfig 呼叫。 

// After

import { defineConfig, devices } from '@playwright/experimental-ct-react';
export default defineConfig({
  // ... config goes here ...
});

瀏覽器版本​

  • Chromium 111.0.5563.19
  • Mozilla Firefox 109.0
  • WebKit 16.4

此版本還針對以下穩定通道進行了測試

  • Google Chrome 110
  • Microsoft Edge 110

版本 1.30​

瀏覽器版本​

  • Chromium 110.0.5481.38
  • Mozilla Firefox 108.0.2
  • WebKit 16.4

此版本還針對以下穩定通道進行了測試

  • Google Chrome 109
  • Microsoft Edge 109

版本 1.29​

新 API​

  • 新方法 route.fetch() 和 route.fulfill() 的新選項 json。 

    await page.route('**/api/settings', async route => {
      // Fetch original settings.
      const response = await route.fetch();

      // Force settings theme to a predefined value.
      const json = await response.json();
      json.theme = 'Solorized';

      // Fulfill with modified data.
      await route.fulfill({ json });
    });

  • 新方法 locator.all() 用於迭代所有匹配的元素。 

    // Check all checkboxes!
    const checkboxes = page.getByRole('checkbox');
    for (const checkbox of await checkboxes.all())
      await checkbox.check();

  • locator.selectOption() 現在按值或標籤進行匹配。 

    <select multiple>
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
    </select>
    await element.selectOption('Red');

  • 重試程式碼塊直到所有斷言透過。 

    await expect(async () => {
      const response = await page.request.get('https://api.example.com');
      await expect(response).toBeOK();
    }).toPass();

    在 我們的文件 中閱讀更多內容。

  • 自動在測試失敗時捕獲全頁截圖。

    playwright.config.ts
    import { defineConfig } from '@playwright/test';
    export default defineConfig({
      use: {
        screenshot: {
          mode: 'only-on-failure',
          fullPage: true,
        }
      }
    });

雜項​

瀏覽器版本​

  • Chromium 109.0.5414.46
  • Mozilla Firefox 107.0
  • WebKit 16.4

此版本還針對以下穩定通道進行了測試

  • Google Chrome 108
  • Microsoft Edge 108

版本 1.28​

Playwright 工具​

  • VSCode 中的游標處錄製：你可以執行測試，將游標定位在測試末尾並繼續生成測試。
New VSCode Extension
  • VSCode 中的即時定位器：你可以在 VSCode 中懸停並編輯定位器，使其在開啟的瀏覽器中高亮顯示。
  • **Codegen 中的即時定位器。** 使用“探索”工具為頁面上的任何元素生成定位器。
Locator Explorer
  • Codegen 和 Trace Viewer 暗黑主題：自動從作業系統設定中獲取。
Dark Theme

測試執行器​

新 API​

瀏覽器版本​

  • Chromium 108.0.5359.29
  • Mozilla Firefox 106.0
  • WebKit 16.4

此版本還針對以下穩定通道進行了測試

  • Google Chrome 107
  • Microsoft Edge 107

版本 1.27​

定位器​

有了這些新的 API，編寫定位器變得輕而易舉。

await page.getByLabel('User Name').fill('John');

await page.getByLabel('Password').fill('secret-password');

await page.getByRole('button', { name: 'Sign in' }).click();

await expect(page.getByText('Welcome, John!')).toBeVisible();

所有相同的方法也適用於 Locator、FrameLocator 和 Frame 類。

其他亮點​

  • playwright.config.ts 中的 workers 選項現在接受百分比字串以使用部分可用 CPU。你也可以在命令列中傳遞它。 

    npx playwright test --workers=20%

  • HTML 報告器的新選項 host 和 port。 

    import { defineConfig } from '@playwright/test';

    export default defineConfig({
      reporter: [['html', { host: 'localhost', port: '9223' }]],
    });

  • 測試報告器可以使用新欄位 FullConfig.configFile，指定配置檔案路徑（如果有）。

  • 正如 v1.25 中宣佈的，Ubuntu 18 從 2022 年 12 月起將不再受支援。此外，從下一個 Playwright 版本開始，Ubuntu 18 上將不再有 WebKit 更新。

行為變更​

  • expect(locator).toHaveAttribute() 帶有空值時不再匹配缺失的屬性。例如，當 button 沒有 disabled 屬性時，以下片段將成功。 

    await expect(page.getByRole('button')).toHaveAttribute('disabled', '');

  • 命令列選項 --grep 和 --grep-invert 之前錯誤地忽略了配置中指定的 grep 和 grepInvert 選項。現在它們被一起應用。

瀏覽器版本​

  • Chromium 107.0.5304.18
  • Mozilla Firefox 105.0.1
  • WebKit 16.0

此版本還針對以下穩定通道進行了測試

  • Google Chrome 106
  • Microsoft Edge 106

版本 1.26​

斷言​

其他亮點​

  • apiRequestContext.get() 等方法的新選項 maxRedirects，以限制重定向計數。
  • 新的命令列標誌 --pass-with-no-tests，允許在未找到任何檔案時透過測試套件。
  • 新的命令列標誌 --ignore-snapshots，用於跳過快照斷言，例如 expect(value).toMatchSnapshot() 和 expect(page).toHaveScreenshot()。

行為變更​

許多 Playwright API 已經支援 waitUntil: 'domcontentloaded' 選項。例如

await page.goto('https://playwright.programming.tw', {
  waitUntil: 'domcontentloaded',
});

在 1.26 之前，這將等待所有 iframe 觸發 DOMContentLoaded 事件。

為了符合 Web 標準，'domcontentloaded' 值僅等待目標框架觸發 'DOMContentLoaded' 事件。如果需要等待所有 iframe 載入，請使用 waitUntil: 'load'。

瀏覽器版本​

  • Chromium 106.0.5249.30
  • Mozilla Firefox 104.0
  • WebKit 16.0

此版本還針對以下穩定通道進行了測試

  • Google Chrome 105
  • Microsoft Edge 105

版本 1.25​

VSCode 擴充套件​

  • 即時觀看測試執行並保持 DevTools 開啟。
  • 選擇器拾取。
  • 根據當前頁面狀態錄製新測試。
vscode extension screenshot

測試執行器​

  • test.step() 現在返回步驟函式的執行結果

    test('should work', async ({ page }) => {
      const pageTitle = await test.step('get title', async () => {
        await page.goto('https://playwright.programming.tw');
        return await page.title();
      });
      console.log(pageTitle);
    });

  • 添加了 test.describe.fixme()。

  • 新增 'interrupted' 測試狀態。

  • 透過 CLI 標誌啟用追蹤：npx playwright test --trace=on。

公告​

  • 🎁 我們現在提供 Ubuntu 22.04 Jammy Jellyfish Docker 映象：mcr.microsoft.com/playwright:v1.34.0-jammy。
  • 🪦 這是最後一個支援 macOS 10.15 的版本（自 1.21 起已棄用）。
  • 🪦 這是最後一個支援 Node.js 12 的版本，我們建議升級到 Node.js LTS (16)。
  • ⚠️ Ubuntu 18 現已棄用，從 2022 年 12 月起將不再支援。

瀏覽器版本​

  • Chromium 105.0.5195.19
  • Mozilla Firefox 103.0
  • WebKit 16.0

此版本還針對以下穩定通道進行了測試

  • Google Chrome 104
  • Microsoft Edge 104

版本 1.24​

🌍 playwright.config.ts 中的多個 Web 伺服器​

透過傳遞配置陣列來啟動多個 Web 伺服器、資料庫或其他程序

playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
  webServer: [
    {
      command: 'npm run start',
      url: 'http://127.0.0.1:3000',
      timeout: 120 * 1000,
      reuseExistingServer: !process.env.CI,
    },
    {
      command: 'npm run backend',
      url: 'http://127.0.0.1:3333',
      timeout: 120 * 1000,
      reuseExistingServer: !process.env.CI,
    }
  ],
  use: {
    baseURL: 'https://:3000/',
  },
});

🐂 Debian 11 Bullseye 支援​

Playwright 現在支援 x86_64 上的 Debian 11 Bullseye，適用於 Chromium、Firefox 和 WebKit。如果您遇到任何問題，請告訴我們！

Linux 支援如下所示

| | Ubuntu 20.04 | Ubuntu 22.04 | Debian 11 | :--- | :---: | :---: | :---: | | Chromium | ✅ | ✅ | ✅ | | WebKit | ✅ | ✅ | ✅ | | Firefox | ✅ | ✅ | ✅ |

🕵️ 匿名 Describe​

現在可以呼叫 test.describe() 來建立沒有標題的測試套件。這對於使用 test.use() 為一組測試設定通用選項非常有用。

test.describe(() => {
  test.use({ colorScheme: 'dark' });

  test('one', async ({ page }) => {
    // ...
  });

  test('two', async ({ page }) => {
    // ...
  });
});

🧩 元件測試更新​

Playwright 1.24 元件測試引入了 beforeMount 和 afterMount 鉤子。使用它們來配置測試所需的應用程式。

例如，這可以用於在 Vue.js 中設定 App 路由

src/component.spec.ts
import { test } from '@playwright/experimental-ct-vue';
import { Component } from './mycomponent';

test('should work', async ({ mount }) => {
  const component = await mount(Component, {
    hooksConfig: {
      /* anything to configure your app */
    }
  });
});
playwright/index.ts
import { router } from '../router';
import { beforeMount } from '@playwright/experimental-ct-vue/hooks';

beforeMount(async ({ app, hooksConfig }) => {
  app.use(router);
});

Next.js 中的類似配置如下所示

src/component.spec.jsx
import { test } from '@playwright/experimental-ct-react';
import { Component } from './mycomponent';

test('should work', async ({ mount }) => {
  const component = await mount(<Component></Component>, {
    // Pass mock value from test into `beforeMount`.
    hooksConfig: {
      router: {
        query: { page: 1, per_page: 10 },
        asPath: '/posts'
      }
    }
  });
});
playwright/index.js
import router from 'next/router';
import { beforeMount } from '@playwright/experimental-ct-react/hooks';

beforeMount(async ({ hooksConfig }) => {
  // Before mount, redefine useRouter to return mock value from test.
  router.useRouter = () => hooksConfig.router;
});

版本 1.23​

網路重放​

現在您可以將網路流量錄製到 HAR 檔案中，並在測試中重新使用此流量。

將網路錄製到 HAR 檔案中

npx playwright open --save-har=github.har.zip https://github.com/microsoft

或者，您可以以程式設計方式錄製 HAR

const context = await browser.newContext({
  recordHar: { path: 'github.har.zip' }
});
// ... do stuff ...
await context.close();

使用新方法 page.routeFromHAR() 或 browserContext.routeFromHAR() 從 HAR 檔案提供匹配的響應

await context.routeFromHAR('github.har.zip');

在 我們的文件 中瞭解更多資訊。

高階路由​

現在可以使用 route.fallback() 將路由委託給其他處理程式。

請看以下示例

// Remove a header from all requests.
test.beforeEach(async ({ page }) => {
  await page.route('**/*', async route => {
    const headers = await route.request().allHeaders();
    delete headers['if-none-match'];
    await route.fallback({ headers });
  });
});

test('should work', async ({ page }) => {
  await page.route('**/*', async route => {
    if (route.request().resourceType() === 'image')
      await route.abort();
    else
      await route.fallback();
  });
});

請注意，新方法 page.routeFromHAR() 和 browserContext.routeFromHAR() 也參與路由並可以被委託。

Web-First 斷言更新​

元件測試更新​

瞭解更多關於 使用 Playwright 進行元件測試 的資訊。

雜項​

  • 如果有一個服務工作執行緒妨礙了您，您現在可以使用新的上下文選項 serviceWorkers 輕鬆停用它

    playwright.config.ts
    export default {
      use: {
        serviceWorkers: 'block',
      }
    };

  • 為 recordHar 上下文選項使用 .zip 路徑會自動壓縮生成的 HAR

    const context = await browser.newContext({
      recordHar: {
        path: 'github.har.zip',
      }
    });

  • 如果您打算手動編輯 HAR，請考慮使用 "minimal" HAR 錄製模式，該模式僅錄製重放所需的資訊

    const context = await browser.newContext({
      recordHar: {
        path: 'github.har',
        mode: 'minimal',
      }
    });

  • Playwright 現在可以在 Ubuntu 22 amd64 和 Ubuntu 22 arm64 上執行。我們還發布了新的 Docker 映象 mcr.microsoft.com/playwright:v1.34.0-jammy。

⚠️ 重大變更 ⚠️​

如果對指定 URL 的請求具有以下任一 HTTP 狀態碼，則 WebServer 現在被視為“就緒”

  • 200-299
  • 300-399 (新增)
  • 400, 401, 402, 403 (新增)

版本 1.22​

亮點​

  • 元件測試 (預覽版)

    Playwright Test 現在可以測試你的 React 或 Vue.js 元件。你可以在真實瀏覽器中執行元件的同時，使用 Playwright Test 的所有功能（如並行化、模擬和除錯）。

    典型的元件測試如下所示

    App.spec.tsx
    import { test, expect } from '@playwright/experimental-ct-react';
    import App from './App';

    // Let's test component in a dark scheme!
    test.use({ colorScheme: 'dark' });

    test('should render', async ({ mount }) => {
      const component = await mount(<App></App>);

      // As with any Playwright test, assert locator text.
      await expect(component).toContainText('React');
      // Or do a screenshot 🚀
      await expect(component).toHaveScreenshot();
      // Or use any Playwright method
      await component.click();
    });

    在 我們的文件 中瞭解更多資訊。

  • 角色選擇器，允許按其 ARIA 角色、ARIA 屬性和 可訪問名稱選擇元素。

    // Click a button with accessible name "log in"
    await page.locator('role=button[name="log in"]').click();

    在 我們的文件 中瞭解更多資訊。

  • 新的 locator.filter() API，用於過濾現有的定位器

    const buttons = page.locator('role=button');
    // ...
    const submitButton = buttons.filter({ hasText: 'Submit' });
    await submitButton.click();

  • 新的 Web 優先斷言 expect(page).toHaveScreenshot() 和 expect(locator).toHaveScreenshot()，它們等待螢幕截圖穩定並增強測試的可靠性。

    新的斷言具有螢幕截圖特定的預設設定，例如

    • 停用動畫
    • 使用 CSS 縮放選項
    await page.goto('https://playwright.programming.tw');
    await expect(page).toHaveScreenshot();

    新的 expect(page).toHaveScreenshot() 將螢幕截圖儲存在與 expect(value).toMatchSnapshot() 相同的位置。

版本 1.21​

亮點​

  • 新的角色選擇器，允許按其 ARIA 角色、ARIA 屬性和 可訪問名稱選擇元素。

    // Click a button with accessible name "log in"
    await page.locator('role=button[name="log in"]').click();

    在 我們的文件 中瞭解更多資訊。

  • page.screenshot() 中新增 scale 選項，用於生成更小尺寸的截圖。

  • page.screenshot() 中新增 caret 選項，用於控制文字游標。預設為 "hide"。

  • 新方法 expect.poll，用於等待任意條件

    // Poll the method until it returns an expected result.
    await expect.poll(async () => {
      const response = await page.request.get('https://api.example.com');
      return response.status();
    }).toBe(200);

    expect.poll 支援大多數同步匹配器，如 .toBe(), .toContain() 等。在 我們的文件 中瞭解更多資訊。

行為變更​

  • 執行 TypeScript 測試時，ESM 支援現已預設啟用。不再需要 PLAYWRIGHT_EXPERIMENTAL_TS_ESM 環境變數。
  • mcr.microsoft.com/playwright Docker 映象不再包含 Python。請使用 mcr.microsoft.com/playwright/python 作為預裝了 Python 的 Playwright 就緒 Docker 映象。
  • Playwright 現在透過 locator.setInputFiles() API 支援大檔案上傳（數百 MB）。

瀏覽器版本​

  • Chromium 101.0.4951.26
  • Mozilla Firefox 98.0.2
  • WebKit 15.4

此版本還針對以下穩定通道進行了測試

  • Google Chrome 100
  • Microsoft Edge 100

版本 1.20​

亮點​

  • page.screenshot(), locator.screenshot() 和 elementHandle.screenshot() 方法的新選項

    • animations: "disabled" 選項將所有 CSS 動畫和過渡重置為一致狀態
    • 選項 mask: Locator[] 遮罩給定元素，用粉紅色 #FF00FF 方框覆蓋它們。

  • expect().toMatchSnapshot() 現在支援匿名快照：當缺少快照名稱時，Playwright Test 將自動生成一個

    expect('Web is Awesome <3').toMatchSnapshot();

  • 新增 maxDiffPixels 和 maxDiffPixelRatio 選項，用於透過 expect().toMatchSnapshot() 進行細粒度的螢幕截圖比較

    expect(await page.screenshot()).toMatchSnapshot({
      maxDiffPixels: 27, // allow no more than 27 different pixels.
    });

    在 testConfig.expect 中一次性指定 maxDiffPixels 或 maxDiffPixelRatio 最為方便。

  • Playwright Test 現在添加了 testConfig.fullyParallel 模式。預設情況下，Playwright Test 在檔案間進行並行化。在完全並行模式下，單個檔案內的測試也會並行執行。你也可以使用 --fully-parallel 命令列標誌。

    playwright.config.ts
    export default {
      fullyParallel: true,
    };

  • testProject.grep 和 testProject.grepInvert 現在可按專案進行配置。例如，你現在可以使用 grep 配置冒煙測試專案

    playwright.config.ts
    export default {
      projects: [
        {
          name: 'smoke tests',
          grep: /@smoke/,
        },
      ],
    };

  • Trace Viewer 現在顯示 API 測試請求。

  • locator.highlight() 視覺化地突出顯示元素，便於除錯。

公告​

  • 我們現在釋出了一個指定的 Python Docker 映象 mcr.microsoft.com/playwright/python。如果你使用 Python，請切換到該映象。這是最後一個在我們的 JavaScript mcr.microsoft.com/playwright Docker 映象中包含 Python 的版本。
  • v1.20 是 macOS 10.15 Catalina 接收 WebKit 更新的最後一個版本。請更新 macOS 以繼續使用最新最好的 WebKit！

瀏覽器版本​

  • Chromium 101.0.4921.0
  • Mozilla Firefox 97.0.1
  • WebKit 15.4

此版本還針對以下穩定通道進行了測試

  • Google Chrome 99
  • Microsoft Edge 99

版本 1.19​

Playwright Test 更新​

  • Playwright Test v1.19 現在支援 軟斷言。失敗的軟斷言

    不會終止測試執行，但會將測試標記為失敗。

    // Make a few checks that will not stop the test when failed...
    await expect.soft(page.locator('#status')).toHaveText('Success');
    await expect.soft(page.locator('#eta')).toHaveText('1 day');

    // ... and continue the test to check more things.
    await page.locator('#next-page').click();
    await expect.soft(page.locator('#title')).toHaveText('Make another order');

    在 我們的文件 中瞭解更多資訊

  • 你現在可以為 expect 和 expect.soft 函式指定一個 自定義斷言訊息 作為第二個引數，例如

    await expect(page.locator('text=Name'), 'should be logged in').toBeVisible();

    錯誤資訊將如下所示

        Error: should be logged in

        Call log:
          - expect.toBeVisible with timeout 5000ms
          - waiting for "getByText('Name')"


          2 |
          3 | test('example test', async({ page }) => {
        > 4 |   await expect(page.locator('text=Name'), 'should be logged in').toBeVisible();
            |                                                                  ^
          5 | });
          6 |

    在 我們的文件 中瞭解更多資訊

  • 預設情況下，單個檔案中的測試按順序執行。如果你在一個檔案中有很多獨立的測試，現在可以使用 test.describe.configure() 並行執行它們。

其他更新​

Playwright Test 全域性設定中的潛在重大變更​

此更改不太可能影響你，如果你的測試繼續按預期執行，則無需採取任何操作。

我們注意到，在極少數情況下，要執行的測試集是透過環境變數在全域性設定中配置的。我們還注意到一些應用程式在全域性拆卸中對報告器的輸出進行後處理。如果你正在執行這兩者之一，請 瞭解更多

瀏覽器版本​

  • Chromium 100.0.4863.0
  • Mozilla Firefox 96.0.1
  • WebKit 15.4

此版本還針對以下穩定通道進行了測試

  • Google Chrome 98
  • Microsoft Edge 98

版本 1.18​

定位器改進​

測試 API 改進​

改進的 TypeScript 支援​

  1. Playwright Test 現在遵循 tsconfig.json 的 baseUrl 和 paths，因此你可以使用別名
  2. 有一個新的環境變數 PW_EXPERIMENTAL_TS_ESM，允許在你的 TS 程式碼中匯入 ESM 模組，而無需編譯步驟。匯入 esm 模組時不要忘記 .js 字尾。按如下方式執行測試
npm i --save-dev @playwright/test@1.18.0-rc1
PW_EXPERIMENTAL_TS_ESM=1 npx playwright test

建立 Playwright​

npm init playwright 命令現在可供普遍使用

# Run from your project's root directory
npm init playwright@latest
# Or create a new project
npm init playwright@latest new-project

這將建立一個 Playwright Test 配置檔案，可選擇新增示例、GitHub Action 工作流和第一個測試 example.spec.ts。

新 API 和變更​

重大變更：自定義配置選項​

自定義配置選項是使用不同值引數化專案的便捷方式。在 本指南 中瞭解更多資訊。

以前，透過 test.extend() 引入的任何固定裝置都可以在 testProject.use 配置部分中覆蓋。例如，

// WRONG: THIS SNIPPET DOES NOT WORK SINCE v1.18.

// fixtures.js
const test = base.extend({
  myParameter: 'default',
});

// playwright.config.js
module.exports = {
  use: {
    myParameter: 'value',
  },
};

在配置檔案中使固定裝置引數化的正確方法是在定義固定裝置時指定 option: true。例如，

// CORRECT: THIS SNIPPET WORKS SINCE v1.18.

// fixtures.js
const test = base.extend({
  // Fixtures marked as "option: true" will get a value specified in the config,
  // or fallback to the default value.
  myParameter: ['default', { option: true }],
});

// playwright.config.js
module.exports = {
  use: {
    myParameter: 'value',
  },
};

瀏覽器版本​

  • Chromium 99.0.4812.0
  • Mozilla Firefox 95.0
  • WebKit 15.4

此版本還針對以下穩定通道進行了測試

  • Google Chrome 97
  • Microsoft Edge 97

版本 1.17​

幀定位器​

Playwright 1.17 引入了 幀定位器 (frame locators) - 指向頁面上 iframe 的定位器。幀定位器捕獲檢索 iframe 所需的邏輯，然後在該 iframe 中定位元素。幀定位器預設是嚴格的，會等待 iframe 出現，並可用於 Web 優先斷言。

Graphics

幀定位器可以使用 page.frameLocator() 或 locator.frameLocator() 方法建立。

const locator = page.frameLocator('#my-iframe').locator('text=Submit');
await locator.click();

在 我們的文件 中瞭解更多資訊。

Trace Viewer 更新​

Playwright Trace Viewer 現在**線上可用**於 https://trace.playwright.dev！只需將您的 trace.zip 檔案拖放即可檢查其內容。

**注意**：trace 檔案不會上傳到任何地方；trace.playwright.dev 是一個漸進式 Web 應用程式，在本地處理 traces。

  • Playwright Test 跟蹤現在預設包含源（可以透過跟蹤選項關閉）
  • Trace Viewer 現在顯示測試名稱
  • 新的跟蹤元資料選項卡，包含瀏覽器詳細資訊
  • 快照現在有 URL 欄
image

HTML 報告更新​

  • HTML 報告現在支援動態過濾
  • 報告現在是一個單個靜態 HTML 檔案，可以透過電子郵件或作為 slack 附件傳送。
image

Ubuntu ARM64 支援 + 更多​

  • Playwright 現在支援 Ubuntu 20.04 ARM64。您現在可以在 Apple M1 和 Raspberry Pi 上 Docker 內執行 Playwright 測試。

  • 您現在可以使用 Playwright 在 Linux 上安裝穩定版 Edge

    npx playwright install msedge

新 API​

版本 1.16​

🎭 Playwright Test​

API 測試​

Playwright 1.16 引入了新的 API 測試，讓你直接從 Node.js 向伺服器傳送請求！現在你可以

  • 測試您的伺服器 API
  • 在測試中訪問 Web 應用程式之前準備伺服器端狀態
  • 在瀏覽器中執行一些操作後驗證伺服器端後置條件

要代表 Playwright 的頁面執行請求，請使用 新的 page.request API

import { test, expect } from '@playwright/test';

test('context fetch', async ({ page }) => {
  // Do a GET request on behalf of page
  const response = await page.request.get('http://example.com/foo.json');
  // ...
});

要從 node.js 向 API 端點執行獨立請求，請使用 新的 request 固定裝置

import { test, expect } from '@playwright/test';

test('context fetch', async ({ request }) => {
  // Do a GET request on behalf of page
  const response = await request.get('http://example.com/foo.json');
  // ...
});

在我們的 API 測試指南 中瞭解更多資訊。

響應攔截​

現在可以透過結合 API 測試 和 請求攔截 來進行響應攔截。

例如，我們可以模糊頁面上的所有圖片

import { test, expect } from '@playwright/test';
import jimp from 'jimp'; // image processing library

test('response interception', async ({ page }) => {
  await page.route('**/*.jpeg', async route => {
    const response = await page._request.fetch(route.request());
    const image = await jimp.read(await response.body());
    await image.blur(5);
    await route.fulfill({
      response,
      body: await image.getBufferAsync('image/jpeg'),
    });
  });
  const response = await page.goto('https://playwright.programming.tw');
  expect(response.status()).toBe(200);
});

瞭解更多關於 響應攔截 的資訊。

新的 HTML 報告器​

使用 --reporter=html 或 playwright.config.ts 檔案中的 reporter 條目來試用新的 HTML 報告器

$ npx playwright test --reporter=html

HTML 報告器擁有所有關於測試及其失敗的資訊，包括展示追蹤和圖片構件。

html reporter

瞭解更多關於 我們的報告器 的資訊。

🎭 Playwright 庫​

locator.waitFor​

等待定位器解析為具有給定狀態的單個元素。預設為 state: 'visible'。

在處理列表時特別方便

import { test, expect } from '@playwright/test';

test('context fetch', async ({ page }) => {
  const completeness = page.locator('text=Success');
  await completeness.waitFor();
  expect(await page.screenshot()).toMatchSnapshot('screen.png');
});

瞭解更多關於 locator.waitFor() 的資訊。

Docker 對 Arm64 的支援​

Playwright Docker 映象現在已釋出 Arm64 版本，因此可以在 Apple Silicon 上使用。

瞭解更多關於 Docker 整合 的資訊。

🎭 Playwright 跟蹤檢視器​

  • Trace Viewer 中的 Web 優先斷言
  • 使用 npx playwright show-trace 執行 Trace Viewer，並將追蹤檔案拖放到 Trace Viewer PWA 中
  • API 測試已整合到 Trace Viewer 中
  • 更好的操作目標視覺歸因

瞭解更多關於 Trace Viewer 的資訊。

瀏覽器版本​

  • Chromium 97.0.4666.0
  • Mozilla Firefox 93.0
  • WebKit 15.4

此版本的 Playwright 也針對以下穩定通道進行了測試

  • Google Chrome 94
  • Microsoft Edge 94

版本 1.15​

🎭 Playwright 庫​

🖱️ 滑鼠滾輪​

透過使用 mouse.wheel()，你現在可以垂直或水平滾動。

📜 新的 Headers API​

以前無法獲取響應的多個 header 值。現在這成為可能，並且提供了額外的輔助函式

🌈 強制顏色模擬​

現在可以透過在 browser.newContext() 中傳遞它或呼叫 page.emulateMedia() 來模擬 forced-colors CSS 媒體特性。

新 API​

🎭 Playwright Test​

🤝 test.parallel() 並行運行同一檔案中的測試​

test.describe.parallel('group', () => {
  test('runs in parallel 1', async ({ page }) => {
  });
  test('runs in parallel 2', async ({ page }) => {
  });
});

預設情況下，單個檔案中的測試按順序執行。如果你在一個檔案中有很多獨立的測試，現在可以使用 test.describe.parallel(title, callback) 並行執行它們。

🛠 新增 --debug CLI 標誌​

使用 npx playwright test --debug 將啟用 Playwright Inspector，以便你除錯測試。

瀏覽器版本​

  • Chromium 96.0.4641.0
  • Mozilla Firefox 92.0
  • WebKit 15.0

版本 1.14​

🎭 Playwright 庫​

⚡️ 新的“嚴格”模式​

選擇器歧義是自動化測試中的常見問題。“嚴格”模式確保您的選擇器指向單個元素，否則會丟擲錯誤。

在你的操作呼叫中傳入 strict: true 以啟用選擇器嚴格模式。

// This will throw if you have more than one button!
await page.click('button', { strict: true });

📍 新的 定位器 API​

Locator 表示頁面上的元素檢視。它捕獲了足以在任何給定時刻檢索元素的邏輯。

定位器 (Locator) 和元素控制代碼 (ElementHandle) 之間的區別在於，後者指向特定元素，而 定位器 捕獲如何檢索該元素的邏輯。

此外，定位器預設是“嚴格”的！

const locator = page.locator('button');
await locator.click();

在 文件 中瞭解更多資訊。

🧩 實驗性的 React 和 Vue 選擇器引擎​

React 和 Vue 選擇器允許按元件名稱和/或屬性值選擇元素。語法與 屬性選擇器非常相似，並支援所有屬性選擇器運算子。

await page.locator('_react=SubmitButton[enabled=true]').click();
await page.locator('_vue=submit-button[enabled=true]').click();

在 React 選擇器文件 和 Vue 選擇器文件 中瞭解更多資訊。

✨ 新的 nth 和 visible 選擇器引擎​

  • nth 選擇器引擎等同於 :nth-match 偽類，但可以與其他選擇器引擎組合使用。
  • visible 選擇器引擎等同於 :visible 偽類，但可以與其他選擇器引擎組合使用。
// select the first button among all buttons
await button.click('button >> nth=0');
// or if you are using locators, you can use first(), nth() and last()
await page.locator('button').first().click();

// click a visible button
await button.click('button >> visible=true');

🎭 Playwright Test​

✅ Web 優先斷言​

expect 現在支援許多新的 Web 優先斷言。

請看以下示例

await expect(page.locator('.status')).toHaveText('Submitted');

Playwright Test 將反覆測試帶有 .status 選擇器的節點，直到獲取到的節點包含 "Submitted" 文字。它會不斷地重新獲取節點並進行檢查，直到滿足條件或達到超時。你可以傳遞此超時值，或透過測試配置中的 testProject.expect 值一次性配置它。

預設情況下，不設定斷言的超時，因此它會一直等待，直到整個測試超時。

所有新斷言列表

⛓ 使用 describe.serial 的序列模式​

宣告一組應始終序列執行的測試。如果其中一個測試失敗，後續所有測試都將被跳過。組中的所有測試將一起重試。

test.describe.serial('group', () => {
  test('runs first', async ({ page }) => { /* ... */ });
  test('runs second', async ({ page }) => { /* ... */ });
});

在 文件 中瞭解更多資訊。

🐾 使用 test.step 的步驟 API​

使用 test.step() API 將長測試拆分為多個步驟

import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {
  await test.step('Log in', async () => {
    // ...
  });
  await test.step('news feed', async () => {
    // ...
  });
});

步驟資訊在報告器 API 中公開。

🌎 在執行測試前啟動 Web 伺服器​

要在測試期間啟動伺服器，請使用配置檔案中的 webServer 選項。伺服器將等待給定 URL 可用後再執行測試，並且建立上下文時，該 URL 將作為 baseURL 傳遞給 Playwright。

playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
  webServer: {
    command: 'npm run start', // command to launch
    url: 'http://127.0.0.1:3000', // url to await for
    timeout: 120 * 1000,
    reuseExistingServer: !process.env.CI,
  },
});

在 文件 中瞭解更多資訊。

瀏覽器版本​

  • Chromium 94.0.4595.0
  • Mozilla Firefox 91.0
  • WebKit 15.0

版本 1.13​

Playwright Test​

Playwright​

工具​

  • Playwright Trace Viewer 現在顯示引數、返回值和 console.log() 呼叫。
  • Playwright Inspector 可以生成 Playwright Test 測試。

新的和 overhauled 指南​

瀏覽器版本​

  • Chromium 93.0.4576.0
  • Mozilla Firefox 90.0
  • WebKit 14.2

新的 Playwright API​

版本 1.12​

⚡️ 引入 Playwright Test​

Playwright Test 是 Playwright 團隊從零開始構建的新測試執行器，專門用於滿足端到端測試需求

  • 跨所有瀏覽器執行測試。
  • 並行執行測試。
  • 享受即開即用的上下文隔離和合理的預設設定。
  • 在失敗時捕獲影片、截圖和其他構件。
  • 將你的頁面物件模型 (POM) 整合為可擴充套件的固定裝置。

安裝

npm i -D @playwright/test

簡單的測試 tests/foo.spec.ts

import { test, expect } from '@playwright/test';

test('basic test', async ({ page }) => {
  await page.goto('https://playwright.programming.tw/');
  const name = await page.innerText('.navbar__title');
  expect(name).toBe('Playwright');
});

執行中

npx playwright test

👉 在 Playwright Test 文件 中瞭解更多資訊。

🧟‍♂️ 引入 Playwright Trace Viewer​

Playwright Trace Viewer 是一個新的 GUI 工具，可幫助在指令碼執行後探索錄製的 Playwright 追蹤。Playwright 追蹤讓你能夠檢查

  • 每個 Playwright 動作之前和之後的頁面 DOM
  • 每個 Playwright 動作之前和之後的頁面渲染
  • 指令碼執行期間的瀏覽器網路

追蹤是使用新的 browserContext.tracing API 錄製的

const browser = await chromium.launch();
const context = await browser.newContext();

// Start tracing before creating / navigating a page.
await context.tracing.start({ screenshots: true, snapshots: true });

const page = await context.newPage();
await page.goto('https://playwright.programming.tw');

// Stop tracing and export it into a zip archive.
await context.tracing.stop({ path: 'trace.zip' });

跟蹤稍後使用 Playwright CLI 進行檢查

npx playwright show-trace trace.zip

這將開啟以下 GUI

image

👉 在 Trace Viewer 文件 中瞭解更多資訊。

瀏覽器版本​

  • Chromium 93.0.4530.0
  • Mozilla Firefox 89.0
  • WebKit 14.2

此版本的 Playwright 也針對以下穩定通道進行了測試

  • Google Chrome 91
  • Microsoft Edge 91

新 API​

版本 1.11​

🎥 新影片：Playwright：一個用於現代 Web 的新測試自動化框架（幻燈片）

  • 我們談論了 Playwright
  • 展示了幕後的工程工作
  • 使用新功能進行了現場演示 ✨
  • 特別感謝 applitools 舉辦活動並邀請我們！

瀏覽器版本​

  • Chromium 92.0.4498.0
  • Mozilla Firefox 89.0b6
  • WebKit 14.2

新 API​

版本 1.10​

捆綁的瀏覽器版本​

  • Chromium 90.0.4430.0
  • Mozilla Firefox 87.0b10
  • WebKit 14.2

此版本的 Playwright 也針對以下穩定通道進行了測試

  • Google Chrome 89
  • Microsoft Edge 89

新 API​

版本 1.9​

  • Playwright Inspector 是一個 用於編寫和除錯測試的新 GUI 工具。
    • 對 Playwright 指令碼進行逐行除錯，包括播放、暫停和單步執行。
    • 透過錄製使用者操作編寫新指令碼。
    • 透過懸停在元素上為指令碼生成元素選擇器。
    • 設定 PWDEBUG=1 環境變數以啟動 Inspector
  • 在有頭模式下使用 page.pause() 暫停指令碼執行。暫停頁面將啟動 Playwright Inspector 進行除錯。
  • 新的 has-text 偽類，用於 CSS 選擇器。:has-text("example") 匹配任何包含 "example" 的元素，可能在子元素或後代元素中。檢視 更多示例。
  • 頁面對話方塊現在在執行期間自動關閉，除非配置了針對 dialog 事件的監聽器。瞭解更多 相關資訊。
  • Playwright for Python 現已穩定，具有符合習慣的蛇形命名 API 和用於在 CI/CD 中執行測試的預構建 Docker 映象。

瀏覽器版本​

  • Chromium 90.0.4421.0
  • Mozilla Firefox 86.0b10
  • WebKit 14.1

新 API​

版本 1.8​

新 API​

瀏覽器版本​

  • Chromium 90.0.4392.0
  • Mozilla Firefox 85.0b5
  • WebKit 14.1

版本 1.7​

  • **新的 Java SDK**：Playwright for Java 現在與JavaScript、Python 和 .NET 繫結保持同步。
  • 瀏覽器儲存 API：新的便捷 API，用於儲存和載入瀏覽器儲存狀態（cookies、本地儲存），以簡化身份驗證場景的自動化。
  • 新的 CSS 選擇器：我們聽取了你對更靈活選擇器的反饋，並改進了選擇器的實現。Playwright 1.7 引入了 新的 CSS 擴充套件，更多內容即將推出。
  • **新網站**：playwright.dev 上的文件網站已更新，現在使用 Docusaurus 構建。
  • 支援 Apple Silicon：Playwright 的 WebKit 和 Chromium 瀏覽器二進位制檔案現在為 Apple Silicon 構建。

新 API​

瀏覽器版本​

  • Chromium 89.0.4344.0
  • Mozilla Firefox 84.0b9
  • WebKit 14.1