Skip to main content

視覺比較

簡介​

Playwright Test 包含使用 await expect(page).toHaveScreenshot() 來生成和視覺比較截圖的功能。在第一次執行時，Playwright Test 會生成參考截圖。隨後的執行將與參考截圖進行比較。

example.spec.ts
import { test, expect } from '@playwright/test';

test('example test', async ({ page }) => {
  await page.goto('https://playwright.dev');
  await expect(page).toHaveScreenshot();
});

產生截圖​

當你第一次執行上述程式碼時，測試執行器會說:

Error: A snapshot doesn't exist at example.spec.ts-snapshots/example-test-1-chromium-darwin.png, writing actual.

這是因為還沒有黃金檔案。此方法拍攝了一堆截圖，直到兩個連續的截圖匹配，並將最後一個截圖保存到檔案系統。它現在準備被添加到存儲庫。

測試檔案名稱開頭的資料夾名稱包含黃金期望:

drwxr-xr-x  5 user  group  160 Jun  4 11:46 .
drwxr-xr-x  6 user  group  192 Jun  4 11:45 ..
-rw-r--r--  1 user  group  231 Jun  4 11:16 example.spec.ts
drwxr-xr-x  3 user  group   96 Jun  4 11:46 example.spec.ts-snapshots

快照名稱 example-test-1-chromium-darwin.png 包含幾個部分:

  • example-test-1.png - 自動生成的快照名稱。或者，您可以將快照名稱指定為 toHaveScreenshot() 方法的第一個參數:

    await expect(page).toHaveScreenshot('landing.png');

  • chromium-darwin - 瀏覽器名稱和平台。由於不同的渲染、字體等原因，瀏覽器和平台之間的截圖會有所不同，因此您需要為它們準備不同的快照。如果您在 configuration file 中使用多個專案，專案名稱將取代 chromium。

快照名稱和路徑可以在 playwright 配置中使用 snapshotPathTemplate 進行配置。

更新截圖​

有時候你需要更新參考截圖，例如當頁面已經更改時。使用 --update-snapshots 旗標來完成這個操作。

npx playwright test --update-snapshots

請注意，snapshotName 也接受快照檔案路徑段的陣列，例如 expect().toHaveScreenshot(['relative', 'path', 'to', 'snapshot.png'])。 但是，此路徑必須保留在每個測試檔案的快照目錄內 (即 a.spec.js-snapshots)，否則會拋出錯誤。

選項​

maxDiffPixels​

Playwright Test 使用 pixelmatch 函式庫。你可以傳遞各種選項來修改其行為:

example.spec.ts
import { test, expect } from '@playwright/test';

test('example test', async ({ page }) => {
  await page.goto('https://playwright.dev');
  await expect(page).toHaveScreenshot({ maxDiffPixels: 100 });
});

如果你想在專案中的所有測試之間共享預設值，你可以在 Playwright 配置中指定它，可以是全域的或每個專案的:

playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
  expect: {
    toHaveScreenshot: { maxDiffPixels: 100 },
  },
});

stylePath​

您可以在截圖時將自訂樣式表應用到您的頁面。這樣可以過濾掉動態或易變的元素，從而提高截圖的確定性。

screenshot.css
iframe {
  visibility: hidden;
}
example.spec.ts
import { test, expect } from '@playwright/test';

test('example test', async ({ page }) => {
  await page.goto('https://playwright.dev');
  await expect(page).toHaveScreenshot({ stylePath: path.join(__dirname, 'screenshot.css') });
});

如果你想在專案中的所有測試之間共享預設值，你可以在 Playwright 配置中指定它，可以是全域的或每個專案的:

playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
  expect: {
    toHaveScreenshot: {
      stylePath: './screenshot.css'
    },
  },
});

非影像快照​

除了截圖，您可以使用 expect(value).toMatchSnapshot(snapshotName) 來比較文字或任意二進位資料。Playwright Test 自動偵測內容類型並使用適當的比較演算法。

在這裡，我們將文本內容與參考進行比較。

example.spec.ts
import { test, expect } from '@playwright/test';

test('example test', async ({ page }) => {
  await page.goto('https://playwright.dev');
  expect(await page.textContent('.hero__title')).toMatchSnapshot('hero.txt');
});

快照會儲存在測試文件旁邊的一個單獨目錄中。例如，my.spec.ts 文件將在 my.spec.ts-snapshots 目錄中生成並儲存快照。你應該將此目錄提交到你的版本控制（例如 git），並審查對它的任何更改。