Cypress test in AWS Amplify

Doing a cypress test using AWS Amplify might be a bit tricky especially with yarn package manager. I compiled list of steps to help anyone to save time while using cypress test in AWS Amplify.

The following steps are to be followed to test cypress test cases in AWS Amplify

Step 1:

Add the following file contents to your amplify.yml file in your build settings, you can just copy and paste the contents of this file to your amplify.yml file

version: 1
frontend:
 phases:
 preBuild:
 commands:
 — yarn install
 build:
 commands:
 — yarn run build
 artifacts:
 baseDirectory: build
 files:
 — ‘**/*’
 cache:
 paths:
 — node_modules/**/*
test:
 artifacts:
 baseDirectory: cypress
 configFilePath: “**/mochawesome.json”
 files:
 — “**/*.png”
 — “**/*.mp4”
 phases:
 preTest:
 commands:
 — yarn install — immutable — immutable-cache — check-cache
 — yarn install — frozen-lockfile
 — yarn add wait-on
 — yarn add pm2
 — yarn add mocha@5.2.0 mochawesome mochawesome-merge mochawesome-report-generator
 — npx pm2 start yarn — start
 — “yarn start & npx wait-on http://localhost:3000/”
 test:
 commands:
 — ‘npx cypress run — reporter mochawesome — reporter-options “reportDir=cypress/report/mochawesome-report,overwrite=false,html=false,json=true,timestamp=mmddyyyy_HHMMss"'
 postTest:
 commands:
 — npx mochawesome-merge@4 cypress/report/mochawesome-report/*.json > cypress/report/mochawesome.json

Please note you need to change this line to the port you are using (I am using port 3000) in the amplify.yml file that you copied above.

— “yarn start & npx wait-on http://localhost:3000/”

Step 2:

Make sure you run yarn install before you do your commit

Step 3:

Don’t forget to add the env variables in your projects to environment variables in amplify settings if there are any