Cypress - A Beginner's Guide to Effortless Setup and Acing Your First Test!

What is Cypress?

Cypress is an open-source end-to-end testing framework designed for testing web applications.

How does Cypress differ from Selenium?

• Cypress operates directly in the browser alongside the application whereas Selenium communicates with browsers through browser-specific drivers using the WebDriver protocol.

• Cypress doesn't use WebDriver whereas Selenium requires a separate browser driver for each supported browser.

• Cypress is faster when compared to Selenium.

• Cypress supports real-time reloads which is a unique feature that allows developers to instantly see the impact of changes made to their test code without restarting the test runner which is not supported in Selenium where it requires developers to re-run their tests after making changes

• Cypress offers native support for API testing through its built-in commands. In contrast, Selenium requires the integration of programming language libraries or testing frameworks to include API testing in your test suite.

How to install Cypress?

Pre-requisites:

1. Since Cypress tests are written in JavaScript, ensure that you have an integrated development environment (IDE) installed, e.g., Visual Studio Code, Atom, Sublime Text, IntelliJ IDEA, Eclipse, Notepad++, and so on.

2. Make sure Node.js is installed on your system. If not, download and install it from nodejs.org. Node.js comes with npm (Node Package Manager), which is necessary for installing Cypress. Node.js is an open-source, cross-platform JavaScript runtime environment that executes JavaScript code outside of a web browser.

TIP: Cypress can be installed either on a project-by-project basis or globally, depending on your preference and project requirements.

Benefits of installing Cypress project-wise:

• When Cypress is installed locally for a specific project, it ensures that the version of Cypress used is isolated to that project. This prevents conflicts with other projects that may require different versions of Cypress or have different dependencies.

Steps to install Cypress:

• To install Cypress locally on a project-by-project basis go to the project directory and run the below command.

npm install cypress --save-dev

In the image below, 'DsAlgoCypress' is the project directory. Once the command runs successfully, a message indicates that packages have been added

Cypress installation project wise

• Once Cypress is installed, run the following command to open Cypress:

npx cypress open

If Cypress is properly installed, this command will open the Cypress Test Runner, allowing you to run and manage your tests through a graphical interface on the screen below.

Since I am going to test the entire application, I am choosing E2E testing which is End-to-End Testing.

If you are testing a single component, you can choose the Component Testing option.

• In the below screen choose the Continue option with the selected Configuration files.

• In the next screen, you can select the browser in which your test should run. After selecting click Start E2E Testing in Chrome.

• You will end up in the below screen where you can start creating your specs for the project.

TIP: In Cypress, a "spec" refers to a test file containing the actual test code written in Cypress syntax. A spec file typically includes one or more test cases that define the behavior or functionality to be tested in your application.

Cypress spec files typically have a .spec.js or .spec.ts extension where js represents Javascript and ts represents Typescript.

Example: landingPage.spec.js or homePage.spec.ts

• Next, open the project in your preferred IDE, here I am using Atom IDE.

Initial Project Structure

• Right-click on the cypress folder and create a new Folder named "e2e". Inside the "e2e" folder create your spec file using the .cy.js extension. In my example, I am creating a file named landingPage.cy.js. So the folder structure will be as follows:

• A simple test script for landingPage.cy.js is as follows:

// Describe block - used to group one or more related tests
describe("Landing Page", () => {

  // Test case (it block) - represents an individual test
  it("passes", () => {

    // Cypress command - visits a specified URL here Landing Page
    cy.visit("https://dsportalapp.herokuapp.com/");

    // The actual test logic as follows
    // Check if the your button has specific text
    cy.contains('button', 'Get Started').should('exist');
  });

});

Script

• Once you save the above script using Ctrl + S, in the browser you will notice the script has been updated below

• Clicking on the landingPage.cy.js in the above image opens the screen where the webpage is loaded for the test.

• The code in landingPage.cy.js utilizes the "contains" command to locate a button with the specified text ("Get Started") and asserts that it exists on the webpage. The test passed and displays the green color text in the left pane as below.

Eg. Assertion Success

• In the event of an assertion failure, indicating the absence of the button on the page, the left pane will showcase an error message in red text, as illustrated below:

Eg. Assertion Failure

• In the right pane, you can see the Chrome browser dropdown. Clicking on it reveals various browsers supported by Cypress.

• Upon selecting a browser, the currently running browser closes, and the chosen browser opens to run the test. For example, if Chrome is initially open and you select Edge, Chrome will close, and Edge will open.

Tips: 

• Do not close the browser while writing the test in the IDE, so that you can observe real-time changes in the browser.

• Initial error faced, after installed Cypress using the npm command mentioned in the installation steps in the root directory without creating a specific project, configured end-to-end (e2e) testing, and unknowingly closed the browser. Upon attempting to reopen it using npx cypress open, encountered the error "Circular symlink detected."

What is Circular symlink issue?

This issue arises when references to other files or directories unintentionally form a loop within the project. To address it, identify and rectify problematic references, ensuring they avoid self-referencing or loops. Review the project structure for any unusual configurations and consider clearing the node modules folder before reinstalling dependencies. Updating npm and Node.js to their latest versions may also be beneficial.

Fix:

Resolved the problem by removing the Cypress folder created outside, initiating a new project, and running the Cypress installation command inside, effectively eliminating the circular symlink issue.