Cypress for e2e testing

As many of you know, I don’t make it a secret that I’m not an amazing front-end guy. However, since I have a mantra of “test all the things” that I’m working on, when I have to do front end work, it’s my goal to test everything.

I start by using sitespeed.io for testing the page load and performance times of my application. This is critical in ensuring that the code that I’m writing is performant, and doesn’t introduce any critical latency bugs to the application. I can integrate sitespeed.io into my gitlab workflows – which is super critical, as I can reject any builds that are not performant, and a video and screen shot of the home page (and any associated pages that I’m testing) are part of the artifacts created: this enables me to provide “page level diffs” showing the content on the page that has been changed. The one thing that Sitespeed cannot do, however, is testing functionality. You’re limited to grabbing pages via URL, and can’t pass data into forms for posting.

Enter Cypress.io, a javascript based testing framework: As of right now, it’s electron/chrome only (Electron on Linux, Chrome on OSX and Windows), but, it allows you to test logging into devices and performing actions based on that. You can also send your tests to their dashboard, where you can track your tests without being near your CI instances.

I keep both of these actions in the respective .gitlab-ci.yml file, and the logs of both (specifically, the output from cypress run and sitespeed.io’s docker run) are stored as artifacts. Add this into Gitlab’s AutoDevops, and you’ve got a nice mix of tools that enable front-end testing on your applications.