Mengonfigurasi perbandingan visual dengan Playwright Workspaces

Dalam artikel ini, Anda mempelajari cara mengonfigurasi pengujian perbandingan visual Playwright dengan benar saat menggunakan Playwright Workspaces. Kegagalan pengujian tak terduga dapat terjadi karena rekam jepret Playwright berbeda antara browser lokal dan jarak jauh.

Latar Belakang

Runner Uji Playwright menggunakan OS host sebagai bagian dari jalur cuplikan layar yang diharapkan. Jika Anda menjalankan pengujian menggunakan browser jarak jauh pada OS yang berbeda dari komputer host Anda, pengujian perbandingan visual gagal. Rekomendasi kami adalah hanya menjalankan perbandingan visual saat menggunakan layanan. Jika Anda mengambil cuplikan layar pada layanan, Anda tidak perlu membandingkannya dengan penyiapan lokal Anda karena tidak cocok.

Mengonfigurasi ignoreSnapshots

Anda dapat menggunakan ignoreSnapshots opsi untuk hanya menjalankan perbandingan visual saat menggunakan Playwright Workspaces.

1. Atur ignoreSnapshots: true dalam aslinya playwright.config.ts yang tidak menggunakan layanan.
2. Atur ignoreSnapshots: false dalam playwright.service.config.ts.

Saat Anda menggunakan layanan, konfigurasinya mengambil playwright.config.tsalih , dan menjalankan perbandingan visual.

Mengonfigurasi jalur rekam jepret

Untuk mengonfigurasi jalur rekam jepret untuk proyek tertentu atau seluruh konfigurasi, Anda dapat mengatur snapshotPathTemplate opsi.

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

Contoh konfigurasi layanan

Contoh konfigurasi layanan yang menjalankan perbandingan visual dan mengonfigurasi jalur untuk 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}`,
  }
);

Konten terkait

• Pelajari selengkapnya tentang Perbandingan Visual Playwright.