Перейти к основному содержимому

Визуальное тестирование

В testplane реализовано визуальное тестирование, с помощью которого пользователь может проверить визуальные изменения отдельного компонента, вьюпорта или всей страницы целиком. Для анализа тестов, сохранения/обновления измененных изображений и запуска тестов рекомендуется использовать плагин html-reporter, который предоставляет удобный UI для всех действий.

Html-report

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

Для скринштных проверок Testplane предоставляет команду assertView, которая позволяет сделать скриншот конкретного элемента или всего вьюпорта. При вызове команды assertView осуществляется поиск нужного элемента на странице с его автоматическим ожиданием. По умолчанию перед снятием скриншота на странице будет отключена анимация, чтобы исключить в будущем нестабильность теста из-за изменяющегося состояния элемента. После снятия скриншота будет произведено сравнение полученного изображения с эталонным. Если эталонного изображения еще не существует, то его необходимо сохранить с помощью UI html-reporter или CLI-опции --update-refs. Для сравнения изображений используется собственная библиотека looks-same, которая отличается от конкурентов высокой производительностью и точностью сравнения.

При сравнении учитываются следующие настройки:

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

Использование​

await browser.assertView(state, options);
await browser.assertView(state, selector, options);
await element.assertView(state, options);

Команда assertView доступна как в контексте браузера, так и в контексте найденного элемента. Набор аргументов при этом отличается:

it("check search view", async ({ browser }) => {
    // ...

    // скриншот текущего вьюпорта браузера
    await browser.assertView("viewport-screen");

    // скриншот конкретного элемента на странице (вызов из контекста браузера)
    await browser.assertView("any-state-name", ".DocSearch", opts);

    const searchInput = await browser.$(".DocSearch");
    await searchInput.click();

    // скриншот элемента, который был найден в предыдущих шагах теста (вызов из контекста элемента)
    await searchInput.assertView("any-state-name");
});

Подробнее о возможностях команды assertView читайте в соответствующих разделах.

Связанные команды​