Getting Started With Cypress

Cypress is a JavaScript-based all-in-one framework for end-to-end testing that already comes with all the built-in features you may need.

Cypress Installation Guide

Prerequisites:

• Install Visual Studio Code IDE [You can use any IDE]
• Install NodeJS

Here is the detailed installation guide for Cypress.

Cypress is shipped as an NPM package, so just install the npm package from the repository and configure it to use Cypress.

To start with, create a new folder, I called mine cypressdemo, move into it and initialize a new JavaScript project:

mkdir cypressdemo && cd $_

npm init -y

• Inside the cypressdemo folder, open terminal or command prompt.
• Enter the command: npm install cypress –save-dev
• Once the installation is complete, enter the command: npx cypress open

The npx cypress open command prepares Cypress for the first time and launches the Cypress test runners, where we can see example tests and play around with them.

Understanding Folder Structures in Cypress

By default, Cypress comes with a folder structure. The main folder is cypress, within which there are subfolders.

• Integration: This folder contains the actual test scripts.
• Fixtures: If you are using external data inside your tests, your data can be organized inside the Fixtures folder.
• Plugins: The Plugins folder contains the special files which can be used to execute the code before the project loads. If your project needs any pre-processors, include them in this folder and configure them accordingly. By default, the plugins folder contains the index.js file, which can be customized to create your own tasks.
• Support: The Support folder contains utilities, global commands, frequently used codes etc. By default, this folder comes with two files — commands.js and index.js, additional files and folders can be added as required.
• Assets: A folder called downloads will be created after the test run which includes screenshots, videos, etc.

Writing your First Test Case for Cypress Automation

The cypressdemo folder contains

1. node_modules folder
2. cypress folder
3. cypress.json file
4. package.json file
5. package-lock.json file.

In order to create your tests, navigate to cypress/integration and create a fresh new folder (eg: demo).

Inside the demo folder, create the test file (ex: firsttest.js) using the code below:

//firsttest.js

describe(‘My First Test’, () => {

it(‘Launch Browser and Navigate’, () => {

cy.visit(‘ https://www.google.com/ ‘);

cy.title().should(‘eq’, ‘Google’)

})

})

Running First Automated Test with Cypress

1. Execute Cypress Tests Using Cypress Test Runner

From your Visual Studio Code Terminal or Command-Line, run the command at the project folder level (cypressdemo).

npx cypress open

The command above opens the Cypress Test Runner. Choose the newly created test file.

Click on the firsttest.js file under the demo folder to execute tests.

2. Running Cypress Tests Using Command Line

Syntax:

npx cypress run [--spec <path_to_spec_file]

Run firsttest.js using the command below:

npx cypress run --spec "./cypress/integration/demo/firsttest.js"

The command above executes tests in headless mode, so we will not see any browser launches or execution of tests, all of which happen in the background.

About the Author:
Thimmaraju is a QA Automation Engineer here at Version 1.