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 раз! ^^