Full E2E test suite with Cypress.io (site:http://angularjs.realworld.io/) [WIP]

Goals:

• keep it simple - no 'custom' abstractions/functions/utils/helpers (use what Cypress provides)
• tests are easily readable
• project is easily understandable even to people without previous JS or Cypress knowledge

1. Setup

npm install

2. Run tests

cypress test runner (cypress open):

npm run cypress open --env device=mob

npm run cypress open --env device=web

cypress headless mode (cypress run):

npm run cypress run --env device=mob

npm run cypress run --env device=web

Information

Tests are located in cypress/integration folder

Configuration files:

1. cypress.json
2. plugins/index.js

Custom commands (shortcuts) are located in cypress/support folder (.cmd.js suffix)

Selectors are located in cypress/selectors folder [only difference from cypress default project structure]

• not using page objects pattern but keeping selectors (only selectors) separately as they are not easily readable and sometimes we need to share selectors between tests, like header my account button in login test

Q&A

1. Why mobile view is in config and not in test (like cy.viewport())?

• we can't change userAgent in the middle of the test: https://github.com/cypress-io/cypress/issues/2100 So it seems more correct to launch the tests with the correct config (--env device=mob/web)

Following best practices

1. https://www.youtube.com/watch?v=5XQOK0v_YRE&ab_channel=OKG%21
2. https://docs.cypress.io/guides/references/best-practices.html
3. https://docs.cypress.io/api/cypress-api/custom-commands.html#Best-Practices