Konfigurowanie porównań wizualizacji z obszarami roboczymi dramaturgu

Z tego artykułu dowiesz się, jak prawidłowo skonfigurować testy porównania wizualnego dramaturga podczas korzystania z obszarów roboczych Dramaturg. Mogą wystąpić nieoczekiwane błędy testu, ponieważ migawki dramaturga różnią się między przeglądarkami lokalnymi i zdalnymi.

Kontekst

Moduł uruchamiający test playwright używa systemu operacyjnego hosta w ramach oczekiwanej ścieżki zrzutu ekranu. Jeśli uruchamiasz testy przy użyciu przeglądarek zdalnych w innym systemie operacyjnym niż na maszynie hosta, testy porównania wizualnego kończą się niepowodzeniem. Naszym zaleceniem jest uruchamianie porównań wizualnych tylko w przypadku korzystania z usługi. Jeśli wykonujesz zrzuty ekranu w usłudze, nie ma potrzeby porównywania ich z konfiguracją lokalną, ponieważ nie są one zgodne.

Konfigurowanie funkcji ignoreSnapshots

Możesz użyć ignoreSnapshots opcji , aby uruchamiać porównania wizualne tylko w przypadku korzystania z obszarów roboczych dramaturgu.

1. Ustaw ignoreSnapshots: true w oryginalnej playwright.config.ts , która nie korzysta z usługi.
2. Ustaw ignoreSnapshots: false w pliku playwright.service.config.ts.

Gdy używasz usługi, jej konfiguracja zastępuje playwright.config.ts, i uruchamia porównania wizualne.

Konfigurowanie ścieżki migawki

Aby skonfigurować ścieżki migawek dla określonego projektu lub całej konfiguracji, można ustawić snapshotPathTemplate opcję.

// 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}';

Przykładowa konfiguracja usługi

Przykładowa konfiguracja usługi, która uruchamia porównania wizualne i konfiguruje ścieżkę dla elementu 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}`,
  }
);

Treści powiązane

• Dowiedz się więcej o porównaniach wizualnych dramaturgu.