Step-by-Step Guide: Setting Up Cypress & Testing Login

by Adrian Balogh | May 18, 2023 | 5 min read

As promised in the previous post this one will be about a basic setup using Cypress. We will also dive a bit into how we could make the same action in different ways and obviously make it better.

Prerequisites

You must have the following programs installed on your computer before we can begin:

• Node.js (version 10 or higher)
• npm (Node.js package manager)

Step 1: Create a new project

Create a new project folder first, then go there in your terminal. After that, execute the following command to launch a fresh Node.js project:

npm init -y

This will create a new package.json file in your project folder.

Step 2: Install Cypress

Then, use the following command to install Cypress as a development dependency:

npm install cypress --save-dev

By doing this, Cypress will be installed and added to your package.json file’s devDependencies section, also you should be able to see the node_modules folder and the package-lock.json present.

Step 3: Open Cypress

You can use Cypress now that it has been installed by executing the following command:

npx cypress open

The Welcome to Cypress! Test runner screen should be displayed and you should be able to click on “E2E Testing”. Leave the default config as is and click the “Continue” button. You should see the list of browsers detected by cypress and also a folder name “cypress” should be created in the project folder.

Select your preferred browser and click on the “Start E2E Testing in <browserName>”, I chose Chrome.

If you want to see all the examples that Cypress has to offer click on the “Scaffold example specs”, we will go with the “Create new spec” and rename the spec to “firstTest”. Your path should look like this “cypress/e2e/firstTest.cy.js” click “Create spec” and click on the “Run spec”.

Your test should “pass” without issues.

Step 4: Write a test

Let’s create the following login test on the saucedemo.com page.

This code defines a test suite called “Login” and a test case called “Should log in without issues”. 

The test case accesses the website at https://www.saucedemo.com, logs in with a username and password, and then confirms that the URL contains “inventory.html.”

Step 5: Run the test

Click firstTest.cy.js in the Cypress Test Runner to launch the test. The test will be executed in a browser after this is clicked. A green checkmark should appear next to the test case name indicating that the test has passed.

Let’s take it up one level and use a fixture

Step 1: Create a data file

Create a new file called login-data.json in the cypress/fixtures folder, and add the following JSON data:

This file contains an array of users, each with a username and password property. You can add different data to this file if you want to test different login scenarios.

Step 2: Modify the test

Step 3: Run the test

The test hits the login button after entering each user’s login information. The test confirms that the URL contains “/inventory.html” to show that the login was successful if the user is a “standard user.” The user then signs out of the website by clicking the logout button after clicking the burger button to view the menu.

The test confirms that there are three error messages on the page and that the last error message contains one of the two potential error messages if the user is not a standard user. 

Now we used a fixture to iterate through three different cases and as you can see only minimal adjustments were needed.

Congratulations! You have successfully parameterised the login test and used data-driven testing with Cypress.

In conclusion, you can test more scenarios with less code if you parameterize your tests with data. You may quickly read data from external files and use it in your tests by using the cy.fixture command.

But there is a question, can we make this look better?

Yes of course, by using custom commands.

Step 1: Create a custom command

In the file called commands.js in the cypress/support folder, add the following code:

This code creates a new Cypress command called login that takes username and password as arguments.

Step 2: Modify the test

Update the firstTest.cy.js test file with the following code to use the login custom command:

This code replaces the cy.get() commands with the cy.login() command, passing in the username and password for each user from the login-data.json file.

Step 3: Run the test

Congratulations! The login test has been successfully refactored to use a Cypress custom command.

You can increase the modularity and reusability of your test code by writing new Cypress commands. You can log in the website with several usernames and passwords without repeating the code by using the cy.login() command. Happy Testing!