Tobias Williams

Adding testing using Cypress.io

I've been wanting to dig into build tests for a while. I was excited to try cypress.io as it is open source and Javascript. I think the thing that interests me about adding tests is that it really makes you think about how the code you are writing should work.

So let us get rolling on this.

Cypress has really good docs! Woo for that.

As this had a node package, I was able to leverage our current set up to get this installed.

So without retyping the entire docs, I got the dashboard working and I tied it to my git repo for this product.

The cypress dashboard is pretty neat:

Here you can see the tests we have written (more details soon). You can also specify what browser the tests are run in. Clicking the the test name will kick it off, and open the browser while it runs the tests in real time:

To add tests, you use the cypress/integration folder.
My test file lives here. Right now this test is testing all the social links, to make sure that each of them has the correct pathing.

Briefly we are telling cypress to go to our homepage to test:

describe('social links test', function () {   beforeEach(function () {     cy.visit('https://widescreenbob.com/')   })

When it gets there, we want to test our social links:

context('testing the twitter', function () {   it('Checks to see if the twitter link contains the base url', function () {
    cy.get('.twitter')
      .should('have.attr', 'href')
      .and('include', 'twitter.com')
  }) })

So lets see what that looks like on a pr in git:

You can see that cypress is part of our pre merge checks. This is a great start to our testing program. Right now, you can see our test isn't doing anything useful, as it is testing against the live site. So our next adventure will be extending this.