Applitools предлагает тестовую среду для автоматизации визуального тестирования вашего приложения. Он фокусируется на визуальных аспектах вашего приложения и играет важную роль в выявлении визуальных различий между базовыми снимками и текущими и будущими снимками.

Applitools интегрируется с десятками фреймворков для тестирования, такими как Cypress.io, Storybook и Selenium. Он предоставляет SDK для использования в ваших проектах для беспрепятственного взаимодействия и взаимодействия с Applitools.

В моем предыдущем посте я продемонстрировал красоту системы Applitools Visual Grid и продемонстрировал, как Applitool плавно интегрируется с Storybook внутри приложения Angular. Со всем вниманием к визуальному тестированию пользовательского интерфейса React я подумал, что уместно поделиться пошаговым руководством по этой теме. В частности, тестирование пользовательского интерфейса React с использованием Applitools и Cypress.io.

Во-первых, убедитесь, что они правильно установлены на вашем компьютере:

Прежде чем мы углубимся в написание кода, давайте заглянем за кулисы того, как Applitools и Cypress.io интегрируются друг с другом.

Applitools / Интеграция с Cypress.io

Applitools интегрируется с Cypress.io и предлагает библиотеку общего назначения, которую можно встроить в ваш проект, будь то приложение Angular, Vue или React.

Applitools Eyes Cypress SDK — это простой плагин для Cypress. После установки он добавляет несколько команд к основному объекту cy. В частности, он добавляет три основных метода: cy.eyesOpen для запуска теста, cy.eyesCheckWindow для создания скриншотов (для каждого шага теста) и cy.eyesClose. чтобы закрыть тест. Вот схема:

Теперь, когда вы понимаете, как работает интеграция Applitools/Cypress.io, давайте переключим передачу и начнем кодировать несколько визуальных тестов для приложения React, используя Applitools и Cypress.io.

Исходный код

Для этой статьи я решил написать несколько тестов E2E Cypress.io для проекта с открытым исходным кодом, написанного на React JS. Приложение Сравнение продуктов позволяет пользователю выбрать несколько продуктов и сравнить их друг с другом.

Демонстрация, шаги 1–5: начало работы

Я проведу вас по ряду шагов, чтобы установить Applitools и Cypress.io в существующее приложение React JS, добавить тест Cypress.io и, наконец, проверить результаты в Applitools Test Manager.

Шаг 1. Клонируйте репозиторий локально, выполнив следующую команду git:

git clone [email protected]:Rhymond/product-compare-react.git

Шаг 2. Установите все зависимости npm, введя следующую команду:

npm install

Шаг 3. Запустите приложение:

npm run start

И вы должны увидеть что-то вроде этого:

Вуаля. Оно работает!

Шаг 4. Добавьте пакет Cypress в проект:

npm install --save-dev cypress

Пакет Cypress npm добавляет набор тестовых файлов, которые помогут вам написать собственные автоматические тесты.

Шаг 5. Откройте панель инструментов Cypress, введя следующую команду:

node_modules/.bin/cypress open

Эта команда открывает информационную панель Cypress, а также создает файл cypress.json и папку cypress в корневом каталоге вашего приложения. В папке cypress мы будем писать наши тесты.

Шаги демонстрации 6–8: добавление тестов Cypress

Шаг 6. Добавьте новый, более короткий скрипт в файл package.json, чтобы открыть Cypress Dashboard без необходимости вводить длинную команду, которую вы использовали на предыдущем шаге:

"cypress": "cypress open"

Кроме того, внутри файла cypress.json в корне папки приложения добавьте следующее:

{

     "baseUrl": "http://localhost:3000"

}

Теперь, когда Cypress работает правильно, давайте добавим наш первый E2E-тест.

Шаг 7. В папке cypress\integration создайте файл compare.spec.js и вставьте следующее:

Единый тест E2E фокусируется на проверке функциональности добавления двух продуктов для их параллельного сравнения. Можно написать множество тестов, но ради нас мы поиграем с одним E2E-тестом, чтобы продемонстрировать интеграцию Applitools с Cypress.io.

Файл спецификации не требует пояснений. Здесь нужно отметить только одну вещь в отношении селекторов, используемых внутри методов cy.get(). Лучше всего избегать использования идентификаторов и классов CSS для выбора элементов из DOM. Они сделают ваши тесты хрупкими, потому что они могут быть изменены. Лучшим подходом является использование атрибутов data-* или фактических имен компонентов.

Теперь вернитесь к файлам Compare\index.js и Product\index.js и просмотрите все атрибуты data-*, которые я добавил для облегчения написания этого E2E. контрольная работа.

Шаг 8. Запустите единый тест E2E, введя следующую команду:

npm run cypress

Здорово! Наш тест E2E успешно проходит, подтверждая, что приложение работает хорошо и может выбирать несколько продуктов для их сравнения без каких-либо проблем.

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

Как вы уже знаете, Applitools легко интегрируется с Cypress.io, поэтому давайте добавим в проект пакет Applitools Cypress NPM.

Демонстрация, шаги 9–12: установка и интеграция Applitools Eyes

Шаг 9. Добавьте в проект пакет Applitools Eyes Cypress SDK.

npm install @applitools/eyes.cypress --save-dev

Шаг 10. Настройте Applitools Eyes Cypress SDK, введя следующую команду:

npx eyes-setup

Теперь, когда Applitools Eyes Cypress SDK настроен, мы можем начать использовать его в наших тестах.

Да начнется визуальное тестирование!

Шаг 11. Откройте файл cypress\integration\compare.spec.js и замените его содержимое следующим:

Код самодокументирован.

Чтобы интегрировать SDK Applitools Eyes Cypress в файл спецификации, вы будете следовать приведенному ниже рабочему процессу:

Начать новый тест

cy.eyesOpen({

   appName: '...',

   testName: '...',

   browser: { ... },

});

Сделайте снимок (вы можете повторить этот шаг везде, где хотите сделать снимок)

cy.eyesCheckWindow('...');

Завершить тест

cy.eyesClose();

Обратите внимание на утверждения Applitools в строках 1, 7, 12 и 17? Этот тип журнала информирует вас о шагах, которые Applitools предпринимает, пока Cypress запускает ваши тесты.

Шаг 12. Проверьте выполнение теста в Applitools Test Manager:

При нажатии на название теста (в данном случае Выберите 2 продукта для сравнения) отображаются два снимка, сделанные Eyes SDK во время выполнения теста.

Первый снимок помечен как первый выбранный продукт. На изображении показан выбранный продукт Cherry.

Второй снимок помечен как второй выбранный продукт и показывает выбранный оранжевый продукт.

Поскольку это первый запуск теста, Applitools сохранит их в качестве базовых.

Мы смоделируем визуальную разницу, добавив подчеркивание ко всем ценам, отображаемым на странице, и позволим Applitools обнаружить это. Теперь снова запустите тест и посмотрите результаты.

Шаги демонстрации 13–15: внесение изменений и их проверка

Шаг 13. Откройте файл src/components/Product/styles.css и измените следующий класс CSS следующим образом:

.product .stats-container .product_price {

   float: right;

   color: #48cfad;

   font-size: 22px;

   font-weight: 800;

   text-decoration: underline;

}

Запустим тест.

Шаг 14. Введите команду для повторного запуска тестов E2E. Тестовый пример завершается неудачно, и Applitools обнаруживает визуальное изменение наложений изображения продукта.

Обратите внимание, как Applitools Test Manager записал второй запуск тестового примера и выделил визуальную разницу между двумя снимками?

Шаг 15. Нажмите на первый снимок и сравните его с исходным состоянием.

Если вы не видите оба снимка рядом, найдите меню Вид и выберите Показать оба.

В дополнение к возможности визуально тестировать наши приложения React JS, Applitools предлагает больше функций и функций, которые дают вам преимущество в быстром тестировании ваших веб-приложений и легком обнаружении визуальных различий.

Чтобы получить доступ к исходному коду этой статьи, не стесняйтесь скачать его здесь: product-compare-react.

Вывод

Теперь у вас есть некоторое представление о том, как Applitools ускоряет процесс визуального тестирования при разработке приложений с помощью React JS и Cypress.

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

Удачного тестирования!

Некоторые из моих последних сообщений

Вот некоторые из предыдущих тем Applitools, которые я обсуждал:

  1. Applitools — автоматизированный фреймворк визуального регрессионного тестирования
  2. Смешивание Storybook с Angular с добавлением Applitools
  3. Устранение неполадок и быстрое исправление ошибок React
  4. Визуальное тестирование приложений VueJS с помощью Cypress.io и Applitools
  5. Как я провел 100 UI-тестов всего за 20 секунд

Для получения дополнительной информации от Applitools

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

Первоначально опубликовано в Блоге Applitools.