ReactJS is one of the most widely use Front-End libraries in the web. Along side 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 modifications 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.
Worry Not! Here We Introduce Protractor-React-Selector 🐣
protractor-react-selector is lightweight plugin to help you to locate web elements in your REACT app using props and states.Internally, protractor-react-selector uses a library called resq to query React's VirtualDOM in order to retrieve the nodes.
Read complete setup Blog here
Install this module locally with the following command to be used as a (dev-)dependency:
npm install --save protractor-react-selector
TSConfig settings for type definition
"compilerOptions":"sourceType": "module""types": "node" "protractor-react-selector"
- protractor-react-selector supports NodeJS 8 or higher
- cypress-react-selector supports NodeJS 8 or higher
protractor-react-selector can be used as a plugin in your protractor configuration file with the following code:
How to use React Selector?
Lets take this example REACT APP:
// importsconst MyComponent = someBooleanProp<div>My Component someBooleanProp ? 'show this' : '' </div>;const App =<div><MyComponent /><MyComponent = /></div>;ReactDOM;
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
await browser.waitForReacttimeOut?:number=10000, reactRoot?:string='#root'
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:
Wait to Load React for different react roots
It may even possible that you have different REACT roots (different REACT instances in 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.
// if your react root is set to different selector other than 'root'// then you don't need to pass root element informationawait browser.waitForReact10000, '#mount';
Find Element by React Component
You should have React Develop Tool installed to spy and find out the component name as sometimes components can go though modifications. Once the React gets loaded, you can easily identify an web element by react component name:
// with only component. If you don't provide any root element, it assume that root is set to '#root';// to fetch all elements matched with component, props and state, you can use protractor native 'all' method;
Element filtration by Props and States
You can filter the REACT components by its props and states like below:
You can select your components by partial name use a wildcard selectors:
// Partial Match;// Entire Match; // return all components matched with the prop
Checkout sample tests here
Tool You Need
React-Dev-Tool — You can inspect the DOM element by simply pressing the f12. But, to inspect REACT components and props, you need to install the chrome plugin.
Tell me your issues
you can raise any issue here
Any pull request is welcome.
If it works for you , give a Star! 🌟 ⭐️ 🌟
- Copyright © 2019- Abhinaba Ghosh