Why I’ll Be Using Cypress For UI Automation

I’ve mentioned in previous posts that I don’t do much UI automation.  This is because the team projects I am currently on have almost no UI, and it’s also because I’m a strong believer that we should automate as much as we can at the API level.  But I had an experience recently that got me excited about UI testing again!

I was working on a side project, and I needed to do a little UI automation to test it out.  I knew I didn’t want to use Selenium Webdriver, because every time I go to use Webdriver I have so much trouble getting a project going.  Here’s a perfect example: just one year ago, I wrote a tutorial, complete with its own GitHub repo, designed to help people get up and running with Webdriver really quickly.  And it doesn’t work any more.  When I try to run it, I get an error message about having the wrong version of Chrome.  And that is why I hate Webdriver: it always seems like I have to resolve driver and browser mismatches whenever I want to do anything.

So instead of fighting with Webdriver, I decided to try Cypress.  I had heard good things about it from people at my company, so I thought I’d try it for myself.  First I went to the installation page.  I followed the directions to install Cypress with npm, and in a matter of seconds it was installed.  Then I started Cypress with the npx cypress open command, and not only did it start right up, I also got a welcome screen that told me that there were a whole bunch of example tests installed that I could try out!  And it automatically detected what my browser was, and set the tests to run on that version!  When I clicked on the Run All Tests button, it started running through all the example tests.  Amazing!  In less than five minutes, I had automated tests running.  No more Chrome version must be between 71 and 75 messages for me!

The difference between Cypress and Webdriver is that Cypress runs directly in the browser, as opposed to communicating with the browser.  So there is never a browser-driver mismatch; if you want to run your tests in Firefox, just type npx cypress run –browser firefox, and it will open up Firefox and start running the tests.  It’s that easy!  In comparison, think about the last time you set up a new Webdriver project, and how long it took to find the Firefox driver you needed, install it in the right place, make sure you had the PATH configured, and reference it in your test script.

Here are some other great features of Cypress:

• There’s a great tutorial that walks you through how to write simple tests.
• Every test step has a screenshot associated with it, so you can scroll back in time to see what the browser looked like at each step.
• Whenever you make a change to your test and save, the test automatically runs in the browser.  You don’t need to go back to the command line and rerun a command.
• You don’t have to act like a user.  For example, you can make a simple HTTP request to get an authentication token instead of automating the typing of the username and password in the login fields.  
• You can stub out methods.  If you wanted to test what happens when a certain request returned an error, you can create a stub method that always returns an error and call that instead of the real method.
• You can mock HTTP requests.  You can set an HTTP request to return a 404 and see what that response looks like.
• You can spy on a function to see how many times it was called and what values it was called with.
• You can manipulate time using the Clock method- for example, you can set it to simulate that a long period of time has elapsed in order to test things like authentication timeouts.
• You can run tests in parallel (although not on the same browser), and you can run tests in a Continuous Integration environment.