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)