Sdílet prostřednictvím

Konfigurace vizuálních porovnání pomocí pracovních prostorů Playwright

V tomto článku se dozvíte, jak správně nakonfigurovat vizuální srovnávací testy Playwright při použití pracovních prostorů Playwright. K neočekávaným selháním testu může dojít, protože snímky playwrightu se mezi místními a vzdálenými prohlížeči liší.

Background

Playwright Test Runner používá hostitelský operační systém jako součást očekávané cesty snímku obrazovky. Pokud testy spouštíte pomocí vzdálených prohlížečů na jiném operačním systému než na hostitelském počítači, testy porovnání vizuálů selžou. Naším doporučením je spustit pouze porovnání vizuálů při použití služby. Pokud ve službě děláte snímky obrazovky, nemusíte je porovnávat s místním nastavením, protože se neshodují.

Konfigurace ignorovanýchSnapshots

Pomocí této možnosti můžeteignoreSnapshots spouštět pouze porovnání vizuálů při použití pracovních prostorů Playwright.

  1. Nastavte ignoreSnapshots: true v originálu playwright.config.ts , který službu nepoužívá.
  2. Nastavit ignoreSnapshots: false v playwright.service.config.ts.

Při používání služby se jeho konfigurace přepíše playwright.config.tsa spustí porovnání vizuálů.

Konfigurace cesty k snímku

Chcete-li nakonfigurovat cesty snímků pro konkrétní projekt nebo celou konfiguraci, můžete nastavit snapshotPathTemplate možnost.

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

Příklad konfigurace služby

Příklad konfigurace služby, která spouští porovnání vizuálů a konfiguruje cestu pro 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}`,
  }
);

Související obsah

  • Last updated on