Configurar comparações visuais com Playwright Workspaces

Neste artigo, você aprenderá a configurar corretamente os testes de comparação visual do Playwright ao usar Playwright Workspaces. Podem ocorrer falhas de teste inesperadas devido aos instantâneos do Playwright diferirem entre os navegadores locais e remotos.

Contexto

O Executor de teste do Playwright usa o SO (sistema operacional) host como parte do caminho de captura de tela esperado. Se você estiver executando testes usando navegadores remotos em um SO diferente do computador host, os testes de comparação visual falharão. Nossa recomendação é executar comparações visuais somente ao usar o serviço. Se estiver fazendo capturas de tela no serviço, não será necessário compará-las com a configuração local, pois elas não correspondem.

Configurar o ignoreSnapshots

Você pode usar a opção ignoreSnapshots para apenas executar as comparações visuais ao usar o Playwright Workspaces.

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

Quando estiver usando o serviço, sua configuração substitui playwright.config.ts e executa comparações visuais.

Configurar o caminho do instantâneo

Para configurar caminhos de instantâneo para um projeto específico ou para toda a configuração, você pode definir a opção 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}';

Configuração de serviço de exemplo

Configuração de serviço de exemplo 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

• Saiba mais sobre Comparações Visuais do Playwright.