Playwright Çalışma Alanları ile görsel karşılaştırmaları yapılandırma

Bu makalede, Playwright Çalışma Alanlarını kullanırken Playwright'ın görsel karşılaştırma testlerini düzgün bir şekilde yapılandırmayı öğreneceksiniz. Playwright'ın anlık görüntüleri yerel ve uzak tarayıcılar arasında farklılık gösterdiğinden beklenmeyen test hataları oluşabilir.

Arka plan

Playwright Test çalıştırıcısı, beklenen ekran görüntüsü yolunun bir parçası olarak konak işletim sistemini kullanır. Testleri konak makinenizden farklı bir işletim sisteminde uzak tarayıcılar kullanarak çalıştırıyorsanız görsel karşılaştırma testleri başarısız olur. Önerimiz, yalnızca hizmeti kullanırken görsel karşılaştırmaları çalıştırmaktır. Hizmette ekran görüntüleri alıyorsanız, eşleşmedikleri için bunları yerel kurulumunuzla karşılaştırmanız gerekmez.

IgnoreSnapshots'ı yapılandırma

Bu seçeneği yalnızca Playwright Çalışma Alanlarını kullanırken görsel karşılaştırmalar çalıştırmak için kullanabilirsinizignoreSnapshots.

1. Hizmeti kullanmayan özgün ignoreSnapshots: true değerde ayarlayınplaywright.config.ts.
2. içinde ignoreSnapshots: falseayarlayınplaywright.service.config.ts.

Hizmeti kullanırken yapılandırması geçersiz kılar playwright.config.tsve görsel karşılaştırmalar çalıştırır.

Anlık görüntü yolunu yapılandırma

Belirli bir projenin veya yapılandırmanın tamamının anlık görüntü yollarını yapılandırmak için seçeneğisnapshotPathTemplate

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

Örnek hizmet yapılandırması

Görsel karşılaştırmalar çalıştıran ve yolunu snapshotPathTemplateyapılandıran örnek hizmet yapılandırması:

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

İlgili içerik

• Playwright Görsel Karşılaştırmaları hakkında daha fazla bilgi edinin.