Automating APEX: End-to-end testing with Cypress for beginners - Part 1

This is part 1 of a multi-part series. In this post, I’ll introduce Cypress and its core concepts; in future posts I will cover creating your first test suite and APEX specific problems with Cypress.

One problem my team and I face as APEX developers is testing. While everyone loves developing new, exciting features, no one enjoys the tedious, monotonous task of manually clicking through reports and entering test data. 

APEX apps feature a wide variety of different components, such as interactive grids, modal dialogues, and dynamic page items – all of which make manual testing error prone and extremely time consuming. I was tasked with finding a way to automate the process and after researching several options, I landed on Cypress.

Why Cypress?

Cypress is an end-to-end (E2E) testing framework built in JavaScript. Although APEX isn’t traditionally JavaScript heavy, Cypress proves to be a powerful solution when it comes to automating workflows within APEX. 

Cypress simulates real user behaviour, providing a UI which displays a real-time playback of the user created test suites. Unlike other testing tools that drive a standard chrome tab, Cypress uses its own custom browser environment, this allows Cypress to produce a detailed log of what is happening in the DOM and provide point-in-time snapshots, which is a huge help when it comes to debugging.

Cypress also utilises built in waits, meaning it automatically waits for elements to appear and commands to complete. Where other testing tools would require waits to be hard coded, Cypress does the work for you. This results in fewer flaky tests, and fewer headaches.

Cypress 101: Understanding the basics

Before we create our first test, let's cover some of the fundamentals that you will need to get started.

Describe()

A describe() block is what comes at the start of every test suite. It can be thought of as a big container to group your tests together. It should describe the general purpose of what you are testing on a broad level. Here is an example of a basic describe block for a login test:

describe(`User Login`, () => {

    // Test steps go here

});

It()

It() functions are nested within describe() blocks, they break the test down to a more granular level, focusing on smaller tests that accomplish the goal set out by the describe(). Here is another example, following on from the previous point.

it(`should allow admin users to create a profile`, () => {

    // Test steps go here

});

Assertions

Assertions are used to verify your test is working as intended and isn’t aimlessly clicking through menus. They can be used for checks such as if an item exists, or if an item is visible to the user. This assertion would pass if the element `alphabet` contains the letter `J`

 cy.get(`#alphabet`)

   .should(`contain`,`J`)

Commands

Repeated code is something that should always be avoided, but that can be difficult when testing. Any reusable logic such as the process of logging in as a user, creating a piece of sample data, or navigating through menus, can be extracted and stored as a command, making your suites more manageable and easier to maintain.

Commands are found under the support folder, which is configured automatically during the installation of Cypress.

Before hooks

Before hooks live in describe() blocks and, as the name suggests, are executed before it() functions. They are generally used to initialise the test environment, performing set-up tasks such as logging in a user, navigating menus, or seeding test data. Before hooks can be combined with commands to clean up your tests and reduce repeated code. 

After hooks

Similarly to before hooks, after hooks are functions that run once the tests in the describe block have finished. They are typically used for cleanup tasks, such as deleting test data or resetting configurations, preventing your database from getting clogged up with duplicate or unnecessary information that could have an effect on performance.

Summary

In this post, we covered what Cypress is and some of its core concepts, such as describe(), it(), assertions, commands, and hooks. These form the foundation of Cypress and are vital to creating well structured, maintainable tests. In the next post, I will walk you through the steps of setting up your own suite and writing your first test - so if you are ready to leave manual testing in the past, keep an eye out for my next post!