E2E Setup with Cypress

cypress-e2e-setup.MD

E2E Setup with Cypress

Installing Playwright

1. Ensure that you are using the latest version of Node 10 as playwright requires it: nvm use 10
2. Install playwright: yarn add -D playwright

Why switch from Playwright to Cypress?

• Stability over speed in testing
• QaWolf & Playwright had flaky issues
• Stability in Cypress test runner over Playwright

---

How to setup Cypress + Bitbucket Pipeline?

How to run Cypress test in Parallel?

You cannot. You need to pass in --record and login to Cypress Dashboard to do this. This is as good as paid feature.

How to add Bitbucket Pipeline Env in bulk

1. Base64 encode the .env file by doing base64 .env
2. Grep the value and paste it as the value in bitbucket pipeline repository variables. Set the key to APP_ENV_VARS
3. In pipeline, do this echo $APP_ENV_VARS | base64 --decode > .env to get the .env created

References:

• https://stackoverflow.com/questions/51819335/is-there-any-way-to-use-dotenv-with-bitbucket-pipelines
• https://support.circleci.com/hc/en-us/articles/360003540393-How-to-insert-files-as-environment-variables-with-Base64

Parallelisation

There are two levels of parallelisation in the CI pipeline. One on the Bitbucket Pipeline layer (https://bitbucket.org/blog/speed-build-parallel-steps-pipelines) and another on the Cypress layer.

Why is the bitbucket pipeline not detecting my newly installed npm packages?

In the pipeline, the node_modules folder is cached. Even as new packages are installed, the node cache will not be updated as this is an open issue on Bitbucket. By default, Bitbucket's cache invalidation will only take place weekly. To force the cache to update, manually delete the node cache from the pipeline in the Bitbucket repo. Re-run the pipeline to receive the latest node_modules.

---

How to setup E2E Testing for my project?

How to setup Cypress?

1. yarn add -D cypress cypress-localstorage-commands dotenv-to-json
2. Copy from ens-api > cypress
3. Copy scripts from ens-api > package.json
4. Edit test files and run yarn test locally. Don't forget to run a local server at port 3000.

To setup Bitbucket CI,

1. Copy bitbucket-pipelines.yml from ENS, place in root.
2. Setup

How to setup the pipeline?

1. Add pipeline env vars to (https://bitbucket.org/1xt/MY_PROJECT/admin/addon/admin/pipelines/repository-variables). For the pipeline to work, the following specific env vars must be added: NPM_TOKEN, CYPRESS_RECORD_KEY and APP_ENV_VARS. To get APP_ENV_VARS, you need to get a base64 string off your current .env file. Do that by running base64 .env.
2. Migrate the code from this PR: https://bitbucket.org/1xt/ens-api/pull-requests/3 and ensure that it is in your project.
3. Make sure to do the yarn installs.
4. Push to repo and make pull request to see E2E running in Bitbucket Pipeline.

---

How to use Cypress?

How to write tests?

yarn cy:open

How to run tests?

yarn test

How to test a single file in Cypress?

yarn test --spec cypress/integration/examples/cypress_api.spec.js

How to skip the CI from running?

Add [skip ci] to the commit message

What do I do when my tests are timing out before the page loads?

You can increase the timeout of the action. The default timeout in Cypress is 4000ms. You could do 10,000ms to wait for these network requests to complete. For example: cy.get('[data-cy=page-title]', { timeout: 10000 }).contains('Users')