UI testing done right with Cypress.IO

by dotnetnerd 11. October 2018 12:07

Finally, someone has written a UI testing tool for the web and done it right! For at least 5 years I have been envious of the UI testing tools that were written for native application development. I have tried various tools for UI testing websites, but they all relied on selenium, which sucks harder than my vacuum cleaner. No matter how much lipstick you put on a pig, it is still a pig, so the brittle nature of selenium would bleed through, and require you to do updates to drivers as well as handle very low level things like timing between a click and the actual page being re-rendered. So working with those tools has been slow and painful.

By coincidence I stumbled on cypress.io a few days ago, and right how I think it is the best thing since sliced bread.

Getting set up is litterally one single npm install, and they you are ready to go. The tests are written using mocha, chai and sinon, like we are used to. To there is no learning curve there.

Controlling the browser actions is done through an API that is so simple that my first test worked right off the bat, and it is very well documented. On top of that it includes the jquery, lowdash, moment, minimatch, blob and promise libraries that are all well known for most of us working with javascript.

Running the tests is done using the equally well documented and easy to use cypress cli, which can either run the tests directly using a headless browser, or it can open the cypress application, where you get a well designed UI. In the UI you can pick exactly which tests to run, you see them running I  a browser window and the steps are listed. Not only that but you get time travel by hovering each step, so you will see exactly what the pages looked like at that point in time. On top of this it records video and takes screenshots when an error occurs, so you can add that to your bug report.

The ability to do this using a headless browser means that it is really easy to integrate into your CI build. Actually they have comprehensive guides for all the big CI solutions. It also includes reporters, so you get a nice report as part of your overall CI report.

So it is safe to say that I am very impressed and I can't wait to use this for my current project. Oh and I mention it is free, as in beer.

There is one downside currently that I ha e to call out. It is the fact that currently it is limited to the different versions of chrome browsers. No IE, no Edge and no Firefox. I believe it is being worked on, from what I read on the website, so we will get there, but for now that means it does not solve cross browser testing.

Who am I?

My name is Christian Holm Diget, and I work as an independent consultant, in Denmark, where I write code, give advice on architecture and help with training. On the side I get to do a bit of speaking and help with miscellaneous community events.

Some of my primary focus areas are code quality, programming languages and using new technologies to provide value.

Microsoft Certified Professional Developer

Microsoft Most Valuable Professional

Month List