Improving E2E Testing for Angular applications using Cypress

End to End testing is a technique for testing an application from start to finish. We try to replicate actions that a real user would perform on our system and automate them.?

It helps in testing the complete flow of the system and helps us ensure there are no bugs in the system. It helps save significant amount of time and effort by catching bugs early on. And we could avoid manual testing for the common user scenarios.

About Cypress

Cypress is one of the most popular end to end testing framework with more than 4 million weekly downloads as of writing this article. It can be used with frameworks like React, Angular, Vue, Elm, etc. We can also use Cypress for testing components and API's.

Cypress runs in a browser and can be configured to run in Chrome, Firefox, Edge, Electron and Brave. Here are some of the key benefits of using Cypress:

• Cypress is really easy to use and has low learning curve.?
• It has great documentation and community.?
• It can be configured to a great extent.?
• It has lot of plugins and extensions which makes most of our tasks simpler.?
• It has great debugging support. It takes snapshots of the application which enables us to go back to the state it was in when commands ran.
• It easily integrates with Gitlab CI and other CI providers.

Advance Usage

Cypress operates within the application, that means it has native access to every single object. Having native access allows our test code to have access to all the objects that our application code has access to. This allows us to have advance control over the application and perform actions such as:

• Stub the browser or application's function and force them to behave as desired.
• Control timers so that they get fired as desired without actually waiting for them to complete.
• Add our own event listeners to respond to our application.
• Control network traffic and rest calls.

Installation

Setting up Cypress with Angular application is really straight forward.?Executing following command in the root directory of the application will initialise Cypress in our application.

The above commands will add the required packages and commands to the package.json file and angular configuration to the angular.json file. An additional directory will be created which will contain everything related to Cypress.

On initialisation, Cypress creates a basic configuration file cypress.json which looks something like this:

• integrationFolder?is the folder which contains all the test files.?
• supportFile?is the place where we add our custom functions (abstractions)?
• fixturesFolder?is the place where we add our resource files such as images, pdfs, json?
• baseUrl?is the prefix used for routing commands of cypress

Cypress Commands

Navigation Commands

Visit:?Visit is used for navigating to other pages. It appends the base URL provided in the configuration with the route we provide here.

Validating current URL:?For validating the current URL, the location path can be used as follows.

Selector Commands

Get:?Get command is used to gets all the elements that match the selection criteria we provide. The selector can be any class, id, or tag name. We can even use particular attributes of tags to get elements.?

Children:?Children command is used to select all the children elements of the currently selected element.

First:?In case when we have multiple results and want to select the first one, we can use the first command.

Eq:?Eq commands is used to select the nth element from the list of the selected element.

Contains:?Contains command is used to get all elements that contain the specified text.

Find:?Find command is similar to get command except it only operates on the already selected elements and selects only elements that are nested inside that element.

Action Commands

Click:?Click command is used to click on any selected element.

Type:?Type command is used to type anything in input elements.

Select:?Select command is used to select an option from the dropdown. It performs an exact match for selecting the option item.

Assertion Commands

Should:?All the assertions we do in Cypress are done using should. It supports many types of assertions, some of which I will add in the below code block. It has a specific timeout period till which it waits for the assertion condition to be true.

Miscellaneous

Wait:?Wait command can be used to introduce delay when we need to wait for some particular time. It has some advance use cases as well which you can find here -?Wait

Then:?Generally, when we are fetching some elements and performing an action, we assume that it will be present and visible. If we have some optional action that we want to perform only when an element is present then we need to use it with then.

Fixture:?Fixture command is used to load data from a resource file. Once the data is loaded, it can be accessed with then Command.

Request:?Request command is used to perform rest calls. It can be configured with parameters such as body, headers, methods, url, encoding, gzip, form, qs, timeout etc.

Screenshot:?Screenshot command is used to take screenshot of the current application state and save under a given file name.?

Cypress supports many more commands which you can find by going to its documentation.

Abstraction Support

There might be situations where we might be performing some actions repeatedly throughout our test cases. Generally we don't want to duplicate the code for those actions in each test case.

Cypress provides a clean way to deal with this problem. We can create custom commands and add it to Cypress namespace. Once the command is added to Cypress namespace, we can use it like any other Cypress methods.?

Let's take example of user login. This is one of the action that most of the tests perform repeatedly. With Cypress we simply need to create a file login-commands.ts with following code and import it in the file specified in supportFile configuration.

After adding the login command to Cypress namespace, we can simply use the login command like this:?

Extensions

There are some actions that are difficult to perform using Cypress itself. But there are number of libraries available that makes those tasks easier. Here I will try to briefly cover some of the libraries that we are using with Cypress.

Cypress Real Events

By default events in Cypress are simulated. That means that all events like cy.click or cy.type are fired from javascript. That's why these events will be untrusted and they can behave a little different from real native events. By using cypress-real-events, we can perform real actions on our application.?

Cypress File Upload

Cypress File Upload makes testing the file upload process easy. It can attach a single file to input, it can also upload perform drag and drop operations.

Report Generation

We can also generate test reports for the test cases. Test reports could be very helpful for keeping track of tests as a form of test metrics.

You can generate test reports like this using Cypress and Mochawesome report generator.