ReactJS, без сомнения, самая популярная библиотека для веб-разработки. ReactJS предоставил решение, которое искали разработчики. Он использует JSX (уникальный синтаксис, который позволяет использовать кавычки HTML, а также приложение синтаксиса тегов HTML для визуализации определенных подкомпонентов).
Частично эта огромная популярность связана с тем, что ведущие корпорации, такие как Facebook, PayPal, Uber, Instagram и Airbnb, используют его для решения проблем, связанных с пользовательским интерфейсом. Это доверие привлекло к фреймворку множество людей.
Если вы разработчик React, вы уже знаете, каковы ключевые столпы React. Но, если вы инженер по качеству и в основном сосредотачиваетесь на его тестировании, я настоятельно рекомендую иметь некоторое представление о разработке React.
Ключевые особенности React
- JSX - одна из замечательных функций, которые не только делают ReactJS простым, но и увлекательным. Разработчики могут легко создать новую функцию пользовательского интерфейса и увидеть, как она появляется в режиме реального времени. Следует отметить, что разработчики не пишут HTML напрямую.
- Компоненты позволяют разработчикам разбирать сложный пользовательский интерфейс. Вместо того, чтобы беспокоиться обо всем веб-приложении, это позволяет разбить сложную разработку UI / UX на более простые компоненты.
- Свойства позволяют заполнять компоненты с помощью пользовательских данных. Свойства в ReactJS позволяют передавать пользовательские данные конкретному компоненту пользовательского интерфейса.
- Состояние позволяет хранить все изменения в одном разделе. При использовании ReactJS разработчики берут весь контент, который может измениться во время приложения, и помещают его в одно место (состояние).
Итак, в чем проблема автоматизации?
JEST и Enzyme очень помогают разработчикам в модульном тестировании приложений REACT с помощью известного тестирования моментальных снимков. Даже библиотека cypress-response-unit-test вызывает ажиотаж среди разработчиков, проводя тестирование компонентов на реакцию. Но тестировщики автоматизации сильно борются, когда дело доходит до тестирования автоматизации пользовательского интерфейса веб-страниц REACT.
REACT в сочетании с различными библиотеками стилей (такими как Material UI) создает динамические классы и структуру HTML. Таким образом, идентификация веб-элементов с помощью класса или идентификаторов является очень сложной задачей из-за динамической генерации HTML DOM. Иногда, просто для встряски тестирования, разработчикам необходимо добавить в компоненты некоторые настраиваемые атрибуты. Но при этом разработчики попадали в ловушку сознательной границы каждый раз, когда рендерили компоненты React.
Итак, инженеру по автоматизации необходимо решить множество проблем:
- Частое обслуживание набора тестов в связи с изменением HTML DOM.
- Нестандартные тестовые примеры придают меньшее значение процессу автоматизации тестирования
- Принуждение разработчиков каждый раз вводить пользовательские атрибуты
Давайте соединим точки
Хотя HTML-часть является динамической, часть, которая, скорее всего, не будет динамической в React, - это REACT Component and Props. Итак, что, если я скажу вам, что существует плагин cypress для идентификации веб-элементов способом, более естественным для React.
cypress-react-selector - это легкий плагин, который поможет вам находить веб-элементы в вашем приложении REACT с помощью компонентов, свойств и состояний.
Установите плагин
- Добавить как зависимость (или dev-зависимость)
npm i -D cypress-react-selector
- Включите команды в раздел плагинов
Обновите файл Cypress/support/index.js
, включив в него команды cypress-response-selector, добавив:
import 'cypress-react-selector';
Открытые команды
В этой библиотеке есть множество команд, специально разработанных для приложения React.
Как использовать Cypress-React-Selector?
Предположим, у вас есть компонент React Formik Form, например:
теперь вы можете идентифицировать веб-элементы с помощью команды cy.react и беспрепятственно взаимодействовать с элементом
Это приведет к
Таким образом, вы не зависите от каких-либо атрибутов DOM, таких как class, id и т. Д. Даже если разработчик визуализирует JSX по-другому, если компонент и свойства не изменены, ваш тест не завершится неудачно.
Вы можете ознакомиться с полным примером автоматизации форм реагирования здесь.
Повышайте уровень игры с модульным тестированием
Cypress-react-unit-test - отличный помощник для компонентного тестирования вашего приложения React в контексте реального браузера. Вам нужно установить свой реагирующий компонент в тесте кипариса, а кипарис позаботится обо всем остальном. Вы можете очень много использовать любую функциональность Cypress (живой графический интерфейс, полный API, запись экрана, поддержка CI, кроссплатформенность и визуальное тестирование).
Возьмем пример с реактивной книгой.
Теперь вы можете выполнить модульное тестирование этого компонента, объединяя обе библиотеки - cypress-react-unit-test и cypress-react-selector.
Напишите более умные тесты E2E
Вполне возможно, что разработка приложения React происходит разрозненно, и вы, инженер по автоматизации, не имеете представления об исходном коде приложения. В идеальной гибкой команде такой ситуации не должно быть. Но мы живем в более практичном и экспериментальном мире. Иногда в организациях есть другая группа автоматизации, которая обычно работает с пакетом регрессии.
Даже если у вас нет доступа к исходному коду, вы можете очень легко определить имя компонента, свойства и состояние с помощью Chrome-React-Dev-Tools. Если вы используете инструмент с умом, вы можете получить все возможные подробности о любом реагирующем компоненте, даже если этот компонент является стилизованным компонентом.
Возьмем пример приложения React-Calculator и на мгновение предположим, что у нас нет доступа к исходному коду.
Посмотрите демонстрацию ниже, как я использовал плагин react dev tools для определения элемента номер 5.
вы можете написать тесты с полученными вами деталями:
Парковка
Я надеюсь, что теперь вы можете написать более надежные тестовые примеры и вернуть доверие своей команды к своему набору автоматизации. Будь вы разработчик или тестировщик, вы можете писать тестовые примеры на языке, понятном React!
А если вы не знаете, вы можете хлопать до 50 раз! ^^