Protractor-React-Selector

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

Installation

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"]
  }
}

Alert

• protractor-react-selector supports NodeJS 8 or higher
• cypress-react-selector supports NodeJS 8 or higher

Configuration

protractor-react-selector can be used as a plugin in your protractor configuration file with the following code:

exports.config = {
  // ... the rest of your config
  plugins: [
    {
      // The module name
      package: 'protractor-react-selector',
    },
  ],
};

How to use React Selector?

Lets take this example REACT APP:

// imports
 
const MyComponent = ({ someBooleanProp }) => (
  <div>My Component {someBooleanProp ? 'show this' : ''} </div>
);
 
const App = () => (
  <div>
    <MyComponent />
    <MyComponent someBooleanProp={true} />
  </div>
);
 
ReactDOM.render(<App />, document.getElementById('root'));

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.

await browser.waitForReact(timeOut?:number=10000, reactRoot?:string='#root')

beforeAll(() => {
   await browser.get('http://localhost:3000/myApp')
   await browser.waitForReact()
})

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 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 information
await browser.waitForReact(10000, '#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'
const myElement = element(by.react('MyComponent'));
 
// to fetch all elements matched with component, props and state, you can use protractor native 'all' method
const myElement = element.all(by.react('MyComponent'));

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 a 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

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

Contribution

Any pull request is welcome.

If it works for you , give a Star! 🌟 ⭐️ 🌟

- Copyright © 2019- Abhinaba Ghosh