Introduction to Cypress

  • What is Cypress and why use it?
  • Installing Cypress
  • Understanding the Cypress folder structure

Welcome to the exciting world of automated testing with Cypress! As a tester, you know the value of a good tool that makes your life easier and delivers reliable results. Cypress is here to be that tool for your web applications.

Let’s kick off our journey into the world of automation by installing Cypress.

Before we dive into writing our first test, let’s get Cypress set up on your machine. Here’s what you’ll need:

  • Node.js: Make sure you have Node.js installed. You can download it from the official website (https://nodejs.org/).
  • Create a Project Folder: Open a terminal or command prompt and create a new folder for your project. For example, you can name it cypress-testing.
  • Install Cypress: Navigate to your newly created folder using the cd command (e.g., cd cypress-testing). Now, run the following commands in the terminal:
  • npm init – once we hit this command on the terminal it will ask a few questions about package name, version, description, entry point, test command, git repository, keywords, author, license etc., the command will create a package.json file, setting up the basic structure for your project. If you want to include additional details, you can add them later. For now, you can simply press Enter to proceed, and this command will handle the creation of the package.json file.
  • npm install cypress --save-dev -using this command Cypress will be installed in our ./node_modules directory. After the installation is complete, we can open Cypress for the first time by running the following command in the same directory where our package.json file is located

Open Cypress Test Runner: Now, run npx cypress open in your terminal. This will launch the Cypress test runner in your web browser.

Exploring the Cypress Interface:

The Cypress test runner provides a user-friendly interface for managing your tests. Let’s take a look:

  • Browser Selection: Choose the browser you want to run your tests in.
  • E2E Testing: Click on “E2E” to access the end-to-end testing functionalities.
  • Creating a New Test File: From the above Cypress runner, you can create a new test file by clicking on “Create New Spec.” Enter a name for your test file here we can provide the name as “test.cy.js” and click “Create Spec.” This will generate the new spec file and start the test runner. Additionally, it will automatically set up the necessary folder structure at the project level.

Understanding the Folder Structure:

Cypress organizes your project files in a clear and defined structure:

  • cypress/e2e: This folder contains your actual test files. Use descriptive names to organize your tests based on functionality (e.g., login.cy.js for login tests).
  • cypress/fixtures: This folder stores any static data used in your tests, such as JSON or CSV files. Think of it as your test data storage.
  • cypress/support/commands: Here, you can define reusable code snippets or custom commands (e.g., cy.login() for a login action) to use across multiple tests.
  • cypress/support/e2e: This file is automatically executed before each test, making it ideal for any setup code needed for all tests.
  • cypress.config.js: This is the main configuration file for Cypress. You can define global settings like the base URL for your application and other project-specific options.
  • package.json: This file manages project dependencies, scripts, and basic project information.

Next Steps:

In the next blog post, we’ll explore Writing Cypress Tests Scripts

  • Cypress blocks (describe, context, it)
  • Cypress Hooks (before, after, beforeEach, afterEach)
  • Creating reusable commands (using pages object model)