You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

4.0 KiB

Raw Blame History

Simple E2E test suite with Cypress

application under test: http://angularjs.realworld.io/

cypress dashboard: https://dashboard.cypress.io/projects/urshkd/runs

🥅 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
use shortcuts to avoid repeating/testing the same UI actions over and over again

⚙️ Setup

git clone https://github.com/helenanull/cypress-example.git
cd to cypress-example folder and run npm install

✔️ Run tests

If you installed Cypress via npm:
- cypress test runner (cypress open):
  - npm run cy:open:web OR cypress open --env device=web (change web to mob to switch to mobile view)
- cypress headless mode (cypress run):
  - npm run cy:run:web OR cypress run --env device=web
If you installed Cypress zip:
- import cypress-example folder and you are good to go

💡 Information

🧪 Tests:

📁 Tests are located in cypress/integration folder

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

📁 Selectors (CSS 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 Read more

🛠️ Configuration

Config files:

cypress.json - Main config file where default behavior of Cypress can be modified. More info
plugins/index.js - Plugins file is where we can programmatically alter the resolved configuration More info

❔ Q&A

Why keep selectors separately (not hard-coded to tests)
- tests are much more readable - css selectors are by design hard to read - even if we add data-test attributes. We might need 2nd child or want to verify that selector is a child for another element, like .class2 > ul:nth-child(2) (alternative get().find() or get().parent() is bad practice because of this )
- in large projects, we might need to re-use the same selectors. Example: in login test, we want to verify that login was successful and for that, we check settings link visibility in header. But the same settings link is also used in header test.
- selector and test logic is separated - when selector is updated, we just need to update 1 selector file and not multiple tests
Is it still E2E test if we use API to login in?
- since end result will be the same - it will catch exactly the same bugs as full flow/user journey E2E test would find, (we need to be careful not to leave 'gaps' though), it is E2E - tests are just separated and independent with this approach, test suite is E2E, one test might not be. Example: We have a bug where login button is not working - our settings test would pass(if there are no bugs in settings), but login test would still fail.
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)

4.0 KiB Raw Blame History