Chapter 8: Test Automation with Cypress

In this chapter, we will learn how to add test automation to our Amplify apps with Cypress. The AWS Amplify team announced that they added the test phase to the build pipeline of Cypress in late 2019, which set themselves apart from the competition. Many might argue that end-to-end (e2e) test automation requires a lot of effort to maintain, but e2e test automation has actually become much easier to implement than ever before.

Before we talk about end-to-end test automation, we should talk about Behavior-Driven Development (BDD). BDD is a way to shorten the feedback loop for the development cycle with e2e test automation. BDD is also known as Specification by Example and Executable Specification. Earlier in this book, we had to write specification documentation for the development team to write code and then let the testing team test the system manually. This may still sound familiar to many companies. But in the last 10 years, technology...

Technical requirements

To carry out the exercises in this chapter, you must have completed the exercises in the previous chapters so that you can apply end-to-end test automation to the web app. Cypress will only work for web technologies such as ReactJS, so if your app is based on React Native, you will have to add the react-native-web library to the project to make it work. However, for the React Expo app, which already has the Expo Web library built into it, you don't need to do anything.

You can download the files for this chapter from the following link: https://github.com/PacktPublishing/Rapid-Application-Development-with-AWS-Amplify/tree/master/ch8/reactjs.

Setting up Cypress with Cucumber

Let's open the project again and run the following command in the Terminal to install the libraries for BDD:

yarn add -D cypress cypress-cucumber-preprocessor @cypress/webpack-preprocessor @types/cypress-cucumber-preprocessor mochawesome mochawesome-report mochawesome-merge mochawesome-report-generator ts-loader

Here, we have added the Cypress and Cucumber libraries for BDD, as well as the related Mocha awesome library for generating test reports that the Amplify pipeline can pick up.

Before we start integrating Cypress and Cucumber, we should initialize Cypress in our project so that Cypress can generate everything that's necessary for integration:

1. Run the following command in the Terminal to initiate Cypress in our project:

   yarn run cypress open

2. The Cypress binary should launch the very first time and generate the necessary files, as follows:

   Figure 8.1 – Cypress initialization

3. Open the cypress.json file and...

Understanding the workflow to leverage BDD

To do BDD properly in any businesses, we should consider the following workflow. We will show you all the essential examples throughout this chapter:

1. Share a common understanding of the desired behavior of the solution or a feature between the business and technical teams via a conversation.
2. Capturing the conversation as a User Story with the Gherkin syntax, which the system uses to check against the desired system behavior automatically through test automation.
3. The development team needs to fulfill the desired system behavior by writing test cases (step definitions) and the actual code to build the system.
4. Deploy the increment (frontend and backend artifacts) to an environment that can be accessed by both the business and technical teams automatically through the DevOps pipeline.
5. Perform e2e test automation automatically.
6. Generate Living Documentation in any format, such as text or video, automatically that the...

Writing executable User Stories in Gherkin

Writing executable User Stories with Specification by Examples in Gherkin requires some practice. Gherkin is a domain-specific language for creating concrete examples of how a system should interact with the user in plain English, which everyone in the business can understand. The more you practice, the more you will get used to it quickly. So, let's start with a few common scenarios that will help you create a couple of feature files. Remember that each feature file can have multiple scenarios, just like each User Story can have multiple scenarios (also known as Specification by Example or Executable Specification). You can see this variation in the following examples:

• A simple feature that requires no user input:

  Feature: A short description of the feature
    User story of the feature goes here
      Rule: Business rule goes here
      Description about the business rule
    ...

Writing test cases as step definitions with TypeScript

In this section, we will show you how to create step definitions to fulfil the feature file that we created in the previous section. A step definition is the actual implementation of the executable Specification by Examples. This means that we have the User Story in plain English so that both the business and technical teams will understand it. Then, we fulfil it with the code of the actual app and ensure that each step of the test case will pass each user scenario. The recommended procedure for BDD would be as follows:

1. Come up with a User Story with Specification by Examples (SBE) first.
2. The development team will pick up the executable specification and run it. The console will tell you that there is a failed test case that we need to implement for the step definitions.
3. Write some code for the actual app that can pass the test case.
4. Write the step definitions and rerun the tests.
5. Refactor the code of the...

Integrating Cypress with the DevOps pipeline

In this section, we will show you how to add the e2e test phase to the DevOps pipeline. At the time of writing, Cypress only works on the root directory with a single app. If you have a monorepo that contains many apps, then you will need to create a new repository and create an Amplify app to enable the e2e test.

If you set your Amplify app to manual deployment earlier in this book, then you might want to change Amplify Hosting to continuous deployment instead of manual deployment. You can run the amplify add hosting command again to select continuous deployment. This will take care of integrating the DevOps pipeline with the Amplify app:

amplify add hosting
? Select the plugin module to execute Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
? Choose a type Continuous deployment (Git-based deployments)
? Continuous deployment is configured in the Amplify Console. Please hit enter once you...

Summary

In this chapter, we learned how to use Cypress and Cucumber to achieve BDD and test automation in one go. BDD and end-to-end test automation help in bridging the communication gap between the business team and the technical team, as it allows them to communicate directly to come up with SBE that have a common understanding. This will greatly reduce the rework rate of the upcoming project for your company.

The AWS Amplify pipeline takes this to the next level by handling all the Ops for the development team. All you need to do is configure the actual DevOps steps; the pipeline will be taking care of itself. I would call it NoOps since most of the Ops have been handled by the Amplify pipeline. Now, you only need to focus on shipping new features to the customer instead of fiddling around with the DevOps pipeline and test automation toolchains.

In the next chapter, we will show you how to set up a custom domain for your web app and the latest add-on to the AWS Amplify...