Skip to main content

發行說明

版本 1.47​

Network 頁籤改進​

UI 模式和追蹤檢視器中的 Network 頁籤有幾個不錯的改進:

  • 按資產類型和 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。
  • 在 page.removeAllListeners()、browser.removeAllListeners() 和 browserContext.removeAllListeners() 中新增了 behavior 選項，以等待正在進行的監聽器完成。
  • 現在可以通過將 cert 和 key 作為緩衝區傳遞，而不是文件路徑，從記憶體中傳遞 TLS 客戶端證書。
  • 現在可以在 HTML 報告中的新分頁中打開 text/html 內容類型的附件。這對於在 Playwright 測試報告中包含第三方報告或其他 HTML 內容並將其分發給您的團隊非常有用。
  • locator.selectOption() 中的 noWaitAfter 已被棄用。
  • 我們已經看到 Webkit 中的 WebGL 在 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 Client Certificates​

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',
    }],
  },
  // ...
});

你也可以將客戶端證書提供給特定的test project或作為browser.newContext()和apiRequest.newContext()的參數。

--only-changed cli option​

新的 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 固定裝置，用於攔截和處理元件測試中的網路請求。有兩種使用 router 固定裝置的方法:

  • 呼叫 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
  // ...
});

此裝置僅在元件測試中可用。

UI Mode / Trace Viewer Updates​

  • 測試註釋現在顯示在 UI 模式中。
  • 文字附件的內容現在會在附件窗格中內嵌顯示。
  • 新設定可顯示/隱藏路由操作，如 route.continue()。
  • 請求方法和狀態顯示在網路詳細資訊標籤中。
  • 新按鈕可將來源檔案位置複製到剪貼簿。
  • Metadata 窗格現在顯示 baseURL。

雜項​

瀏覽器版本​

  • 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('http://localhost: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 行為。

    # 避免輸出 ANSI 控制序列的 TTY 功能
    PLAYWRIGHT_FORCE_TTY=0 npx playwright test

    # 啟用 TTY 功能，假設終端寬度為 80
    PLAYWRIGHT_FORCE_TTY=80 npx playwright test

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

  • 新屬性 timeout 現在可用於自定義的 expect 匹配器。此屬性考慮 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 }) {
        // 當未指定 timeout 選項時，使用配置的超時時間。
        const timeout = options?.timeout ?? this.timeout;
        // ... 實現斷言 ...
      },
    });

雜項​

  • 方法 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。

    // 按下常用的鍵盤快捷鍵 Control+S 或 Meta+S 來觸發 "儲存" 操作。
    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');

定位器處理程式

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

其他選項

  • multipart 選項在 apiRequestContext.fetch() 中現在接受 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 允許按專案配置是否跳過截圖期望。

Reporter API

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

命令列

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

    首先執行所有測試:

    $ npx playwright test

    執行 103 個測試，使用 5 個工作者
    ...
    2 個失敗
      [chromium] › my-test.spec.ts:8:5 › two ─────────────────────────────────────────────────────────
      [chromium] › my-test.spec.ts:13:5 › three ──────────────────────────────────────────────────────
    101 個通過 (30.0s)

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

    $ npx playwright test --last-failed

    執行 2 個測試，使用 2 個工作者
      2 個通過 (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() 現在支援過濾器，只移除部分 cookies。

    // 清除所有 cookies。
    await context.clearCookies();
    // 新增: 清除具有特定名稱的 cookies。
    await context.clearCookies({ name: 'session-id' });
    // 新增: 清除特定域名的 cookies。
    await context.clearCookies({ domain: 'my-origin.com' });

  • 新模式 retain-on-first-failure 用於 testOptions.trace。在此模式下，trace 會在每次測試的第一次執行時記錄，但不會在重試時記錄。當測試執行失敗時，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 Mode Updates​

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

請參閱完整範例文件。

合併測試夾具​

您現在可以合併來自多個檔案或模組的測試夾具:

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();
});

隱藏實作細節: box 測試步驟​

你可以將 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 Mode Updates​

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 時不會下載瀏覽器。

推薦遷移

執行 npx playwright install 在 npm 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" reporter 添加到 config 中:

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

    "blob" reporter 將生成包含所有測試執行資訊的 ".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 Mode Updates​

  • UI Mode 現在會遵守專案相依性。您可以通過在專案列表中勾選/取消勾選來控制要遵守的相依性。
  • 測試的控制台日誌現在顯示在控制台標籤中。

瀏覽器版本​

  • 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 mode is now available in VSCode Playwright extension via a new "Show trace viewer" button:

    Playwright UI Mode

  • UI mode and trace viewer mark network requests handled with page.route() and browserContext.route() handlers, as well as those issued via the API testing:

    Trace Viewer

  • New option maskColor for methods page.screenshot(), locator.screenshot(), expect(page).toHaveScreenshot() and expect(locator).toHaveScreenshot() to change default masking color:

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

  • New uninstall CLI command to uninstall browser binaries:

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

  • Both UI mode and trace viewer now could be opened in a browser tab:

    $ 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 # 使用 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 Mode 現在顯示步驟、fixtures 和附件: 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');

    // 總是進行軟性斷言。
    const softExpect = expect.configure({ soft: true });

  • 新選項 stderr 和 stdout 在 testConfig.webServer 中配置輸出處理:

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

    export default defineConfig({
      // 在開始測試之前運行本地開發伺服器
      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() 來確定事件來源。

⚠️ 重大變更​

  • npx playwright test 如果你安裝了 playwright 和 @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() 建立一個符合任一定位器的定位器。考慮一個情境，你想點擊 "New email" 按鈕，但有時會彈出安全設定對話框。在這種情況下，你可以等待 "New email" 按鈕或對話框並相應地操作：

    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-first 斷言 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 Mode 讓你可以探索、執行和除錯測試。內建監看模式。

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

    // 確保元素的至少一部分與視口相交。
    await expect(button).toBeInViewport();

    // 確保元素完全在視口外。
    await expect(button).not.toBeInViewport();

    // 確保元素至少有一半與視口相交。
    await expect(button).toBeInViewport({ ratio: 0.5 });

雜項​

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

⚠️ 元件測試中的重大變更​

注意: 僅限元件測試, 不影響端到端測試。

playwright-ct.config 設定檔案用於component testing 現在需要呼叫 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 => {
      // 獲取原始設定。
      const response = await route.fetch();

      // 強制設定主題為預定義值。
      const json = await response.json();
      json.theme = 'Solorized';

      // 使用修改後的資料完成。
      await route.fulfill({ json });
    });

  • 新方法 locator.all() 用於遍歷所有匹配的元素:

    // 檢查所有的複選框！
    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" 工具為頁面上的任何元素生成定位器。

定位器探索器

  • 程式碼產生器和 Trace Viewer 深色主題。 自動從作業系統設定中獲取。

測試執行器​

新的 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 類別上使用。

其他亮點​

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

    npx playwright test --workers=20%

  • html reporter 的新選項 host 和 port。

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

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

  • 新欄位 FullConfig.configFile 可供測試 reporter 使用，指定 config 檔案的路徑（如果有的話）。

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

行為變更​

  • expect(locator).toHaveAttribute() with an empty value does not match missing attribute anymore. 例如, 當 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​

斷言​

其他亮點​

  • 新選項 maxRedirects 用於 apiRequestContext.get() 和其他函式以限制重定向次數。
  • 新的命令列標誌 --pass-with-no-tests 允許在未找到檔案時測試套件通過。
  • 新的命令列標誌 --ignore-snapshots 用於跳過快照期望，例如 expect(value).toMatchSnapshot() 和 expect(page).toHaveScreenshot()。

行為變更​

一堆 Playwright API 已經支援 waitUntil: 'domcontentloaded' 選項。例如:

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

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

為了符合網頁規範，'domcontentloaded' 值僅等待目標框架觸發 'DOMContentLoaded' 事件。使用 waitUntil: 'load' 來等待所有的 iframes。

瀏覽器版本​

  • Chromium 106.0.5249.30
  • Mozilla Firefox 104.0
  • WebKit 16.0

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

  • Google Chrome 105
  • Microsoft Edge 105

版本 1.25​

VSCode Extension​

  • 觀看你的測試即時執行 & 保持開發工具開啟。
  • 選擇選擇器。
  • 從當前頁面狀態記錄新測試。

vscode extension screenshot

測試執行器​

  • test.step() 現在返回 step 函式的值:

    test('should work', async ({ page }) => {
      const pageTitle = await test.step('get title', async () => {
        await page.goto('https://playwright.dev');
        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 伺服器​

啟動多個網頁伺服器、資料庫或其他程序，方法是傳遞一組配置:

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: 'http://localhost:3000/',
  },
});

🐂 Debian 11 Bullseye 支援​

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

Linux 支援看起來像這樣:

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

🕵️ 匿名描述​

現在可以呼叫 test.describe() 來建立沒有標題的套件。這對於使用 test.use() 為一組測試提供共同選項很有用。

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

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

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

🧩 元件測試更新​

Playwright 1.24 Component Tests 引入了 beforeMount 和 afterMount hooks。使用這些來設定你的應用程式進行測試。

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

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 Assertions Update​

元件測試更新​

了解更多關於使用 Playwright 進行元件測試。

雜項​

  • 如果有服務工作者阻礙了你的操作，你現在可以使用新的上下文選項 serviceWorkers 輕鬆停用它:

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

  • 使用 .zip 路徑作為 recordHar 上下文選項會自動壓縮生成的 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。

⚠️ 重大變更 ⚠️​

WebServer 現在被認為是“準備就緒”，如果對指定 url 的請求具有以下任何 HTTP 狀態碼:

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

版本 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';

    // 讓我們在深色模式下測試元件！
    test.use({ colorScheme: 'dark' });

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

      // 與任何 Playwright 測試一樣，斷言定位器文本。
      await expect(component).toContainText('React');
      // 或者截圖 🚀
      await expect(component).toHaveScreenshot();
      // 或使用任何 Playwright 方法
      await component.click();
    });

    閱讀更多在我們的文件。

  • 角色選擇器允許通過其 ARIA role、ARIA attributes 和 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-first 斷言 expect(page).toHaveScreenshot() 和 expect(locator).toHaveScreenshot() 等待截圖穩定並增強測試可靠性。

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

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

    新的 expect(page).toHaveScreenshot() 將截圖保存到與 expect(value).toMatchSnapshot() 相同的位置。

版本 1.21​

重點​

  • 新的角色選擇器允許通過其 ARIA role、ARIA attributes 和 accessible name 選擇元素。

    // 點擊一個可訪問名稱為 "log in" 的按鈕
    await page.locator('role=button[name="log in"]').click();

    閱讀更多在 我們的文件。

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

  • page.screenshot() 中的新 caret 選項，用於控制文本插入符號。預設為 "hide"。

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

    // 輪詢該方法直到返回預期結果。
    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-ready 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, // 允許不超過 27 個不同的像素。
    });

    最方便的是在 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，請切換到它。這是最後一個包含 Python 在我們的 javascript mcr.microsoft.com/playwright docker 映像中的版本。
  • 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 Update​

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

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

    // 進行一些檢查，即使失敗也不會停止測試...
    await expect.soft(page.locator('#status')).toHaveText('Success');
    await expect.soft(page.locator('#eta')).toHaveText('1 day');

    // ... 並繼續測試以檢查更多內容。
    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 測試配置文件，可選擇性地添加範例、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​

Frame 定位器​

Playwright 1.17 準備推出 frame locators - 一個頁面上 iframe 的定位器。Frame locators 捕捉足以獲取 iframe 的邏輯，然後在該 iframe 中定位元素。Frame locators 預設是嚴格的，會等待 iframe 出現，並且可以用於 Web-First 斷言。

框架定位器可以使用 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.playwright.dev 是一個 progressive web application，在本地處理追蹤。

  • Playwright Test 追蹤現在預設包含來源（這些可以用追蹤選項關閉）
  • 追蹤檢視器現在顯示測試名稱
  • 新的追蹤 Metadata 頁籤包含瀏覽器詳細資訊
  • 快照現在有 URL 欄

HTML Report Update​

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

Ubuntu ARM64 支援 + 更多​

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

  • 你現在可以使用 Playwright 在 Linux 上安裝穩定版本的 Edge：

    npx playwright install msedge

新的 API​

版本 1.16​

🎭 Playwright 測試​

API 測試​

Playwright 1.16 準備推出新的 API Testing，讓你可以直接從 Node.js 發送請求到伺服器！現在你可以：

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

要代表 Playwright 的 Page 發出請求，使用 new 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');
  expect(response.status()).toBe(200);
});

閱讀更多關於回應攔截。

新的 HTML 報告器​

試試新的 HTML reporter，可以使用 --reporter=html 或在 playwright.config.ts 檔案中加入 reporter 項目:

$ npx playwright test --reporter=html

The HTML reporter 擁有所有關於測試及其失敗的資訊，包括顯示追蹤和圖像工件。

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 support for Arm64​

Playwright Docker image 現在已經為 Arm64 發佈，因此可以在 Apple Silicon 上使用。

了解更多關於 Docker integration 的資訊。

🎭 Playwright Trace Viewer​

  • 在 trace viewer 中的 web-first 斷言
  • 使用 npx playwright show-trace 執行 trace viewer，並將 trace 檔案拖放到 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​

先前無法獲取回應的多個標頭值。現在這是可能的，並且提供了額外的輔助函式:

🌈 強制色彩模擬​

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

新的 API​

🎭 Playwright 測試​

🤝 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" 模式​

選擇器模糊性是自動化測試中的常見問題。"strict" 模式確保您的選擇器指向單一元素，否則會拋出錯誤。

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

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

📍 新的 定位器 API​

Locator 代表頁面上元素的視圖。它捕捉了足夠的邏輯，以便在任何給定時刻檢索元素。

兩者之間的區別在於 Locator 和 ElementHandle 是後者指向特定的元素，而 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 selectors 文件 和 vue selectors 文件。

✨ 新的 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 測試​

✅ Web-First Assertions​

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 }) => { /* ... */ });
});

了解更多資訊，請參閱 文件。

🐾 Steps API with test.step​

將長測試拆分為多個步驟，使用 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 server​

要在測試期間啟動伺服器，請在設定檔中使用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 測試​

Playwright​

工具​

  • 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 團隊從頭開始構建，專門滿足端到端測試需求:

  • 在所有瀏覽器中執行測試。
  • 平行執行測試。
  • 享受開箱即用的上下文隔離和合理的預設值。
  • 在失敗時捕捉影片、截圖和其他檔案。
  • 將你的 POMs 整合為可擴展的裝置。

安裝:

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/');
  const name = await page.innerText('.navbar__title');
  expect(name).toBe('Playwright');
});

執行:

npx playwright test

👉 閱讀更多在 Playwright Test 文件。

🧟‍♂️ 準備推出 Playwright Trace Viewer​

Playwright Trace Viewer 是一個新的 GUI 工具，幫助在程式碼執行後探索記錄的 Playwright Traces。Playwright Traces 讓你檢查:

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

// 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:

👉 閱讀更多在 trace viewer documentation。

瀏覽器版本​

  • Chromium 93.0.4530.0
  • Mozilla Firefox 89.0
  • WebKit 14.2

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

  • Google Chrome 91
  • Microsoft Edge 91

新的 API​

版本 1.11​

🎥 新 影片: Playwright: A New Test Automation Framework for the Modern Web (slides)

  • 我們討論了 Playwright
  • 展示了幕後的工程工作
  • 進行了具有新功能的現場展示 ✨
  • 特別感謝 applitools 主辦這個活動並邀請我們！

瀏覽器版本​

  • Chromium 92.0.4498.0
  • Mozilla Firefox 89.0b6
  • WebKit 14.2

新的 API​

版本 1.10​

  • Playwright for Java v1.10 現在已經穩定！
  • 使用新頻道 API在Google Chrome和Microsoft Edge穩定頻道上執行 Playwright。
  • 在 Mac 和 Windows 上，Chromium 截圖速度快。

捆綁的瀏覽器版本​

  • 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 進行除錯。
  • CSS 選擇器的新 has-text 偽類。:has-text("example") 匹配任何包含 "example" 的元素，可能在子元素或後代元素內。查看更多範例。
  • 頁面對話框在執行期間現在會自動關閉，除非配置了 dialog 事件的監聽器。了解更多資訊。
  • Playwright for Python 現在穩定，具有慣用的蛇形命名法 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 用於儲存和加載瀏覽器儲存狀態（cookies、本地儲存），以簡化具有身份驗證的自動化場景。
  • 新 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