Поделиться через

Настройка визуальных сравнений с рабочими областями Playwright

В этой статье вы узнаете, как правильно настроить тесты визуального сравнения Playwright при использовании рабочих областей Playwright. Непредвиденные сбои теста могут возникать, так как моментальные снимки Playwright отличаются между локальными и удаленными браузерами.

Это важно

Рабочие области playwright в настоящее время находятся в предварительной версии. Юридические условия, применимые к функциям Azure, которые находятся в бета-версии, предварительной версии или в противном случае еще не выпущены в общедоступную версию, см . в дополнительных условиях использования для предварительных версий Microsoft Azure.

Предыстория

Средство выполнения тестов playright использует операционную систему узла в рамках ожидаемого пути снимок экрана. Если вы выполняете тесты с помощью удаленных браузеров в операционной системе, отличной от операционной системы, тесты визуального сравнения завершаются сбоем. Наша рекомендация заключается в том, чтобы выполнять только визуальные сравнения при использовании службы. Если вы выполняете снимки экрана в службе, их не нужно сравнивать с локальной настройкой, так как они не соответствуют.

Настройка ignoreSnapshots

Вы можете использовать ignoreSnapshots этот параметр для выполнения только визуальных сравнений при использовании рабочих областей Playwright.

  1. Задайте ignoreSnapshots: true в исходном playwright.config.ts формате, который не использует службу.
  2. Установите ignoreSnapshots: false в playwright.service.config.ts.

При использовании службы его конфигурация переопределяется playwright.config.tsи выполняет визуальные сравнения.

Настройка пути моментального снимка

Чтобы настроить пути моментального снимка для определенного проекта или всей конфигурации, можно задать 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}';

Пример конфигурации службы

Пример конфигурации службы, которая выполняет визуальные сравнения и настраивает путь для snapshotPathTemplate:

import { defineConfig } from '@playwright/test';
import { getServiceConfig, 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,
  getServiceConfig(config, {
    exposeNetwork: '<loopback>',
    timeout: 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}`,
  }
);

Связанный контент