Понимание визуальных сравнений в драматургии

Привет!

Сегодня я хочу поговорить о Визуальных сравнениях с Драматургом.

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

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

Но не теряйте времени, давайте посмотрим, как это работает.

Я хочу использовать компонент Square для этого примера, но вы должны провести его рефакторинг, прежде чем переходить к тесту. Во-первых, вам нужно переместить изображения PNG X и O из общей папки в папку компонента Square. После этого вам нужно реорганизовать компонент, чтобы он импортировал эти изображения и использовал их для рендеринга значка. Результат будет примерно таким:

Структура папок

 Square
    O.png
    Square.module.scss
    Square.tsx
    X.png

Квадратный компонент

import { TicTacToeValue } from '../../models/TicTacToeValue';
import { Nullable } from '../../utils/Nullable';
import Icon from '../Icon/Icon';
import OIcon from './O.png';
import styles from './Square.module.scss';
import XIcon from './X.png';

interface SquareProps {
  value: Nullable<TicTacToeValue>;
  onSelect: () => void
}

export default function Square(
  { value, onSelect }: SquareProps
) {

  const icon = value === 'X' ? XIcon : OIcon;

  return (
    <button
      type='button'
      className={styles.Square}
      onClick={onSelect}>
      {value && <Icon src={icon} title={value} />}
    </button>
  )
}

Отлично, теперь вы готовы создать свой первый тест для проверки визуальных сравнений.

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

Прежде всего, вам нужно создать новый файл с именем src/components/Square/Square.spec.tsx, который будет содержать ваши тесты. В качестве первого примера вы можете создать новый тест, который проверяет, показывает ли компонент Square значок X, если значение равно X. Для этого вам нужно сделать такой тест

import { expect, test } from '@playwright/experimental-ct-react';
import Square from './Square';

test.describe('Square', () => {
  test('should show the X icon without regression', async ({ mount, page }) => {
    await mount(<Square value={'X'} onSelect={() => { }} />);
    await expect(page).toHaveScreenshot();
  });
})

Как вы могли заметить, в этой статье показаны визуальные сравнения при тестировании компонентов, но вы можете использовать это и в тестах e2e. Хорошо, теперь пришло время увидеть результат, выполнив команду npm run test-ct. Полагаю, результат не такой, как ожидалось. На самом деле результат показывает такую ​​ошибку:

Error: A snapshot doesn't exist at playwright-series/snapshots/components/Square/Square.spec.tsx-snapshots/Square-should-show-the-X-icon-without-regression-1-chromium-darwin.png, writing actual.

Как вы понимаете, Playwright пытается запустить ваши тесты, но не находит моментального снимка для сравнения с вашим результатом, поэтому выдает ошибку для каждой платформы (Chrome, Firefox и WebKit). Однако вы можете заметить, что в вашем проекте появились три новых файла. Эти файлы являются моментальным снимком вашего теста. Вы можете найти их в корне вашего проекта в папке __snapshots__ . Отсюда Playwright может запустить ваш тест и проверить, соответствует ли результат этим снимкам. Чтобы проверить это, вы можете повторно запустить предыдущую команду и заметить, что результат будет лучше, и ваши тесты будут пройдены.

Чтобы еще раз проверить, работает ли визуальное сравнение, вы можете изменить размеры значков в файле Square.module.scss. Например, от 100 x 100 пикселей до 101 x 101 пикселей.

.Square {
  width: 101px;
  height: 101px;
  background-color: #fff;
  border: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

Если вы повторно запустите команду npm run test-ct, результат будет примерно таким:

3 failed
    [chromium] components/Square/Square.spec.tsx:6:3 Square should show the X icon without regression
    [firefox] components/Square/Square.spec.tsx:6:3 Square should show the X icon without regression
    [webkit] components/Square/Square.spec.tsx:6:3 Square should show the X icon without regression

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

Когда мы работаем с визуальным сравнением, как вы можете себе представить, ввести регрессию очень просто, пиксель разницы и бум, набор терпит неудачу. Драматург знает об этой проблеме и позволяет вам быть менее строгим в таких случаях. Важно помнить, что по умолчанию Playwright является строгим и проверяет каждый пиксель различия, но вы можете настроить его с помощью порога. Наиболее распространенными являются maxDiffPixelRatio, maxDiffPixels или порог. Каждая конфигурация позволяет вам быть бездельником в разных случаях. Например, если вы выберете конфигурацию maxDiffPixels, вы можете написать предыдущий тест таким же образом

test('should show the X icon without regression', async ({ mount, page }) => {
  await mount(<Square value={'X'} onSelect={() => { }} />);
  await expect(page).toHaveScreenshot({ maxDiffPixels: 500 });
});

Если вы запустите команду npm run test-ct , теперь набор тестов пройден, и, как вы можете себе представить, Playwright протестировал ваш новый снимок, используя конфигурацию maxDiffPixels. Следовательно, даже если размер отличается, результат будет приемлемым, поскольку он соответствует конфигурации maxDiffPixels.

Эти типы конфигураций могут быть установлены по умолчанию, если вы хотите. Например, вы можете решить, что все тесты визуального сравнения должны иметь maxDiffPixels, равное 500. Для этого вы можете настроить Playwright на использование этой конфигурации по умолчанию. В файле конфигурации Playwright вы можете установить ожидаемый метод с этой конфигурацией:

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

И последнее, но не менее важное: иногда требуется изменение структуры компонента. В этих случаях вам необходимо изменить снимки, чтобы в будущем у Playwright были новые сравнительные изображения для проверки результатов. Для этого вы можете запустить свой тест с параметром --update-snapshots. Это указывает Playwright, что снимки устарели и необходимо заменить предыдущие результаты новыми.

Хорошо, я полагаю, вы хорошо представляете себе, как работает визуальное сравнение в Playwright, и вы можете начать играть с ним без проблем. Я думаю, что это все, что касается визуального сравнения. Надеюсь, вам понравился этот контент, и если у вас есть какие-либо вопросы, добро пожаловать!

До скорой встречи, народ

До свидания

Вы можете найти исходный код этой статьи здесь.

:::информация Также опубликовано здесь.

:::