Cypress-resq

cypress react element select query

Install

npm i -S cypress-resq

Configure Cypress

before use it, please add plugin and commands to cypress

Plugin

Find your cypress/plugins/index.js file and change it to look like this:

1const injectResqPlugin = require('cypress-resq/plugin'); // add this line
2
3module.exports = (on, config) => {
4  on('task', injectResqPlugin); // add this line
5};

Command

Find your cypress/support/index.js file and add the following line:

1import 'cypress-resq/commands';

Usage

Basic usage

Take this React App

1// imports
2
3const MyComponent = () => (
4    <div>My Component</div>
5)
6
7const App = () => (
8    <div><MyComponent /></div>
9)
10
11ReactDOM.render(<App />, document.getElementById('root'))

Selecting MyComponent and click it by cypress:

1// it's important to inject resq command after visit react page.
2cy.visit('/').injectResq();
3// find element by react component name
4cy.resq$('MyComponent').click();

Filtering selection

You can filter your selections by props

<MyComponent e2e="goodcomponent" />

Selecting MyComponent with prop e2e and click it by cypress:

1cy.resq$('MyComponent', {e2e: 'goodcomponent'}).click();

Chain selection

you can chain resq$ command after others command return element.

1cy.get('#root').resq$('MyComponent').click();