Web Development

End-to-End Testing with Cypress.io — A Lowdown

In this blog post, our Software Developer Neil talks through end-to-end testing with Cypress.io — a tool we use as part of our development process. It helps us to ensure that user journeys and key functionality are working despite any changes we might make to the code. Here's his low down...

End-to-End Testing with Cypress.io — A Lowdown

Cypress.io helps us to ensure that user journeys and key functionality are working despite any changes we might make to the code.

What is Cypress?

The Cypress website describes Cypress as “fast, easy and reliable testing for anything that runs in a browser.

Cypress is a computer program that programmatically loads up a web browser, loads in the website to be tested and runs a series of tests that are designed to make sure the site is working as it is supposed to be, from the perspective of a normal site user.

The last bit is important — “from the perspective of a normal site user”. Cypress runs the site as if it were a regular user using a web browser such as Google Chrome, Firefox or Edge.

What is end-to-end testing?

To explain what is meant by end-to-end testing, have a look at the following graphic.

What is end-to-end testing ?
The inverted testing triangle.

Unit Tests

These start at a lower level and test individual functions and methods within the code base. These are quick and easy to write, but limited in their effectiveness when looking at the whole system. They make sure things happen at a low level.

Integration Tests

These test the integration of a number of parts of the website system. For example does the code pull data from the database properly? Does an external API call work and display properly?

Integration tests can test parts of the system independently or in silos. However, we can go one step further: with end-to-end tests. These should be our ultimate goal.

End-to-End / UI Tests

Testing the whole application — as a user would — is the goal here. End-to-end can be seen as testing the whole website from front to back, or from the UI, through the calling code to the database.

We aim to copy the actions and behaviour of the user and simulate them in the tests. This allows us to be sure that things are working across the system as expected.

In our case, these tests do the following...

  • Test functionality such as contact forms, or date pickers and searches
  • Test user journeys such as adding to cart, checking out and then buying
  • Test navigation and the existence of pages
  • Check download links for the existence of a pdf download

Not Browser Testing

With Cypress, we do not test how things look or display in different browsers. Browser testing is normally largely a manual process and is painstakingly done to make sure things look the same in a multitude of different devices at different sizes.

Website being constructed.

How does Cypress improve our products?

Once a website is live, that is rarely the end of the story. They evolve, change and grow both in terms of content and functionality.

When we make a change to some part of the site — perhaps we are adding some new features or changing how one part of a user journey works — it is vitally important that we know something hasn't inadvertently stopped working elsewhere on the site.

Checking the whole site by hand can be time consuming, so running these tests (both during development and before deploying to live) ensures that it works as we expect despite the changes.

The anatomy of a simple test

No post would be complete without showing a simple test in action. One important piece of functionality that any website might have is a contact form.

For many sites, this might be a key channel of customer communication and it is important that it works.

There are 4 key elements to any test:

  • Context - This describes what the set of tests will do. In our example below the context states that we will test the contact form.
  • The tests - there can be many tests within a context. At a minimum each test will contain two things
    • An action - For example, 'navigate to the home page' or 'click a link'
    • An assertion - This is what passes or fails the test. We make an assertion that something should happen. If it does, then great, if it doesn't, then the test might fail.

An Example Cypress Test

The following Cypress code will test a simple html form.

      context('Test a simple contact form', () => {

    it('must have one html element`', () => {
        cy.visit('/form.html');
        cy.get('html').should('have.length', 1)
    });

    it('must have a form paragraph tag, with some introductory text', () => {
        cy.get('form > p')
            .should('contain','Please fill out the form below')
    });

    it('must have a required text form attribute with name element equal to name', () => {
        cy.get('form [name="name"]')
            .should('have.attr','required')
    });

    it('must have a required email form attribute with name element equal to email-address', () => {
        cy.get('form [name="email-address"]')
            .should('have.attr','required')
    });

    it('must not submit without data', () => {
        cy.get('button').click()
        cy.get('form input#fullname:invalid').should('have.length', 1)
    });

    it('must submit to form-result.php', () => {
        cy.get('form')
            .should('have.attr','action', 'form-result.php')
    });

    it('should accept some input and submit', () => {
        cy.get('form [name="name"]')
            .type('Neil Charlton')
        cy.get('form [name="email-address"]')
            .type('myname@madebyextreme.com')
        cy.get('button').click()
        cy.get('p.response')
            .should('contain', 'Thank you')
    });
});
    

contact-form.spec.js

If you want to learn more about this powerful testing automation tool, look in the Cypress.io docs or feel free to send us any questions.

See you next time for part 2 which will look at more advanced testing scenarios.

Good read? Why not spread the word!

End-to-End Testing with Cypress.io — A Lowdown

Could our dev team work their magic on your digital presence?

Show me the code!

Stay up to date

Insights & Industry News

If you want more expert viewpoints, industry insights and general marketing know-how from Team Extreme, get signed up.

Show us your briefs.

NEW ONES, OLD ONES, TIGHT ONES? SHOW US YOUR BRIEF IN UNDER 250 WORDS AND WE'LL KICK-START YOUR SUMMER 2020 MARKETING.

FRESHEN UP YOUR SUMMER BRIEFS TODAY - FIND OUT MORE

Briefs toast