cypress-e2e v1.8.0-alpha.3
Cypress test default configuration
Cypress is configured inside /packages/cypress-e2e/cypress/Cypress.js file.
CLI root for npx scripts is /packages/cypress-e2e folder. In other folder Cypress will create new standalone instance, and current tests will not be included.
To run with GUI: npx cypress open
Run tests just in CLI: npx cypress run
Redux Store and Cypress
Redux Store injected into window browser object insode Designer package - /packages/designer/src/index.js root file.
The declaration is: window.reduxStore = store . This makes Redux Store availible from JS console in browser.
Cypress is able to read application state from window.Store by invoke getState() function.
But it has some issues described and solved in cypress blog article: Cypress and Redux
- Use
Wait(1000)(give redux a time to react on Cypress very quick actions) - Work with async methods after
cy.window().then([...function, where you can access store, here...]).
Elements identification in React designer and Cypress
Expression used in Designer App components: <react-component-name className='e2e-[selector]' />
Example: <LoginButton className="e2e-login-button" disabled={this.state.disabled} onClick={this.login} />
We were not able to use better valid data-test=value becuase of third party libraries.
#Window events in browser (alert, confirm, prompt)
Cypress automaticly confirm alert(), and confirm() events.
Prompt must be stubbed: cy.stub(win, 'prompt').returns('Prompt text to be written')
- win will be rentured by cy.window().then(win => { cy.stub(...)})
- cy.stub() by default replace window.prompt() by the text and "OK" button click.
Extra testing tips
- Use middle-step asserts like
cy.get('#root_apiUrl').scrollIntoView().should("be.visible").type(url). It prevent cypress to be faster, than test steps. - Editable inlines: https://github.com/cypress-io/cypress/issues/1686
Azure pipeline
- setup production url in cypress.json
"baseUrl": "https://designer-test.feedyou.agency/"
#Scenario file structure (testname.spec.js)