Partager via

Configurer des comparaisons visuelles avec des espaces de travail playwright

Dans cet article, vous allez apprendre à configurer correctement les tests de comparaison visuelle de Playwright lors de l’utilisation d’espaces de travail Playwright. Des échecs de test inattendus peuvent se produire, car les instantanés de Playwright diffèrent entre les navigateurs locaux et distants.

Contexte

L’exécuteur de test Playwright utilise le système d’exploitation hôte dans le cadre du chemin d’accès de capture d’écran attendu. Si vous exécutez des tests à l’aide de navigateurs distants sur un système d’exploitation différent de celui de votre ordinateur hôte, les tests de comparaison visuelle échouent. Notre recommandation est d’exécuter uniquement des comparaisons visuelles lors de l’utilisation du service. Si vous effectuez des captures d’écran sur le service, il n’est pas nécessaire de les comparer à votre configuration locale, car elles ne correspondent pas.

Configurer ignoreSnapshots

Vous pouvez utiliser l’optionignoreSnapshots pour exécuter uniquement des comparaisons visuelles lors de l’utilisation d’espaces de travail playwright.

  1. Défini ignoreSnapshots: true dans le playwright.config.ts original qui n’utilise pas le service.
  2. Défini ignoreSnapshots: false dans playwright.service.config.ts.

Lorsque vous utilisez le service, sa configuration remplace playwright.config.ts et exécute des comparaisons visuelles.

Configurer le chemin d’accès d’instantané

Pour configurer des chemins d’instantané pour un projet particulier ou l’ensemble de la configuration, vous pouvez définir l’option 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}';

Exemple de configuration de service

Exemple de configuration de service qui exécute des comparaisons visuelles et configure le chemin d’accès pour 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}`,
  }
);

Contenu connexe

  • Last updated on