Vizuális összehasonlítások konfigurálása Playwright-munkaterületekkel

Ebben a cikkben megtudhatja, hogyan konfigurálhatja megfelelően a Playwright vizuális összehasonlító tesztjeit a Playwright-munkaterületek használatakor. Váratlan teszthibák fordulhatnak elő, mert a Playwright pillanatképei különböznek a helyi és a távoli böngészők között.

Háttér

A playwright tesztfuttató a gazdagép operációs rendszerét használja a várt képernyőképi útvonal részeként. Ha a gazdaszámítógépétől eltérő operációs rendszeren futó távoli böngészőkkel futtat teszteket, a vizualizáció-összehasonlító tesztek sikertelenek lesznek. Javasoljuk, hogy csak vizualizációs összehasonlításokat futtasson a szolgáltatás használatakor. Ha képernyőképeket készít a szolgáltatásról, nincs szükség a helyi beállítással való összehasonlításra, mivel azok nem egyeznek.

IgnoreSnapshots konfigurálása

A beállítássalignoreSnapshots csak vizuális összehasonlításokat futtathat a Playwright-munkaterületek használatakor.

1. Állítsa be ignoreSnapshots: true az eredetiben playwright.config.ts , amely nem használja a szolgáltatást.
2. Beállítva ignoreSnapshots: false : playwright.service.config.ts.

A szolgáltatás használatakor a konfiguráció felülbírálja a konfigurációt playwright.config.ts, és vizuális összehasonlításokat futtat.

A pillanatkép elérési útjának konfigurálása

Ha egy adott projekthez vagy a teljes konfigurációhoz szeretne pillanatkép-elérési utakat konfigurálni, beállíthatja snapshotPathTemplate a beállítást.

// 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élda szolgáltatáskonfigurációra

Példa szolgáltatáskonfigurációra, amely vizualizáció-összehasonlításokat futtat, és konfigurálja a következő snapshotPathTemplateelérési utat:

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}`,
  }
);

Kapcsolódó tartalom

• További információ a Playwright-vizualizáció-összehasonlításokról.