次の方法で共有

Playwright ワークスペースを使用して視覚的な比較を構成する

この記事では、Playwright ワークスペースを使用するときに Playwright の視覚的比較テストを適切に構成する方法について説明します。 Playwright のスナップショットはローカル ブラウザーとリモート ブラウザーでは異なるため、予期しないテストの失敗が発生する可能性があります。

バックグラウンド

Playwright Test Runner では、予想されるスクリーンショット パスの一部として、ホスト OS を使用します。 ユーザーのホスト コンピューターとは異なる OS でリモート ブラウザーを使用してテストを実行する場合、Visual Comparisons テストは失敗します。 サービスを利用する場合は、Visual Comparisons のみを実行することをお勧めしています。 サービス上でスクリーンショットを撮る場合、ローカル セットアップとの比較は、一致しないため必要ありません。

ignoreSnapshots を構成する

ignoreSnapshots オプションを使用すると、Playwright ワークスペースを使用する場合にのみ視覚的な比較を実行できます。

  1. サービスを利用していない元の ignoreSnapshots: true で playwright.config.ts を設定します。
  2. ignoreSnapshots: false で playwright.service.config.ts を設定します。

サービスを利用している場合、その構成では playwright.config.ts がオーバーライドされ、Visual Comparisons が実行されます。

スナップショット パスを構成する

特定のプロジェクトまたは構成全体に対してスナップショット パスを構成するには、snapshotPathTemplate オプションを設定できます。

// This path is exactly like the default path, but replaces OS with hardcoded value that is used on the service (linux).
config.snapshotPathTemplate = '{snapshotDir}/{testFileDir}/{testFileName}-snapshots/{arg}{-projectName}-linux{ext}'

// This is an alternative path where you keep screenshots in a separate directory, one per service OS (linux in this case).
config.snapshotPathTemplate = '{testDir}/__screenshots__/{testFilePath}/linux/{arg}{ext}';

サービス構成の例

Visual Comparisons を実行し、snapshotPathTemplate に対してパスを構成するサービス構成の例を次に示します。

import { defineConfig } from '@playwright/test';
import { createAzurePlaywrightConfig, ServiceOS } from '@azure/playwright';
import { DefaultAzureCredential } from '@azure/identity';
import config from './playwright.config';

/* Learn more about service configuration at https://aka.ms/pww/docs/config */
export default defineConfig(
  config,
  createAzurePlaywrightConfig(config, {
    exposeNetwork: '<loopback>',
    connectTimeout: 30000,
    os: ServiceOS.LINUX,
    credential: new DefaultAzureCredential()
  }),
  {
    ignoreSnapshots: false,
    // Enable screenshot testing and configure directory with expectations. 
    snapshotPathTemplate: `{testDir}/__screenshots__/{testFilePath}/${ServiceOS.LINUX}/{arg}{ext}`,
  }
);

関連コンテンツ

  • Last updated on