Add E2E testing to your CI/CD

Install Cypress

AWS Amplify supports Cypress that is a E2E testing framework. You can easily add E2E testing into your CI/CD environment by integrating Cypress with Amplify Console. For this time, let’s configure as E2E testing runs when the develop branch is deployed.

First, switch to develop branch and install cypress to your project.

git checkout develop
npm install cypress mochawesome@4.1.0 mocha start-server-and-test --save-dev

Write the test code

After install completion, make folders and files where you write tests. For this time, please create cypress/integration/authenticator_spec.js and let’s write test code into this file.

mkdir -p cypress/integration
touch cypress/integration/authenticator_spec.js
touch cypress.json

At this E2E testing, you test following scenarios work properly.

  1. Access to the home page then login screen is shown
  2. Able to login with ID and password for a test user
  3. The text “Global” is shown on the screen after login

Write your source code into cypress/integration/authenticator_spec.js. (Please replace user ID and password on line 9 and 12 to ones you created for staging environment)

 1describe('Authenticator:', function() {
 2  beforeEach(function() {
 3    cy.visit('/');
 4  });
 5
 6  describe('Sign In:', () => {
 7    it('allows a user to signin', () => {
 8      cy.get(selectors.usernameInput).type(
 9        '<** user ID for a user existing in your staging environment **>'
10      );
11      cy.get(selectors.signInPasswordInput).type(
12        '<** password for above user ID **>'
13      );
14      cy.get(selectors.signInSignInButton)
15        .contains('Sign In')
16        .click();
17      cy.get(selectors.root).contains('Global');
18    });
19  });
20});
21export const selectors = {
22  usernameInput: '[data-test="username-input"]',
23  signInPasswordInput: '[data-test="sign-in-password-input"]',
24  signInSignInButton: '[data-test="sign-in-sign-in-button"]',
25  root: '#root'
26};

Add following item to cypress.json to tell Cypress the server where test run.

{
  "baseUrl": "http://localhost:3000"
}

Add E2E settings to Amplify Console

Next, change the configuration of Amplify Console to run E2E testing. Update the form shown after clicking “Build settings” > “Edit” button with following content. This YAML file is for build settings of Amplify Console. In this amplify.yml, the configurations for Cypress are the test section as following.

version: 0.1
backend:
  phases:
    build:
      commands:
        - "# Execute Amplify CLI with the helper script"
        - amplifyPush --simple
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
        - yarn add mocha mochawesome mochawesome-merge mochawesome-report-generator
    test:
      commands:
        - npx start-test 'yarn start' 3000 '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 cypress/report/mochawesome-report/mochawesome*.json > cypress/report/mochawesome.json

Download the configuration you updated and put it at the top directory of your project.

Once you complete the configuration, you can see the “test” step in the deployment flow.

You can overwrite the configuration you saved on management console by putting amplify.yml at the top directory of your project. Please read this document to know details of configuring build settings.

So let’s apply this setting to the develop branch.

git add .
git commit -m "add cypress settings"
git push

Then go back to Amplify Console and the deployment is finished after a while. Click “test” step in the flow and see the results of the E2E testing.

You can see that the test for authenticator has been succeeded. You can also download a movie file capturing how the test was going by clicking “Download artifacts” button.

Please uncompress that file and play the mp4 file. You see that the test was done as you expected.