Skip to main content

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

Введение​

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

example.spec.ts
import { test, expect } from '@playwright/test';

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

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

Генерация скриншотов​

Когда вы запускаете тест в первый раз, тестовый раннер сообщит:

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.

Обновление скриншотов​

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

npx playwright test --update-snapshots

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

Опции​

maxDiffPixels​

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

example.spec.ts
import { test, expect } from '@playwright/test';

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

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

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

stylePath​

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

screenshot.css
iframe {
  visibility: hidden;
}
example.spec.ts
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, либо глобально, либо для каждого проекта:

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

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

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

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

example.spec.ts
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) и проверять любые изменения в ней.