Скриншоты и визуальное тестирование

Визуальные тесты являются важной частью обеспечения качества фронтенд-разработки. Они позволяют убедиться, что интерфейс приложения выглядит и ведет себя так, как ожидается, на всех стадиях разработки. В отличие от традиционных юнит-тестов, которые проверяют логику кода, визуальные тесты фокусируются на отображении элементов на экране. Jest, как популярный инструмент для тестирования в экосистеме JavaScript, может быть использован в связке с дополнительными библиотеками для реализации визуальных тестов.

Проблемы визуального тестирования

Тестирование визуального аспекта приложения сталкивается с рядом сложностей:

  • Разнообразие разрешений экранов — приложения могут выглядеть по-разному на разных устройствах.
  • Обновления UI — изменения в дизайне могут привести к неожиданным сбоям.
  • Реактивность и анимации — сложные визуальные элементы могут быть трудно тестируемыми с помощью традиционных методов.

Использование скриншотов помогает решить многие из этих проблем, предоставляя способ зафиксировать «снимок» состояния интерфейса и сравнивать его с эталонным значением.

Библиотеки для визуального тестирования с Jest

Для реализации визуальных тестов в Jest можно использовать несколько популярных библиотек:

  1. Jest Image Snapshot Это одна из самых распространенных библиотек для визуального тестирования в Jest. Она позволяет делать снимки экрана и сравнивать их с эталонными изображениями, чтобы выявить возможные изменения в UI. Jest Image Snapshot обеспечивает простой интерфейс для сохранения и проверки скриншотов в рамках тестов.

  2. Puppeteer Puppeteer — это библиотека для автоматизации браузера, которая позволяет делать скриншоты и генерировать PDF-документы. Puppeteer идеально подходит для сценариев, где требуется взаимодействовать с веб-страницей перед созданием скриншота, например, кликать по элементам или прокручивать страницу.

  3. Playwright Playwright — это более новая альтернатива Puppeteer, разработанная Microsoft. Она позволяет работать с несколькими браузерами и использовать более сложные сценарии для визуального тестирования, поддерживая Chromium, Firefox и WebKit. Playwright можно интегрировать с Jest для автоматизации тестов.

Основы работы с Jest Image Snapshot

Для начала работы с Jest Image Snapshot необходимо установить библиотеку:

npm install --save-dev jest-image-snapshot

После установки библиотеки её необходимо настроить. Для этого в файле конфигурации Jest (например, jest.setup.js) добавляют следующий код:

import { toMatchImageSnapshot } from 'jest-image-snapshot';

expect.extend({ toMatchImageSnapshot });

Далее можно приступать к написанию тестов. Для этого создается тест, который будет делать скриншот страницы с использованием библиотеки Puppeteer, а затем сравнивать его с эталонным изображением.

Пример теста:

import puppeteer from 'puppeteer';

describe('Visual Regression Test', () => {
  let browser;
  let page;

  beforeAll(async () => {
    browser = await puppeteer.launch();
    page = await browser.newPage();
  });

  afterAll(async () => {
    await browser.close();
  });

  it('should match the previous screenshot', async () => {
    await page.goto('http://localhost:3000');
    const screenshot = await page.screenshot();
    expect(screenshot).toMatchImageSnapshot();
  });
});

В этом примере используется Puppeteer для загрузки страницы и создания скриншота. Затем, при помощи метода toMatchImageSnapshot(), изображение сравнивается с эталонным, сохраненным ранее.

Сравнение изображений

Одной из ключевых особенностей Jest Image Snapshot является возможность настройки порога для сравнения изображений. Это может быть полезно в случае, когда небольшие изменения в интерфейсе не должны приводить к ошибке теста.

В конфигурации можно указать параметры, такие как:

  • failureThreshold — максимальный процент различий, который допустим между текущим и эталонным изображением.
  • failureThresholdType — тип порога (pixel или percentage).

Пример:

expect(screenshot).toMatchImageSnapshot({
  failureThreshold: 0.01, // 1% допустимых различий
  failureThresholdType: 'percentage',
});

Обработка обновлений эталонных изображений

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

Для этого достаточно удалить старый скриншот из папки с эталонными изображениями, и при следующем запуске теста Jest Image Snapshot автоматически создаст новый эталонный снимок.

Визуальные тесты с использованием Playwright

Playwright предлагает более широкие возможности для тестирования различных браузеров. Подобно Puppeteer, Playwright позволяет делать скриншоты, но также имеет дополнительные функции для тестирования реактивных и динамичных веб-страниц.

Для работы с Playwright и Jest необходимо установить библиотеку:

npm install --save-dev playwright

Пример теста с использованием Playwright:

import { chromium } from 'playwright';

describe('Visual Regression Test with Playwright', () => {
  let browser;
  let page;

  beforeAll(async () => {
    browser = await chromium.launch();
    page = await browser.newPage();
  });

  afterAll(async () => {
    await browser.close();
  });

  it('should match the previous screenshot', async () => {
    await page.goto('http://localhost:3000');
    const screenshot = await page.screenshot();
    expect(screenshot).toMatchImageSnapshot();
  });
});

Playwright поддерживает не только создание скриншотов, но и управление состоянием страницы перед захватом изображения, что позволяет тестировать более сложные UI-сценарии.

Сложности и лучшие практики

  1. Мелкие изменения дизайна Визуальные тесты чувствительны к изменениям. Даже незначительные обновления могут привести к тому, что тест не пройдет, поэтому важно тщательно настраивать порог различий и регулярно обновлять эталонные изображения.

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

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

  4. Тестирование анимаций Анимации и динамические изменения UI могут быть трудными для тестирования. В таких случаях можно использовать методы пауз и задержек для того, чтобы дождаться завершения анимации перед созданием скриншота.

Заключение

Использование скриншотов и визуальных тестов с Jest позволяет значительно улучшить качество фронтенд-разработки, обеспечивая уверенность в том, что интерфейс приложения остается стабильным и не подвергается нежелательным изменениям. Совмещение таких инструментов, как Jest Image Snapshot, Puppeteer и Playwright, позволяет создавать гибкие и мощные системы для автоматизации визуальных тестов.

Оглавление