Cypress Framework

Cypress framework is a JavaScript-based end-to-end testing framework built on top of Mocha – a feature-rich JavaScript test framework running on and in the browser, making asynchronous testing simple and convenient. It also uses a BDD/TDD assertion library and a browser to pair with any JavaScript testing framework.

Two primary features developed specifically for Cypress framework are:

Automatic waiting – Cypress waits for the elements to become visible, the animation to complete,DOM to load, the XHR and AJAX calls to be finished, etc. Hence, there is no need for implicit and explicit waits to be defined.
Real-Time Reloads – Cypress is intelligent enough to know that after saving a test file (xyz_spec.js file), the tester is going to run it again. So, it automatically triggers the run next to the browser as soon as the tester saves their file. Hence, there is no need to manually trigger the run.

Features of Cypress Framework

It waits to execute the test command automatically and enacts assertions before executing the next commands to be run.
It captures screenshots during test case execution to help with debugging.
It debugs test execution more efficiently since it provides the interactive test execution with Test Runner and logs.
Because of architectural design differences from other test frameworks, it provides users with faster and more reliable test execution.

Installation of Cypress Testing Framework

Cypress can be installed using Npm package manager as shown below:

npm install cypress --save-dev

The Cypress desktop application supports the following operating systems:

MacOS 10.9 and above (64-bit only)
Windows 7 and above
Linux Ubuntu 12.04 and above, Fedora 21 and Debian.

Prerequisites:

One needs to have Node.js preinstalled in their systems as Cypress is a Node-based application. Node.js is a JavaScript runtime environment. One can download and install Node.js for a particular operating system from this official resource. The Node.js installation also covers the installation of npm (Node package manager).

Cross verify the Node.js installation by running the command: node –version in the terminal. To verify the

npm version, run the npm –version command.

A user also needs to have a code editor like Microsoft’s Visual Studio Code for convenient programming and maintaining project directories.

How to install Cypress?

There are two ways to install Cypress:

1. Using NPM

To install Cypress using the npm (Node package manager) navigate to the project directory and execute the following command:

npm init

The command above creates the package.json file. Just provide fundamental details like – package name, description, keywords, and author name.

The image below represents the final package.json file once the user fills up the details.

Once done, run the command below to install Cypress.

npm install cypress --save-dev

The command above installs Cypress locally as a dev dependency for the particular project.

Note: Users need to ensure that they have already executed the npm init command. One must also verify the existence of the node_modules folder or package.json file in the root of the project to ensure Cypress is installed in the target directory.

For users willing to install Cypress using the Yarn package manager, navigate to the project directory, and execute the following command:

 yarn add cypress --dev

2. Downloading Cypress Directly

For users who are not acquainted with npm, yet want to instantly try Cypress, it is possible to directly download the zip file of Cypress from the CDN.

The direct download link automatically detects the user’s platform and fetches the zip file with the latest version of Cypress. Bear in mind that users that have downloaded Cypress directly won’t be able to record the dashboard. Once the zip file is downloaded, simply unzip and double click to start the Cypress application. It will start without the need for installing any dependencies.

Components of Cypress Framework

The following components play a part while executing particular test cases:

Spec File: Contains the It(){} blocks where test execution begins. Every spec file has one describe {} block and in which different it{} blocks are contained.
Page Object File: Lists the methods that contain tests’ business logic. These methods comprise the actual Cypress commands to interact with the real application.
Page Selector File: Contains the actual locators of UI elements in a real application.
Constants File: Used to hold any constants used throughout test files.

Workflow

Open the application to write the test case.
Identify the locators/selectors required for the particular flow of that test. Add those to the Page Selector file.
Add test steps in Cypress syntax in the form of commands under methods in the Page Object File.
Invoke the page object method in the actual Spec File.
There are numerous ways to execute Cypress tests. If it is executed as part of the project structure, one can use the ng tool:
1. Execute the test suite with ng e2e command.
2. For executing a specific test, run: ng e2e projectName –spec=Spec File Path

Advantages of Cypress Framework

Quick, easy setup and execution of tests.
Writing time for tests is lower compared to other frameworks.
It can be integrated with any CI tool equipped for headless execution with command-line options.
It captures screenshots of test execution automatically in case of test failure. This is helpful to diagnose bugs and debug.
Automatically reloads Test Runner once the changes have been made to the test.

How to run your first Cypress Test with example?

1. As mentioned earlier, npm has been used to install Cypress. Consequently, it has now been installed to the ./node_modules directory, with its binary executable accessible from ./node_modules/.bin.

2. Now, open Cypress from the project root via one of the following ways:

The long way with the full path

./node_modules/.bin/cypress open

Or with the shortcut using npm bin

$(npm bin)/cypress open

3. Adding npm scripts

It is easier to add Cypress commands to the scripts field in the package.json file:

{"scripts": {"cypress:open": "cypress open"}}

Now invoke the command from the project root with:

npm run cypress:open

Also, use npx to invoke the command as shown below:

npx cypress open

4. Once Cypress is open, write the script and work on the test case:

Create a ex_spec.js file.
Watch Cypress update the list of specs.
Launch the Cypress Test Runner.

5. Create a new file in the cypress/create folder:

touch {your_project}/cypress/integration/ex_spec.js

6. Once the file has been created, one should see the Cypress Test Runner being immediately displayed in the list of Integration Tests.

7. Open an IDE and add the code below to the ex_spec.js test file:

describe('First Test', () => { it('Welcome!', () => { expect(true).to.equal(true)})})

8. Once this file is saved, the user should see the browser reload.

And that is how a user can run their first Cypress script.

Resource: browserstack

The Tech Platform