Trying Out Cypress with Circle CI

Circle CI has been around a while but I’ve never tried their service before. There hasn’t been much of a reason to do so; at work I mostly stuck with a local Jenkins instance because it got the job done. But I recently had the urge to try it out for a private project that I have. I wanted to see if it plays well with Cypress, a test tool I’ve been using for some time.

A search tells me that there’s already a Cypress-Docker-CircleCI example on Github, from Cypress themselves. Cool, I just need to copy their settings to my own project and make changes accordingly.

Here’s how the package.json file looks like:

You’ll see a cy:circle-junit command in there, which does the same thing as cy:run (which runs tests on a terminal) but also builds a JUnit report.

To run our tests on Circle CI, we’re going to need a circle.yml file inside our project, which contains the following:

From this file Circle CI is supposed to checkout the test code, run the cy:circle-junit command, which installs Cypress and other dependencies inside a Docker image, saves that image in a cache (and restores that cache for every succeeding test runs as long as the dependencies remain the same), runs our tests inside a container, creates a simple report, and stores test artifacts afterwards. Looks straightforward. 🙂

Now let’s see if things work!

Connecting my Cypress project on Circle CI and pushing code changes on the remote repository automatically creates test runs that shows up on a neat dashboard like so:

And we can zoom in on the details of every test run, which looks like this:

Awesome! Looks like I’ll continue using their service for this project, and maybe on other projects as well. I’m off to adding proper tests to the suite!


Favorite Talks from Sauce Conference 2017

The European Selenium Conference is underway in Berlin but before the talks for that event get uploaded online I thought I should finish binge-watching this year’s Sauce Conference videos first. Many of the talks in SauceConf 2017 are actually similar in feel to those I’ve watched in previous Selenium Conferences, except that a number of them point out how awesome Sauce Labs‘ service has been for their cross-browser and cross-platform testing needs. Not that I mind nor I disagree, even if I have not used Sauce Labs’ extensively. Test automation in the web application space has been mostly stable in recent years and that’s a good thing. Now we are left with discussing the consequences of the automated systems that we have put in place and focusing on other areas which needs further improvement.

Anyway, here are my favorite talks from the conference:

Jenkins User Interface Tweaks

Last week, I have found myself tinkering with Jenkins again because of several reasons. I wanted to schedule the CucumberWatir functional checks I’ve written in the past two months so I don’t have to run them every time in the terminal. I also wanted to have a record of the results of the latest checks so I can look back at them when I need to. More importantly, I wanted a place where anyone from the team can view the said checks and see if our Staging environment is stable or not according to the smoke tests.

Of course, I also wanted this place to be somewhat nice-looking, which the default Jenkins page somewhat lacks.

And this is what I ended up with. :)

And this is what I ended up with. 🙂

And here are the tweaks I did to make the Jenkins user interface a little better:

Upload a Jenkins Plugin

Upload a Jenkins Plugin

Set the Jenkins CSS theme to Material

Set the Jenkins CSS theme to Material

Update jenkins.xml to allow CSS content

Update jenkins.xml to allow CSS content

  • Allow HTML content in views and jobs descriptions. To do this:
    • Go to Manage Jenkins -> Configure Global Security
    • In the Markup Formatter field, select Raw HTML or Safe HTML
    • Click Save
Set View and Job descriptions to display HTML content

Set View and Job descriptions to display HTML content

  • Use the Ansicolor Plugin to properly display colors in the job’s console output. To do this:
    • Download the Ansicolor Plugin
    • Install the downloaded plugin to Jenkins (Manage Jenkins -> Manage Plugins -> Advanced -> Upload plugin)
    • Configure the desired job’s Build Environment to use the Color ANSI Console Output
Set a desired Jenkins job to use colored outputs in the console

Set a desired Jenkins job to use colored outputs in the console

Sample Jenkins colored console output

Sample Jenkins colored console output