跳至主要內容

發行說明

版本 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() 以斷言 Locator 指向具有指定 aria errormessage 的元素。

  • 選項 testConfig.updateSnapshots 新增了組態列舉 changed。changed 僅更新已變更的快照，而 all 現在會更新所有快照，無論是否有任何差異。

  • 新選項 testConfig.updateSourceMethod 定義了當 testConfig.updateSnapshots 組態時，更新原始碼的方式。新增了 overwrite 和 3-way 模式，可將變更寫入原始碼，在現有的 patch 模式之上，該模式會建立修補程式檔案。

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

  • 選項 testConfig.webServer 新增了 gracefulShutdown 欄位，用於指定預設 SIGKILL 以外的程序終止訊號。

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

UI 更新​

  • 更新預設 HTML 報告器以改善附件的顯示。
  • 用於選取元素以產生 aria 快照的新按鈕。
  • 其他詳細資訊 (例如按下的按鍵) 現在會與追蹤中的動作 API 呼叫一起顯示。
  • 追蹤中 canvas 內容的顯示容易出錯。顯示現在預設為停用，並且可以透過 Display canvas content UI 設定啟用。
  • Call 和 Network 面板現在顯示額外的時間資訊。

重大變更​

瀏覽器版本​

  • 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.dev.org.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"
`);

您可以使用 測試產生器 產生此斷言，並使用 --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 檢視器和擴充功能的測試程式碼。請參閱 issue #33566 以瞭解更多詳細資訊。

其他重大變更​

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

試用新的 Chromium 無頭模式​

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

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

請參閱 issue #33566 以取得您可能遇到的可能中斷清單以及關於 Chromium 無頭模式的更多詳細資訊。如果您在選擇加入後看到任何問題，請提交 issue。

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

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

其他​

  • 快照內的 <canvas> 元素現在會繪製預覽。
  • 新方法 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()) 不再顯示在報告和追蹤檢視器中。您可以在網路標籤中查看哪些網路要求已路由。
  • 網路標籤中用於要求的新「複製為 cURL」和「複製為 fetch」按鈕。

其他​

  • 選項 form 和類似選項現在接受 FormData。
  • 新方法 page.requestGC() 可能有助於偵測記憶體洩漏。
  • 新選項 location 可傳遞自訂步驟位置。
  • 由 APIRequestContext 提出的要求現在會在 HAR 中記錄詳細的計時和安全性資訊。

瀏覽器版本​

  • Chromium 130.0.6723.19
  • Mozilla Firefox 130.0
  • WebKit 18.0

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

  • Google Chrome 129
  • Microsoft Edge 129

版本 1.47​

網路標籤改進​

UI 模式和追蹤檢視器中的網路標籤進行了幾項不錯的改進

  • 依資產類型和 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 內容並將其分發給您的團隊非常有用。
  • noWaitAfter 選項在 locator.selectOption() 中已棄用。
  • 我們已收到關於 WebKit 在 GitHub Actions macos-13 上行為異常的報告。我們建議將 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，用於在元件測試中攔截和處理網路要求。有兩種使用 router 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 模式 / 追蹤檢視器更新​

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

其他​

  • apiRequestContext.fetch() 中的新 maxRetries 選項會在 ECONNRESET 網路錯誤時重試。
  • 用於 box 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://127.0.0.1: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 行為很有用。或者，即使在存在即時終端機的情況下，如果您計劃對輸出進行後處理並處理控制序列，您也可以啟用 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 模式的檔案。

  • 新屬性 timeout 現在可用於自訂 expect matcher。此屬性會考量 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 允許在特定位址 (而不是未指定的 0.0.0.0) 上接受 WebSocket 連線。

  • 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');

Locator 處理常式

  • 在執行使用 page.addLocatorHandler() 新增的處理常式之後，Playwright 現在將等待直到觸發處理常式的覆蓋層不再可見。您可以使用新的 noWaitAfter 選項選擇退出此行為。
  • 您可以使用 page.addLocatorHandler() 中的新 times 選項來指定處理常式應執行的最大次數。
  • page.addLocatorHandler() 中的處理常式現在接受 locator 作為引數。
  • 用於移除先前新增的 locator 處理常式的新 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 中的 expect.toPass.intervals 選項全域組態，或在 testProject.expect 中依專案組態。

  • 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)

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

    $ 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' });

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

    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' }));
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.dev.org.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.dev.org.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​

將自訂 matcher 新增至您的 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);
});

请参阅完整示例文档。

合并测试夹具​

您现在可以合并来自多个文件或模块的测试夹具

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 现在在 x86_64 和 arm64 上为 Chromium、Firefox 和 WebKit 提供 Debian 12 Bookworm 支持。如果您遇到任何问题，请告知我们！

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 模式现在可通过 VSCode Playwright 扩展中的新“显示追踪查看器”按钮使用

    Playwright UI Mode

  • UI 模式和追踪查看器标记了使用 page.route() 和 browserContext.route() 处理程序处理的网络请求，以及通过 API 测试 发出的请求

    Trace Viewer

  • 方法 page.screenshot()、locator.screenshot()、expect(page).toHaveScreenshot() 和 expect(locator).toHaveScreenshot() 的新选项 maskColor，用于更改默认的遮罩颜色

    await page.goto('https://playwright.dev.org.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 模式和追踪查看器现在都可以在浏览器选项卡中打开

    $ 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 模式现在显示步骤、夹具和附件：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，用于创建预配置的 expect 实例，该实例具有自己的默认值，例如 timeout 和 soft。

    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 模式 让您可以探索、运行和调试测试。带有内置的监视模式。

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 快照现在可以在单独的窗口中打开。
  • 新的方法 defineConfig，用于 playwright.config 中。
  • 方法 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;

用 defineConfig 调用替换 config 变量定义

// 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</div>
      <option value="green">Green</div>
      <option value="blue">Blue</div>
    </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 中的实时定位器。 使用 “Explore” 工具为页面上的任何元素生成定位器。

Locator Explorer

  • Codegen 和追踪查看器深色主题。 自动从操作系统设置中选取。

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 中宣布的那样，自 2022 年 12 月起将不再支持 Ubuntu 18。除此之外，从下一个 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.dev.org.tw', {
  waitUntil: 'domcontentloaded',
});

在 1.26 之前，这将等待所有 iframe 触发 DOMContentLoaded 事件。

为了与 Web 规范对齐，'domcontentloaded' 值仅等待目标框架触发 'DOMContentLoaded' 事件。使用 waitUntil: 'load' 等待所有 iframe。

浏览器版本​

  • 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.dev.org.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://127.0.0.1:3000/',
  },
});

🐂 Debian 11 Bullseye 支持​

Playwright 现在在 x86_64 上为 Chromium、Firefox 和 WebKit 提供 Debian 11 Bullseye 支持。如果您遇到任何问题，请告知我们！

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 优先断言更新​

组件测试更新​

阅读有关 使用 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 或 Svelte 元件。您可以使用 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 用於篩選現有的 locator

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

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

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

    • 停用動畫
    • 使用 CSS scale 選項
    await page.goto('https://playwright.dev.org.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 和 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​

Locator 改善​

測試 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() 引入的任何 fixture 都可以在 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',
  },
};

在設定檔中參數化 fixture 的正確方法是在定義 fixture 時指定 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​

Frame Locator​

Playwright 1.17 引入 frame locator - 頁面上 iframe 的 locator。Frame locator 擷取足以擷取 iframe 然後在該 iframe 中定位元素的邏輯。Frame locator 預設為嚴格模式，將等待 iframe 出現，並且可以用於網頁優先斷言。

Graphics

可以使用 page.frameLocator() 或 locator.frameLocator() 方法建立 Frame locator。

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

請參閱我們的文件以了解更多資訊。

Trace Viewer 更新​

Playwright Trace Viewer 現在在線上提供，網址為 https://trace.playwright.dev！只需拖放您的 trace.zip 檔案即可檢查其內容。

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

  • 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 fixture

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.dev.org.tw');
  expect(response.status()).toBe(200);
});

請參閱回應攔截以了解更多資訊。

新的 HTML 報告器​

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

$ npx playwright test --reporter=html

HTML 報告器具有關於測試及其失敗的所有資訊，包括顯示追蹤和影像成品。

html reporter

請參閱我們的報告器以了解更多資訊。

🎭 Playwright Library​

locator.waitFor​

等待 locator 解析為具有給定狀態的單一元素。預設為 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()以了解更多資訊。

Arm64 的 Docker 支援​

Playwright Docker 映像現在已針對 Arm64 發布，因此可以在 Apple Silicon 上使用。

請參閱Docker 整合以了解更多資訊。

🎭 Playwright Trace Viewer​

  • 追蹤檢視器內部的網頁優先斷言
  • 使用 npx playwright show-trace 執行追蹤檢視器，並將追蹤檔案拖放到追蹤檢視器 PWA
  • API 測試已與追蹤檢視器整合
  • 更佳的動作目標視覺歸因

請參閱Trace Viewer以了解更多資訊。

瀏覽器版本​

  • Chromium 97.0.4666.0
  • Mozilla Firefox 93.0
  • WebKit 15.4

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

  • Google Chrome 94
  • Microsoft Edge 94

版本 1.15​

🎭 Playwright Library​

🖱️ 滑鼠滾輪​

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

📜 新的標頭 API​

先前無法取得回應的多個標頭值。現在可以了，並且提供其他協助程式函數

🌈 強制色彩模擬​

現在可以透過在 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 Library​

⚡️ 新的「嚴格」模式​

選取器不明確是自動化測試中的常見問題。「嚴格」模式確保您的選取器指向單一元素，否則會擲回錯誤。

將 strict: true 傳遞到您的動作呼叫中以選擇加入。

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

📍 新的 Locator API​

Locator 代表頁面上元素(或多個元素)的檢視。它擷取足以在任何給定時刻擷取元素的邏輯。

Locator 和 ElementHandle 之間的差異在於後者指向特定元素，而 Locator 擷取如何擷取該元素的邏輯。

此外，locator 預設為「嚴格」模式！

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​

✅ 網頁優先斷言​

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

考虑以下示例

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​

  • 🖖 透過 page.dragAndDrop() API 進行程式化的拖放支援。
  • 🔎 增強型 HAR，具有請求和回應的本文大小。透過 browser.newContext() 中的 recordHar 選項使用。

工具​

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

新的和經過修訂的指南​

瀏覽器版本​

  • Chromium 93.0.4576.0
  • Mozilla Firefox 90.0
  • WebKit 14.2

新的 Playwright API​

版本 1.12​

⚡️ 推出 Playwright Test​

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

  • 跨所有瀏覽器執行測試。
  • 平行執行測試。
  • 享受開箱即用的內容隔離和合理的預設值。
  • 在失敗時擷取影片、螢幕截圖和其他成品。
  • 將您的 POM 整合為可擴充的 fixture。

安裝

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.dev.org.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.dev.org.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

👉 請參閱 追蹤檢視器文件以了解更多資訊。

瀏覽器版本​

  • Chromium 93.0.4530.0
  • Mozilla Firefox 89.0
  • WebKit 14.2

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

  • Google Chrome 91
  • Microsoft Edge 91

新 API​

版本 1.11​

🎥 全新影片：Playwright: 適用於現代網路的全新測試自動化框架 (投影片)

  • 我們討論了 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
  • 在 Headed 模式下使用 page.pause() 暫停腳本執行。暫停頁面會啟動 Playwright Inspector 以進行偵錯。
  • 新的 has-text 偽類別，適用於 CSS 選擇器。:has-text("example") 比對任何包含 "example" 的元素，可能在子元素或後代元素中。請參閱更多範例。
  • 頁面對話方塊現在會在執行期間自動關閉，除非已設定 dialog 事件的監聽器。 深入了解相關資訊。
  • Playwright for Python 現已穩定，具有慣用的 snake case API 和預先建置的 Docker 映像檔，可在 CI/CD 中執行測試。

瀏覽器版本​

  • 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 bindings 並駕齊驅。
  • 瀏覽器儲存 API：新的便捷 API，用於儲存和載入瀏覽器儲存狀態 (Cookie、本機儲存)，以簡化具有驗證的自動化情境。
  • 全新 CSS 選擇器：我們聽取了您對於更彈性選擇器的意見回饋，並已修改選擇器實作。Playwright 1.7 引入了 新的 CSS 擴充功能，而且即將推出更多功能。
  • 全新網站：playwright.dev 的文件網站已更新，現在使用 Docusaurus 建置。
  • 支援 Apple Silicon：WebKit 和 Chromium 的 Playwright 瀏覽器二進位檔現在是為 Apple Silicon 建置的。

全新 API​

瀏覽器版本​

  • Chromium 89.0.4344.0
  • Mozilla Firefox 84.0b9
  • WebKit 14.1