E2E Testing - matai-2020/ABA GitHub Wiki

End to End Testing

End to End testing allows you to replicate user behavior on your application and verify that everything works as it should. In this application E2E testing is using the tool cypress. There is an overview of the tool in the how it works section and detailed documentation is available here including how to write a test.

Cypress “contains” 2 different JavaScript testing frameworks:

• Mocha (to organize tests),
• Chai (to write assertions).

describe() – it is for grouping test cases – I think we can call it test suite,
it() – it is individual test case, and it is “inside” test suite (describe()),
before(), beforeEach(), after(), afterEach() – hooks to execute test preconditions or postconditions (eg. “beforeEach” means it will be run before each it() test, “afterEach” after each it() test).

Set up

Initial test set up, do this only once:

Install cypress locally as a dev dependency npm install cypress --save-dev

• Update cypress.json with the baseURL

• Add folders including videos and screenshots to .gitinore file https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests.html#Configuring-Folder-Structure

• Move the cypress folder to the test folder and update cypress.json with the new folder paths:

`{
"baseUrl": "http://localhost:3000",
"fixturesFolder": "tests/cypress/fixtures",
"integrationFolder": "tests/cypress/integration",
"pluginsFile": "tests/cypress/plugins/index.js",
"supportFile": "tests/cypress/support/index.js",
"videosFolder": "tests/cypress/videos",
"screenshotsFolder": "tests/cypress/screenshots"
}

• Delete cypress examples folder so that these do not run in CI

• Exclude e2e tests from npm run test by adding the following to package.json

"jest": { "testPathIgnorePatterns": ["/node_modules/", "/tests/cypress/"] },

• Set up GitHub actions to run the E2E cypress tests following this tutorial. Install and use cypress-io/github-action. Tests can be run for browsers including Chrome, Edge, Firefox

Write new Tests

• Add your new test file to new folder cypress/integration in code editor.

Here is a simple tutorial for writing and stubbing tests for a form.

Run Tests

1. Run E2E tests locally in a GUI to get a real time view, ie using the Cypress Test Runner:

• Run appnpm run dev
• Run cypress server npx cypress open
• Click test file to run in cypress server

2. Run e2e using Cypress CLI

• Run using npx cypress run
• Run using npm script: npm run e2e (todo)