跳到主要內容

視覺化比較

簡介​

Playwright 測試包含使用 await expect(page).toHaveScreenshot() 產生和視覺化比較螢幕截圖的功能。首次執行時，Playwright 測試將產生參考螢幕截圖。後續執行將與參考螢幕截圖進行比較。

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

test('example test', async ({ page }) => {
  await page.goto('https://playwright.dev.org.tw');
  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 - 瀏覽器名稱和平台。螢幕截圖在瀏覽器和平台之間有所不同，因為不同的渲染、字體等，因此您需要它們的不同快照。如果您在設定檔中使用多個專案，則將使用專案名稱而不是 chromium。

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

更新螢幕截圖​

有時您需要更新參考螢幕截圖，例如當頁面已變更時。使用 --update-snapshots 標誌執行此操作。

npx playwright test --update-snapshots

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

選項​

maxDiffPixels​

Playwright 測試使用 pixelmatch 函式庫。您可以傳遞各種選項來修改其行為

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

test('example test', async ({ page }) => {
  await page.goto('https://playwright.dev.org.tw');
  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.org.tw');
  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 測試會自動偵測內容類型並使用適當的比較演算法。

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

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

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

快照儲存在測試文件旁邊的單獨目錄中。例如，my.spec.ts 文件將在 my.spec.ts-snapshots 目錄中產生和儲存快照。您應該將此目錄提交到您的版本控制（例如 git），並查看對其所做的任何變更。