cypress react element select query
npm install cypress-resqcypress react element select query
npm i -S cypress-resq
`Configure Cypress
before use it, please add plugin and commands to cypress$3
Find your cypress/plugins/index.js file and change it to look like this:`javascript
const injectResqPlugin = require('cypress-resq/plugin'); // add this linemodule.exports = (on, config) => {
on('task', injectResqPlugin); // add this line
};
`$3
Find your cypress/support/index.js file and add the following line:`javascript
import 'cypress-resq/commands';
`Usage
$3
Take this React App
`javascript
// importsconst MyComponent = () => (
My Component
)const App = () => (
)ReactDOM.render( , document.getElementById('root'))
`
Selecting MyComponent and click it by cypress:
`javascript
// it's important to inject resq command after visit react page.
cy.visit('/').injectResq();
// find element by react component name
cy.resq$('MyComponent').click();
`$3
You can filter your selections by props`
`
Selecting MyComponent with prop e2e and click it by cypress:
`javascript
cy.resq$('MyComponent', {e2e: 'goodcomponent'}).click();
`$3
you can chain resq$ command after others command return element.
`javascript
cy.get('#root').resq$('MyComponent').click();
``