ビジュアル比較

はじめに

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.dokyumento.jp');
  await expect(page).toHaveScreenshot();
});

警告

ブラウザのレンダリングは、ホスト OS、バージョン、設定、ハードウェア、電源 (バッテリーまたは電源アダプター)、ヘッドレスモード、およびその他の要因によって異なる場合があります。一貫したスクリーンショットを得るには、ベースラインのスクリーンショットが生成されたのと同じ環境でテストを実行してください。

スクリーンショットの生成

上記を初めて実行すると、テストランナーは次のように表示します。

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

それはまだゴールデンファイルが存在しないためです。このメソッドは、連続する 2 つのスクリーンショットが一致するまで多数のスクリーンショットを取得し、最後のスクリーンショットをファイルシステムに保存しました。これでリポジトリに追加する準備ができました。

ゴールデン期待値を含むフォルダーの名前は、テストファイルの名前で始まります。

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 設定の testConfig.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.dokyumento.jp');
  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.dokyumento.jp');
  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.dokyumento.jp');
  expect(await page.textContent('.hero__title')).toMatchSnapshot('hero.txt');
});

スナップショットは、テストファイルの隣の別のディレクトリに保存されます。たとえば、my.spec.ts ファイルは、my.spec.ts-snapshots ディレクトリにスナップショットを生成して保存します。このディレクトリをバージョン管理 (例: git) にコミットし、変更を確認する必要があります。

はじめに​

スクリーンショットの生成​

スクリーンショットの更新​

オプション​

maxDiffPixels​

stylePath​

非画像スナップショット​