{"id":22445,"date":"2020-05-21T14:19:08","date_gmt":"2020-05-21T14:19:08","guid":{"rendered":"https:\/\/www.heartinternet.uk\/blog\/?p=22445"},"modified":"2020-05-21T14:19:08","modified_gmt":"2020-05-21T14:19:08","slug":"getting-started-with-front-end-testing-using-cypress","status":"publish","type":"post","link":"https:\/\/www.heartinternet.uk\/blog\/getting-started-with-front-end-testing-using-cypress\/","title":{"rendered":"Getting started with front-end testing using Cypress"},"content":{"rendered":"

We all know that testing is important, but this is often limited to unit testing<\/a> and integration testing<\/a>, focusing on the back-end of our application, and we tend to forget about testing the front-end. There are so many different types of tests that we need to run on the front-end, it’s hard to know where to start. There’s accessibility testing, performance testing, user testing, HTML validation, visual regression testing and UI testing \u2014 not to mention the countless tools<\/a> available for each type, and the different ways to set them up.<\/p>\n

To help get you started, we’re going to look at just one thing in particular in this article: UI testing with Cypress.<\/p>\n

What?<\/h2>\n

User interface (UI) testing<\/strong> is done on the front-end of the website and makes sure that the users can do what they’re supposed to be able to do. Can they click on the buttons, can they see elements that they should be able to, can they type where they’re supposed to, and does it respond the way it should?<\/p>\n

Cypress<\/a> is an open source tool for end-to-end testing, which involves testing the application from the start to the end (end to end). The capabilities of Cypress are extensive, but for the purpose of this post we\u2019ll just concentrate on UI testing. It\u2019s compatible with Windows, Linux and Mac, and language agnostic (which means it can be used no matter the language your website\/application is written in). The free version covers three users and 500 test recordings per month.<\/p>\n

Why?<\/h2>\n

The UI is what your users see, when they interact with your application. It’s what they look at on the device, what they click on, what they enter information to \u2014 and they expect it to work. Running UI testing can help automate checking that the application works the way it was intended, on different browsers and at different screen sizes.<\/p>\n

For a number of reasons, your code may affect areas of the application that you didn’t expect it would. A change in stacking order could mean that a key button is no longer clickable, a form may no longer submit properly, or content may no longer appear on the page at smaller screen sizes. UI testing allows us to automatically run these checks as part of the deployment pipeline, so we can catch issues before the users see them.<\/p>\n

This kind of UI testing can also be used as a more forgiving alternative to visual regression <\/a>testing, which is a pixel-by-pixel comparison of two website screenshots (one before the change, one after), to make sure that nothing has changed. Unfortunately, this kind of test often yields false results as content may change or images or other assets may not load properly. UI testing can be useful when you don’t need to know if the page is pixel-for-pixel identical to before, you just need to make sure the right elements still appear on the page.<\/p>\n

How?<\/h2>\n

Installing and running Cypress<\/h3>\n

One of the reasons to use Cypress for UI testing is that it gives you something to get started. Install Cypress in your project using npm<\/a> or yarn<\/a>.<\/p>\n

Note:<\/strong> If you’re on Windows and use WSL, you’ll need to install Cypress on Windows instead of in the Linux subsystem, so that it can access your browsers to run the tests.<\/p>\n

npm install cypress<\/h4>\n

When you run Cypress for the first time, it will generate a folder called cypress<\/em> inside your project and include all the files you need (including a couple of example tests).<\/p>\n

cypress open<\/h4>\n

When you run Cypress, it will open the task runner, and list all the tests you have available to run (they include a folder of examples to start with). In recent updates, they now also include several other browser options (before then you could only test with Chrome or Electron browsers).<\/p>\n

\"\"<\/p>\n

From the task runner, you can run individual test files by double-clicking on them, or use the Run all specs<\/em> option. This will then load a new browser window and iterate through the written tests that you’ve defined.<\/p>\n

\"\"<\/p>\n

Writing tests<\/h3>\n

Any tests for Cypress should be saved in the cypress\/integrations<\/em> folder. There should be a folder example in there with some pre-created test examples. Cypress bundles together Mocha<\/a>, Chai<\/a> and jQuery to build its tests, which can be a little strange to work with at the start, but it gets easier.<\/p>\n