React End-to-End testing made easy with Cypress

Key highlights of React

  • JSX is one of the greatest features that not only make ReactJS easy but fun too. Developers can easily make a new UI feature and see it appear in real-time. Point to be noted, developers do not write HTML directly.
  • Components allow developers to break down complex UI. Instead of worrying about the entire web app, it makes it possible to break the complex UI/UX development into simpler components.
  • Props make it possible to populate components using custom data. Props in ReactJS make it possible to pass the custom data to a specific UI component.
  • State makes it possible to store all the changes in one section. When using ReactJS, developers take all the content that can change during the application and place it in a single location (State).

So, What’s the challenge in automation?

  • Frequent maintenance of the test suite due to changing HTML DOM.
  • Flaky test cases emphasize lesser importance to test automation process
  • Forcing developers every time to inject custom attributes

Let’s connect the dots

Install the plugin

  • Add as a dependency (or dev-dependency)
npm i -D cypress-react-selector
  • Include the commands in plugin section
import 'cypress-react-selector';

Exposed commands

How to use cypress-react-selector?

Level up the unit testing game

Write smarter E2E tests

Parking Lot

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhinaba Ghosh

Abhinaba Ghosh

Tech Lead Manager @Postman 🚀 | Space Movie Lover 🪐 | Coder 👨‍💻 | Traveller ⛰️