Konfigurieren visueller Vergleiche mit Playwright Workspaces

In diesem Artikel erfahren Sie, wie Sie die visuellen Vergleichstests von Playwright bei Verwendung von Playwright Workspaces ordnungsgemäß konfigurieren. Unerwartete Testfehler können auftreten, da sich die Momentaufnahmen von Playwright zwischen lokalen und Remotebrowsern unterscheiden.

Hintergrund

Der Playwright Test Runner verwendet das Hostbetriebssystem als Teil des erwarteten Screenshotpfads. Wenn Sie Tests unter Verwendung von Remotebrowsern auf einem anderen Betriebssystem als auf Ihrem Hostcomputer ausführen, schlagen die Tests für den visuellen Vergleich fehl. Unsere Empfehlung besteht darin, bei der Verwendung des Diensts nur visuelle Vergleiche auszuführen. Wenn Sie Screenshots auf dem Dienst erstellen, müssen Sie sie nicht mit Ihrem lokalen Setup vergleichen, da sie nicht übereinstimmen.

Konfigurieren von ignoreSnapshots

Sie können die ignoreSnapshots Option verwenden, um nur visuelle Vergleiche auszuführen, wenn Sie Playwright-Arbeitsbereiche verwenden.

1. Legen Sie ignoreSnapshots: true das Original playwright.config.ts fest, das den Dienst nicht verwendet.
2. Legen Sie ignoreSnapshots: false in playwright.service.config.tsfest.

Wenn Sie den Dienst wieder verwenden, werden die zugehörigen Konfigurationsüberschreibungen playwright.config.tsaußer Kraft gesetzt und visuelle Vergleiche ausgeführt.

Konfigurieren des Momentaufnahmepfads

Um Momentaufnahmepfade für ein bestimmtes Projekt oder die gesamte Konfiguration zu konfigurieren, können Sie die snapshotPathTemplate Option.

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

Beispieldienstkonfiguration

Beispieldienstkonfiguration, die visuelle Vergleiche ausführt und den Pfad für snapshotPathTemplate konfiguriert:

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

Verwandte Inhalte

• Lernen Sie mehr über Playwright Visual Comparisons.