In this article, you will learn about how to write your first End-to-End test with Cypress. In this article, we will use the Cypress website as the application we are using to test.

This article is a robust tutorial for beginners. You don’t need to have prior programming experience to learn with this article. Everything will be explained to you from how to install an IDE to writing your first End-to-End Test.

What this article is going to cover

• What is Cypress
• What is End-To-End Testing
• Installing Cypress and Running the Cypress launcher
• Basic Functions to Know for Cypress
• Writing your first Test Script
• Running your Test Script

What is Cypress?

Cypress is an all-in-one framework built on Mocha that supports typescript or Javascript, making asynchronous testing simple and convenient.

Cypress is a powerful tool that can be used to perform various tests on an application which includes: E2E, Component, Accessibility, and Visual testing among others.

The speed run is very fast and Cypress tackles the main difficulties that QA engineers and developers have while testing applications.

Cypress makes it possible to Set up Tests, Write Tests, Run Tests, and Debug Tests.

Some of the things that Cypress Provides Includes:

• Time Travel: Cypress takes snapshots as your tests run. To acheive this, hover over commands in the Command Log to see exactly what happened at each step.

• Debuggability: Cypress enables you to stop guessing why your tests are failing and debug directly from familiar tools like Developer Tools. The readable errors and stack traces in the Cypress runmake debugging lightning fast.

• Automatic Waiting: Cypress automatically waits for commands and assertions before moving on.

• Consistent Results: The architecture doesn’t use Selenium or WebDriver. Say hello to fast, consistent and reliable tests.

• Cross-browser Testing:You can run tests within Firefox and Chrome,Electron and Edge locally and optimally in a Continuous Integration pipeline.

What is End-To-End Testing?

The term "end to end testing" (E2E testing) is a software testing technique that entails examining an application's workflow from start to finish.
Basically, the goal of this technique is to simulate real-world user scenarios in order to test the system's integration and data integrity.

System requirements for running Cypress

• Windows 7 and above (64-bit only)
• macOS 10.9 and above (Intel or Apple Silicon 64-bit (x64 or arm64))
• Linux Ubuntu 12.04 and above
• Fedora 21
• Debian 8 (x86_64 or Arm 64-bit (x64 or arm64))

see Linux Prerequisites here

Installing your Preferred IDE

To write your end-to-end tests, you would need an integrated development environment, otherwise known as an IDE.
There are various IDEs you can use, but VSCode is highly recommended for this tutorial.

Follow this guide to install VSCode on your respective machine

Creating your test project folder

Create a project folder in any location of your choice on your system.
Once you have done this, open VSCode.Click “File” then click “Open Folder”. Select your project folder.

Opening the Terminal

At the top section of the VSCode IDE, you should see an option “Terminal” alongside other options. Click the option. A modal will pop up. Click “New Terminal”. Automatically a terminal is set up for you for the project, and will pop-up at the bottom of the ide. It looks like this:

Installing Node

To run Cypress, you need to have Node.js installed.
Click here to pick the download version fit for your machine. (the preferred versions are Node.js 12 or 14 and above)
Once Node.js has been installed, go to your VSCode.
Type this code in the terminal - node --version to verify complete installation.

Creating your package.json file

In a Javascript/Node project, a "package. json" file is located in the project's root. It manages the project's dependencies, scripts, versions, and a whole lot more. It maintains the metadata related to the project. You need to create a package.json file inside the project folder.

Once you have node installed on your computer, run this command inside the terminal : npm init -y . This will create a package.json file in the project folder.

Installing Cypress and Running the Cypress launcher

We will install Cypress via NPM (Node Package Manager),

NPM, short for Node package manager, is a package manager for the JavaScript programming language. NPM is a command-line tool for dealing with that repository that helps with package installation, version control, and dependency management.

To install cypress via NPM, go to your terminal . You should check that the folder location in which the terminal is running is exactly the project folder you just created. Run this code in the terminal : npm install cypress --save-dev

Once you have successfully installed Cypress, you should see a new folder in your project folder named “Cypress”

To open Cypress from your project folder:
Run this command in the terminal → npx cypress open

you should see something like this:

Choose a testing type (choose End to End testing for this tutorial)

Choose the browser of your choice on cypress, then click the green button named “Start E2E Testing”.

On the page, choose the browser of your choice, and a dashboard will open.

Creating your Test File

Then click "Create New Empty Spec"
In that folder path, “cypress/e2e”, write the name you want to give your test file .

You should see something pop up like this below

Click the button "Okay, run the spec"

Then the sample code already created for you in your test file will run in the selected browser of your choice.

Basic Functions to Know for Cypress

In Cypress, you will be working with functions and other programming concepts. In this article we will write a few functions in our first test.

A function is a set of instructions that accept inputs, carry out particular calculations, and return results. With a function you can name a collection of statements, making your program simpler to read, comprehend, and debug.
These are the functions we will look at in this tutorial:

• describe()
• it()
• cy.visit()

describe()

The describe() function is basically to give a title to the test case

it()

The it() function is basically used to explain the content of the test case.

cy.visit()

The cy.visit() function is where you will input the link of the site. When you run the test script, the test runner opens the site link you put in the cy.visit() function

Below is an example that contains example code of the functions we just learned:

Writing your first Test Script

/// <reference types = "cypress"/>

describe('My First Test', () => {
    it('visits the cypress landing page', () => {
      cy.visit('https://www.cypress.io/')
    })
  })

above is an example end-to-end test that visits the cypress landing page

Running your test Script

You can write this code in your test file, then open your terminal and run npx cypress open.
Once Cypress opens, look for the name of your test file. Click it and run.

Congrats! you have successfully run your first end-to-end test!

Next Steps

Accessing and Interacting with Elements

Conclusion

Special thanks to Ashimi.0x, Abiola Rasaq, and Ademola Bhadmus for helping out in reviewing this article :)

Do share this article to someone who might find it useful. Thank You.