• Money Tips | Product Reviews

Cypress Tutorial - Writing Your First Cypress Test

Updated: Jul 22

Cypress is an awesome automation testing tool that came out a few years back as of this writing. Let us see how this tool can be used for testing browser (UI) applications end-to-end.

How do I install the Cypress automation tool?

This is not a Cypress.exe or any direct installation file that you download and install for Windows for example. The installation is different and I will show you the steps.

Before we get started read how to install Cypress using npm if you are interested and need to install it in your machine. You can also install it by downloading the Cypress zip file directly for your Windows machine or other OS types here.

What is Cypress?

Cypress is just like Selenium and they both are used for automated testing of web applications. Watch this video to get a quick and easy understanding of this automation tool.

How to write my first test using Cypress?

After you installed it, open it by clicking the Cypress.exe file, or if you use npm go to the node_modules/bin folder and run Cypress open command. Let me get you started from scratch so see what I mean by the node_modules folder.

[Cypress Tutorial Basic - Cypress GitHub example project here]

[Cypress Tutorial React - Github example project here]

First, create a folder for your first Cypress with a name something like "myProject" or any name you want to call it. Then, run the npm init -y command as shown below. This initializes your project, creates the folder necessary structure.

Now install CYpress as shown below. Once installation is complete, cd to node_module/.bin folder and type "Cypress open" command to open Cypress tool.

npm i cypress --save-dev
.\node_modules\.bin\cypress open

Once Cypress is opened, it shows you a set of tests already ready for you to run. Simply click one of them and see the test execution in chrome by default. If you want to change to some other supported you can click the drop-down and select Firefox, Edge, or electron depending on what browsers you have installed in your machine.

We are going to write a simple test that enters a search text in and asserts that we get proper results.

Creating a new test

Click "New Spec file" to create a javascript file. In that file, you can now create you first test. Cypress supports only javascript language. So, we have to create a test by adding describe block which is the test we are creating.

In this empty file "MyTest.js", type in the following sample code:

describe('My First Test', () => {
  it('Does not do much!', () => {

The lazy way - Creating a test from an existing example test provided by Cypress

Open an example file todo-spec.js by hovering your mouse to the rightmost end as shown below to open this todo-spec.js in an editor (notepad to visual studio code)

After you open that javascript file, change the URL to Google. cy.visit navigates the browser to go to a site (here in our case)


What you are seeing is the describe which is the test method containing one or more tests (it blocks). Remove all "it" blocks except the first block which we are going to modify to fit our test case. Change the test case name to anything you like.

 it('search results displays expected results properly', () => {

Watch videos where you can learn even more. This YouTube channel is great for beginners to understand how Cypress works.

Is Cypress easy to learn?

As you have seen, it is easy to install and start with the first test pretty quickly. In most cases, it is easy to create basic tests. It is highly recommended to go through JavaScript tutorials to learn the basics for writing custom test code in Cypress. Cypress does not have a record and plays like Selenium and so you should be comfortable writing your custom code within your tests. Once you get a hang of Javascript, you should be fine as you write more and more tests.

If you are coming from the Selenium java world, it might take some time to get used to the new javascript language. I know some hate javascript messy-looking code. But the effort pays off itself if you want a less flaky framework like Cypress. The good news is Cypress is getting better and better at supporting more browsers and sure they working on improving the usability of the tool too.

Most popular:

Selenium 4 Java and Python - Chrome DevTools to capture XHR response body

How To Record Using JMeter Chrome Extension

Click here to check out more posts like these.

6 views0 comments