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

Введение​

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 будет использовано имя проекта.

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

По умолчанию снимки сохраняются в формате PNG. Укажите для снимка имя с расширением .webp, чтобы сохранить его в формате WebP, который также не приводит к потере качества:

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

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

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

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

npx playwright test --update-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) и проверяйте все изменения в нём.