Тестирование Pixel Perfect с помощью Webdrivercss
В этом посте я хотел бы рассказать о проблемах, с которыми я столкнулся при автоматизации визуального регрессионного тестирования при работе с webdriverIO. И эта статья предназначена для тех, кто использует версию webdriverIO 4.6.1 и использует wdio config runner с wdio-cucumber-framework.
В мире цифровых технологий ваш веб-сайт должен реагировать на все платформы и разные макеты. Трудно протестировать каждую страницу на различных макетах, размерах, изменении форматирования текста или контента с помощью традиционного функционального тестирования.
Webdrivercss — это модуль npm, который позволяет выполнять регрессионное тестирование CSS с помощью WebdriverIO. Этот плагин представляет собой инструмент автоматического визуального регрессионного тестирования для WebdriverIO. Он был вдохновлен потрясающим проектом Джеймса Крайера под названием PhantomCSS. После инициализации он дополняет экземпляр WebdriverIO дополнительной командой webdrivercss и позволяет сохранять скриншоты определенных частей вашего приложения.
Как это работает?
- Определите области в вашем приложении, которые всегда должны выглядеть одинаково
- Используйте WebdriverIO и WebdriverCSS, чтобы написать несколько E2E-тестов и сделать скриншоты этих областей.
- Продолжайте работать над своим приложением или сайтом
- Через некоторое время повторите тесты
- Если желаемые области отличаются от ранее сделанных снимков экрана, создается разница изображений, и вы получаете уведомление в своих тестах.
Всю вышеуказанную информацию также можно найти на странице пакета (https://www.npmjs.com/package/webdrivercss), но проблема, с которой я столкнулся при работе с webdrivercss, следующая:
- Последняя версия пакета webdrivercss npm не работает с версией webdriverIO 4.6.1
- версии gm (графическая магия) и webdrivercss имеют проблемы совместимости
Как установить и настроить WebdriverCSS
- Сначала установите webdriverIO, если он еще не установлен и не настроен, следуйте инструкциям с http://v4.webdriver.io/guide.html.
- Затем установите модуль графической магии с помощью команды ниже (у меня работала только указанная версия)
npm установить gm @1.23.1
3. Установите webdrivercss, как указано ниже.
npm установить webdrivercss-custom-v4-совместимый
Создайте файл функций и добавьте приведенный ниже код в определение шага.
Как бегать
Я использую gulp для управления задачами в своей среде, поэтому мне нужно запустить ту же задачу, которую я использую для функционального теста.
Если вы используете wdio config в качестве средства запуска тестов, просто запустите файл, и вы увидите две папки, созданные внутри папки webdrivercss на корневом уровне.
вы можете увидеть скриншоты с определенной шириной в базовой папке, и если вы запустите второй раз и если есть какой-либо допуск на несоответствие, тогда скриншот будет сохранен в папке diff.
Приведенный выше фрагмент кода — это просто базовый код для проверки страницы с базовой страницей. Также доступны другие конфигурации для выполнения другого набора проверок — посетите https://www.npmjs.com/package/webdrivercss и проверьте раздел использования.
Вся борьба заключалась в том, чтобы найти правильный модуль npm и совместимую версию gm, в остальном вся конфигурация проста.
Спасибо за чтение…. :)
