Test your REACT app efficiently with Protractor

ReactJS is one of the most widely use Front-End libraries on the web. Alongside React, many developers use styling tools that will minify or re-write the class attribute values attached to the HTML elements via className props in JSX. These minifications and overwrites make it difficult to select the generated HTML using the WebDriver’s query commands like findElement or findElements since it’s not guaranteed that the class name will remain the same.

The Missing Piece

JEST and Enzyme greatly help developers to unit test REACT apps with the famous snapshot testing. But, automation testers have been struggling a lot while it comes to the functional testing of the REACT web pages.

As I already said, REACT in combination with different styling libraries (like Material UI), produces dynamic classes and HTML structure. The part which likely to be Non-Dynamic in React is REACT Component and Props.

Protractor has been performing outstanding over the last decade,it has not been the first choice while it comes to REACT testing. It was just missing a part to locate REACT elements efficiently.

Protractor-React-Selector is a lightweight plugin that will help you to find web elements by REACT components and props. Let see in the next section how to use it…

Installation

Install this module locally with the following command to be used as a (dev-)dependency:

npm install --save protractor-react-selector

Configuration

protractor-react-selector can be used as a plugin in your protractor configuration file with the following code. You also need to turn off the Angular Enable Flag.

exports.config = {// ... the rest of your configplugins: [    {    // The module name    package: "protractor-react-selector"    }
]
onPrepare: async () => { await browser.waitForAngularEnabled(false);
//you can do magic here. See the Pro-tip in later section
}
};

That’s it. You are now very much set to use the React Selector to find React Elements on the web page.

How to use React Selector

Once you are set with the configuration, you can use the react selector just like any other native locators. But, lets first checkout the APIs:

Format: browser.waitForReact(timeOut?:number,reactRoot?:string)

  • timeOut — optional (defaults to10000 ms)
  • reactRoot -optional (defaults to ‘#root’)

Format: by.react(react_component,props,state)

  • component name — required
  • props — optional
  • state — optional

Let's take this example REACT APP:

Wait for application to be ready to run tests

To wait until the React’s component tree is loaded, add the waitForReact method to fixture's before hook.

this will wait to load react inside your app. waitForReact automatically find out the react root of your application.

The default timeout for waitForReact is 10000 ms. You can specify a custom timeout value:

await browser.waitForReact(30000);

Wait to Load React for different react roots

It may even possible that you have different REACT roots (different REACT instances in the same application). In this case, you can specify the CSS Selector of the target root.

const App = () => (
<div id='mount'>
<MyComponent />
<MyComponent someBooleanProp={true} />
</div>
)

There is some application which displays react components asynchronously. You need to pass root selector information to the react selector.

await browser.waitForReact(10000, '#mount')

Element filtration by Props and States

You can filter the REACT components by its props and states like below:

const myElement = element(
by.react('MyComponent', { someBooleanProp: true }, { someBooleanState: true })
);

Wildcard selection

You can select your components by partial name use wildcard selectors:

// Partial Match
const myElement = element(by.react('My*', { someBooleanProp: true }));
// Entire Match
const myElement = element(by.react('*', { someBooleanProp: true })); // return all components matched with the prop

Sample Tests

Checkout sample tests here

How to find React Components and Props

Finding REACT elements are very easy with React-Dev-Tool chrome plugin. This plugin will help you to inspect REACT components and props.

REACT DEV TOOL

After installing REACT DEV TOOL, you simply navigate to the target react page and press f12. There will be a special section visible called — Components (As shown in the above picture). If you hover over/ select a segment of the page using arrow selector, respective Component Name and Props Objects will be shown in the right corner of the dev tool. Then you just need to use those component name and props with Protractor-React-Selector.

Suppose, I want to click the “freeCodeCamp” link shown in the above picture, then I can use React-Selector as:

const link=element(by.react('u',{name:  "freeCodeCamp"}));
link.click();

Pro-Tip:

If you are testing a REACT application, you might already be using:

onPrepare: async () => {
await browser.waitForAngularEnabled(false);
}

By using the above command, you are instructing webdriver Not to wait for finishing Angular and the outstanding $http or $timeout calls before continuing. So, Protractor runs commands one after another without waiting for the outstanding XHR calls to be completed. The effect? You end up with writing a lot many Expected Conditions or hardcoded waits to save your tests from flakiness.

Fortunately, there is an efficient way to avoid this. You can count on Protractor-Testability-Plugin. The author says:

This plugins enables testing projects and libraries not built against AngularJS services in sync with protractor. Even when using AngularJS there are situations when this plugin my become useful, like when using webworkers or comunicating via websockets.

This means that your TDD/BDD tests will be a lot cleaner as you will not have to add aditional waitings and tweak timeouts to get your tests passing consistently as protractor will know when there’s a task pending and it will wait automatically between each step for it to get completed.

To use the plugin you can first save the dependency by running below command:

npm i — save-dev protractor-testability-plugin

Then you just need to remove the waitForAngular statement. So, after combining this plugin with react selector plugin your protractor conf should look like:

exports.config = {// ... the rest of your configplugins: [  {   // The module name   package: "protractor-react-selector"  },{
package: 'protractor-testability-plugin'
} ]onPrepare: () => { // delete the waitforAngular statement
}
};

Parking Lot

I hope this will completely mitigate your hard times finding dynamic REACT elements. Protractor-React-Selector can be used with any protractor framework like Jasmine, Mocha, Cucumber, etc.

Happy Bugging!

In case you like to investigate how Cypress.io handles React application, you can check out this blog. I swear, its fun!

And …If you want to pat on my back, just hit the clap button!

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Testing with Jest: 15 Awesome Tips and Tricks

Build a Video Calling React Native App In 7 Steps With Video SDK

What’s new in Vue3?

https://v3.vuejs.org/guide/composition-api-lifecycle-hooks.html#lifecycle-hooks

What is Method Chaining in Javascript 🤔

How to Build Your First Archway dApp

3 Websites to Learn Programming for Free

Angular Material: Sidebar Open on Swipe

sidebar open with mode=’side’

A Quick Start to TypeScript in Node.js

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 ⛰️

More from Medium

React Task App (Part 1)

IMPROVING THE PERFORMANCE OF REACT APP

Walkthrough of Create React App codebase

Spotify Social Media App: Vocalize