E2E tests

Running E2E tests

Cypress

Run Cypress tests in the graphical mode:

npm run cy:open

Run Cypress tests in the headless mode:

npm run cy:run

Playwright

Run Playwright tests in the graphical mode:

npm run pw:open

Run Playwright tests in the debug mode with Playwright Inspector:

npm run pw:debug

Run Playwright tests in the headless mode in the Chrome browser:

npm run pw:run

Run Playwright tests in the headless mode in the Firefox browser:

npm run pw:run:firefox

Run Playwright tests in the headless mode in the Webkit browser:

npm run pw:run:webkit

Prettier & ESLint

Cypress

Run Prettier under the cypress directory:

npm run cy:format

Run ESLint under the cypress directory:

npm run cy:lint

Playwright

Run Prettier under the playwright directory:

npm run pw:format

Run ESLint under the playwright directory:

npm run pw:lint

Packages included and configured for E2E tests:

Cypress

@cypress/code-coverage - it generates a code coverage report after Cypress tests
@cypress/instrument-cra - instrument code without ejecting react-scripts
eslint-plugin-cypress - an ESLint plugin for your Cypress tests
@faker-js/faker - it generates fake data for tests
mochawesome - a custom reporter for use to generate tests report after test run
mochawesome-merge - it merges several Mochawesome JSON reports
mochawesome-report-generator - it generates HTML reports from mochawesome reporter

Playwright

@playwright/test - a test-runner for Playwright
@faker-js/faker - it generates fake data for tests
playwright - a Node.js library to automate Chromium, Firefox and WebKit with a single API

Code coverage

Cypress

If you want to generate code coverage report after the Cypress tests you should run the server via command:

npm run cy:coverage:start

and then run the Cypress tests:

npm run cy:run

The code coverage report will be generated automatically after the test run is finished.

To see the full code coverage report open the cypress/reports/code-coverage/index.html file.

To generate the code coverage summary in the terminal after the test run use:

npm run nyc report --reporter=text-summary

Mochawesome reporter

Cypress

To see the mochawesome report open the cypress/reports/mochawesome/final-report/mochawesome.html file. The report will be generated automatically after the test run is finished.