PlaywrightのVisual Testing機能について

Visual Testingとは

Playwrightでは、期待する状況と実際との差異をスクリーンショットを用いて比較するテストを行うことができます。以下がその手順です。

手順

テストコードの記述

例えば以下のように記述します。

await expect(usingTheGridForm).toHaveScreenshot(); が該当部分です。

test('radio buttons', async ({ page }) => {
  await page.getByText('Forms').click();
  await page.getByText('Form Layouts').click();
  const usingTheGridForm = page.locator('nb-card', { hasText: 'Using the Grid'});
  await usingTheGridForm.getByRole('radio', { name: 'Option 1' }).check({ force: true });
  const radioStatus = await usingTheGridForm.getByRole('radio', {name: 'Option 1'}).isChecked();
  
  await expect(usingTheGridForm).toHaveScreenshot();
});

テストを実行する。

通常通りテストを行います。すると、１回目と２回目では実行結果が変わります。

１回目の実行結果

以下の様になります。

このエラーは：

• スナップショットが存在しない:
• 期待値となるベースラインのスクリーンショット（radio-buttons-1-chromium-darwin.png）がまだ存在しないことを示しています。
• 新しいスナップショットの作成:
• writing actual は、現在の状態のスクリーンショットを新しく作成していることを示しています。実際に、以下の画像 tests/uiComponents.spec.ts-snapshots/radio-buttons-1-chromium-darwin.pngが作成されました。２回目以降のテストでは、このスクリーンショットと実際の見た目が合致しているかをテストすることができます。

２回目の実行結果

１回目で撮影したスクリーンショットと実際の見た目が合致している場合、至って普通にテストが通ります。