Playwright 작업 영역을 사용하여 시각적 비교 구성

이 문서에서는 Playwright 작업 영역을 사용할 때 Playwright의 시각적 비교 테스트를 올바르게 구성하는 방법을 알아봅니다. Playwright의 스냅샷은 로컬 브라우저와 원격 브라우저 간에 다르기 때문에 예기치 않은 테스트 실패가 발생할 수 있습니다.

배경

Playwright 테스트 실행기는 호스트 OS를 예상 스크린샷 경로의 일부로 사용합니다. 호스트 컴퓨터와 다른 OS에서 원격 브라우저를 사용하여 테스트를 실행하는 경우 시각적 비교 테스트가 실패합니다. 서비스를 사용할 때는 시각적 비교만 실행하는 것이 좋습니다. 서비스에서 스크린샷을 찍는 경우 일치하지 않으므로 로컬 설정과 비교할 필요가 없습니다.

ignoreSnapshots 구성

이 옵션은 Playwright 작업 영역을 사용하는 경우에만 시각적 비교를 실행할 수 ignoreSnapshots 있습니다.

1. 서비스를 사용하지 않는 원본 ignoreSnapshots: true에 playwright.config.ts를 설정합니다.
2. ignoreSnapshots: false에 playwright.service.config.ts를 설정합니다.

서비스를 사용하는 경우 해당 구성이 playwright.config.ts를 재정의하고 시각적 비교를 실행합니다.

스냅샷 경로 구성

특정 프로젝트 또는 전체 구성에 대한 스냅샷 경로를 구성하려면 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}';

서비스 구성 예

시각적 비교를 실행하고 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}`,
  }
);

관련 콘텐츠

• Playwright Visual Comparisons에 대해 자세히 알아봅니다.