Partilhar via

Configurar comparações visuais com Playwright Workspaces

Neste artigo, você aprenderá a configurar corretamente os testes de comparação visual do Playwright ao usar o Playwright Workspaces. Falhas de teste inesperadas podem ocorrer porque os instantâneos do Playwright diferem entre navegadores locais e remotos.

Contexto geral

O Playwright Test runner usa o sistema operacional host como parte do caminho de captura de tela esperado. Se você estiver executando testes usando navegadores remotos em um sistema operacional diferente do seu computador host, os testes de comparação visual falharão. Nossa recomendação é executar apenas comparações visuais ao usar o serviço. Se você estiver fazendo capturas de tela no serviço, não há necessidade de compará-las com sua configuração local, pois elas não correspondem.

Configurar ignoreSnapshots

Você pode usar a ignoreSnapshots opção apenas para executar comparações visuais ao usar espaços de trabalho do Playwright.

  1. Definido ignoreSnapshots: true no original playwright.config.ts que não usa o serviço.
  2. Situado ignoreSnapshots: false em playwright.service.config.ts.

Quando você está usando o serviço, sua configuração substitui playwright.config.tse executa comparações visuais.

Configurar o caminho do instantâneo

Para configurar caminhos de instantâneo para um projeto específico ou toda a configuração, você pode definir snapshotPathTemplate a opção.

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

Exemplo de configuração de serviço

Exemplo de configuração de serviço que executa comparações visuais e configura o caminho para 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}`,
  }
);

Conteúdo relacionado

  • Last updated on