Визуальные сравнения

Введение​

Playwright Test включает возможность создания и визуального сравнения снимков экрана с помощью await expect(page).toHaveScreenshot(). При первом запуске Playwright Test сгенерирует эталонные снимки экрана. Последующие запуски сравнят их с эталоном.

import { test, expect } from '@playwright/test';

test('example test', async ({ page }) => {
  await page.goto('https://playwright.dev');
  await expect(page).toHaveScreenshot();
});

предупреждение

Отображение в браузере может различаться в зависимости от ОС хоста, версии, настроек, аппаратного обеспечения, источника питания (аккумулятор или адаптер), режима работы без графического интерфейса и других факторов. Для получения согласованных снимков экрана запускайте тесты в той же среде, где были сгенерированы эталонные снимки.

Генерация снимков экрана​

При первом запуске тестов, исполняющая система сообщит:

Error: A snapshot doesn't exist at example.spec.ts-snapshots/example-test-1-chromium-darwin.png, writing actual.

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

Имя папки с эталонными ожиданиями начинается с имени файла вашего теста:

drwxr-xr-x  5 user  group  160 Jun  4 11:46 .
drwxr-xr-x  6 user  group  192 Jun  4 11:45 ..
-rw-r--r--  1 user  group  231 Jun  4 11:16 example.spec.ts
drwxr-xr-x  3 user  group   96 Jun  4 11:46 example.spec.ts-snapshots

Имя снимка example-test-1-chromium-darwin.png состоит из нескольких частей:

• example-test-1.png - автоматически сгенерированное имя снимка. В качестве альтернативы вы можете указать имя снимка в качестве первого аргумента метода toHaveScreenshot().

  await expect(page).toHaveScreenshot('landing.png');

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

Имя и путь к снимку можно настроить с помощью snapshotPathTemplate в конфигурации Playwright.

Обновление снимков​

Иногда вам нужно обновить эталонный снимок, например, когда страница изменилась. Сделайте это с флагом --update-snapshots.

npx playwright test --update-snapshots

Обратите внимание, что snapshotName также принимает массив сегментов пути к файлу снимка, например, expect().toHaveScreenshot(['relative', 'path', 'to', 'snapshot.png']). Однако этот путь должен оставаться в пределах каталога снимков для каждого файла теста (например, a.spec.js-snapshots), в противном случае произойдет ошибка.

Параметры​

maxDiffPixels​

Playwright Test использует библиотеку pixelmatch. Вы можете передать различные параметры, чтобы изменить ее поведение:

import { test, expect } from '@playwright/test';

test('example test', async ({ page }) => {
  await page.goto('https://playwright.dev');
  await expect(page).toHaveScreenshot({ maxDiffPixels: 100 });
});

Если вы хотите использовать значение по умолчанию для всех тестов в проекте, вы можете указать его в конфигурации Playwright, либо глобально, либо по проектам:

import { defineConfig } from '@playwright/test';
export default defineConfig({
  expect: {
    toHaveScreenshot: { maxDiffPixels: 100 },
  },
});

stylePath​

Вы можете применить пользовательский стилевой лист к вашей странице при создании снимка. Это позволяет отфильтровать динамические или изменчивые элементы, улучшая детерминизм снимков.

iframe {
  visibility: hidden;
}

import { test, expect } from '@playwright/test';

test('example test', async ({ page }) => {
  await page.goto('https://playwright.dev');
  await expect(page).toHaveScreenshot({ stylePath: path.join(__dirname, 'screenshot.css') });
});

Если вы хотите использовать значение по умолчанию для всех тестов в проекте, вы можете указать его в конфигурации Playwright, либо глобально, либо по проектам:

import { defineConfig } from '@playwright/test';
export default defineConfig({
  expect: {
    toHaveScreenshot: {
      stylePath: './screenshot.css'
    },
  },
});

Снимки неизображений​

Помимо снимков экрана, вы можете использовать expect(value).toMatchSnapshot(snapshotName) для сравнения текста или произвольных двоичных данных. Playwright Test автоматически определяет тип содержимого и использует соответствующий алгоритм сравнения.

Здесь мы сравниваем текстовое содержимое с эталоном.

import { test, expect } from '@playwright/test';

test('example test', async ({ page }) => {
  await page.goto('https://playwright.dev');
  expect(await page.textContent('.hero__title')).toMatchSnapshot('hero.txt');
});

Снимки хранятся рядом с файлом теста в отдельной директории. Например, файл my.spec.ts будет создавать и сохранять снимки в каталоге my.spec.ts-snapshots. Вы должны добавить этот каталог в систему управления версиями (например, git) и просматривать любые изменения в нем.