The simple guide to Cypress.io test automation

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.

Hint

Actions used in this guide:

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...Example website

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$
Tip
You can also use a shortcut: $ $(npm bin)/cypress open

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

Image loading...Cypress window

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...Cypress window with new test

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...Cypress test after execution

Tip
To see other possibilities that Cypress offers and learn how to group a higher number of tests, we recommend to take a look at other example tests in the cypress/integration/examples folder.

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...Selecting Git provider

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...Pipeline creator

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

Image loading...Pipeline browser

In the commands tab, enter:

default
npm install --force npm run cy:ci

Image loading...Cypress action creator

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. 😎💪

Hint

Related read

  • Deployments – learn how to configure a pipeline that will deliver your application to the server.
  • Services and databases – learn how to attach microservices and use them in your builds and tests.
  • Daily integration tests – learn how to define a pipeline that will automatically run integration, E2E, and browser tests on specific date and time.
Jarek Dylewski

Jarek Dylewski

Customer Support

A journalist and an SEO specialist trying to find himself in the unforgiving world of coders. Gamer, a non-fiction literature fan and obsessive carnivore. Jarek uses his talents to convert the programming lingo into a cohesive and approachable narration.