The simple guide to Cypress.io test automation

Cypress is a tool which contains all necessary components for website testing in one package, created to make tests writing easy and fast.

Objectives of this guide

This guide will:

• Present an example how to use Cypress locally
• Show you how to automate Cypress tasks in Buddy

To perform the following steps you will need:

• Node.js in version 8 or higher
• Git repository
• IDE/text editor

Downloading an example project

Begin with cloning the example React project: github.com/ahfarmer/emoji-search.

Next, install the required dependencies:

bash
npm install$

To check if the project works, we will use the command:

bash
npm start$

Our site should now be available at the address localhost:3000:

Image loading...

Cypress installation

Once you have the project to test, it's time to install Cypress:

bash
npm install cypress —save-dev$

Now we need to launch it. If you have npm in version >v5.2, run:

bash
npx cypress open$

Otherwise, use a full path:

bash
./node_modules/.bin/cypress open$

The command will create a folder named cypress in your project. You should also see a window like this:

Image loading...

Creating an examplary test

By default, all tests are stored in the cypress/integration folder which is automatically created on the first Cypress launch. In this example, we'll write a test that will:

• check if entering the word "lollipop" will display only one result on the page
• check if the tag tag with the title class contains the appropriate text

Begin with creating a sample_spec.js file in the cypress/integration directory:

The file shall contain the code below:

js
describe('Sample test', () => {
    it('Search lollipop emoji', () => {
        cy.visit('http://localhost:3000/') // launch project website
        cy.get('input').type('lollipop') // enter 'lollipop' in search 
        cy.get('.component-emoji-result-row').should('have.length', 1) // check if only 1 result is returned 
        cy.contains('Lollipop').should('have.class', 'title') // check if returned element contains 'title' class
    })
})

You should be able to see the test in the Cypress window:

Image loading...

Once you click it, a window with a search engine instance will be opened in which you can preview the performed test live. The result should look as follows (keep in mind that the project with your exemplary website should be running):

Image loading...

Tests automation with Buddy

Buddy is a Continuous Integration and Delivery tool that lets you optmize your testing and deployment process. Contrary to other tools, it's very easy to use and requires no DevOps experience as the whole process is reproduced into GUI with pipelines and actions. It also sports a dedicated action for Cypress which is basically an isolated container in which you can run your tests.

Preparation

For the purposes of this guide, we'll use the project above. Make sure to do the following things first, however:

1. Delete the folder with the exemple tests: cypress/integration/examples

2. Install start-server-and-test:

   bash
    npm install start-server-and-test --save-dev$

3. Add three scripts in the package.json file at the end of the scripts object:

   json
        "scripts": {
            ...
            "start-server": "npm start",
            "cy:run": "cypress run",
            "cy:ci": "start-server-and-test start-server http://localhost:3000 cy:run"
        }

4. Upload the project to a Git repository, for example GitHub.

Pipeline configuration

With everything ready, log in to your Buddy account and create a new project:

Image loading...

Next, add a new pipeline. You can set the pipeline to run on every push to the repository, manually on click, or recurrently on the selected time interval. In this case we'll set it to automatic mode:

Image loading...

With the pipeline in place, you can add the Cypress action:

Image loading...

In the commands tab, enter:

default
npm install --force
npm run cy:ci

Image loading...

That's it! From now on, Buddy will run your tests whenever a new commit appears in the selected branch.

Summary

This guide is a very straightforward introduction to Cypress and test automation. However, with Buddy you can do much more: upload files to the server, attach MySQL, Redis, and other services required by your tests, manage AWS applications, or release your application to a wide range of cloud services. Make sure to check the related read below to learn how to expand automation in your workflow so you can spend more time coding, and ultimately become a better developer. 😎💪