protractor-react-selector

    2.2.4 • Public • Published

    Protractor-React-Selector

    Build Status NPM release

    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

    Install

    npm i protractor-react-selector

    DownloadsWeekly Downloads

    1,908

    Version

    2.2.4

    License

    MIT

    Unpacked Size

    14.2 kB

    Total Files

    10

    Last publish

    Collaborators

    • abhinaba-ghosh