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.
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.
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('[email protected]')
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.
Could our dev team work their magic on your digital presence?
Show me the code!Post by
Project
