A Complete Cypress Tutorial: Learn Cypress From Scratch

What Is Cypress?

Cypress is an open-source, front-end testing framework to test modern web applications. It’s written in JavaScript and runs directly in the browser, allowing you to write unit, integration and end-to-end tests. It also comes with features like real-time reloads, time-travel debugging, and automatic waits which makes it easier to build reliable and maintainable tests.

Why Use Cypress?

Cypress can be used to write simple tests and complex tests as well. It also lets you write, run, and debug tests in the browser.

Features:

• Run Tests Directly in the Browser: Cypress runs inside the browser, so you can test modern web apps exactly as users experience them.
• View Tests in Real-Time: See your end-to-end and component tests run live as you develop, with instant feedback.
• Debug With Built-In Browser Tools: Debug test failures using browser dev tools like console and DOM inspectors without leaving the test runner.
• Integrate With CI: Easily integrate Cypress with CI tool like Actions, Jenkins using built-in support and Docker images.
• Automate Accessibility Checks: Instantly visualize, triage, and fix accessibility issues on every tests.

How Cypress Test Execution Works?

This section of Cypress tutorial walks you through how Cypress works based on its core architecture.

• Runs in the Browser Using Dual iFrames: Cypress injects two iFrames, one for your web application and one for the test runner directly into the browser. It allows Cypress to interact with your web application just like a user would, while still controlling the test environment.
• Node.js Backend Powers System-Level Tasks: A local Node.js server is used to run the test. It manages browser launch, file access, screenshots, and supports the overall communication between the test runner and your web application.
• Built-In Proxy Intercepts Network Requests: Cypress automatically routes all HTTP and HTTPS traffic through its proxy. This lets you easily stub or mock API responses, simulate failures, and control server behavior.
• Real-Time Communication via WebSockets: The browser and Node.js backend stay connected through a WebSocket channel. It enables real-time updates and fast coordination between the web application and test execution.
• Same Run Loop: Since both your web application and Cypress tests run in the same event loop, it reduces timing issues common in other test frameworks and makes tests more stable and reliable.

How to Run Cypress Tests Locally?

Cypress lets you write test scripts using JavaScript or TypeScript. It comes with Mocha (a popular JavaScript testing framework) built-in, so you don’t need to install Mocha separately.

Prerequisites

Install Cypress using the below command:

npm install cypress --save-dev

After installation, here is how the folder structure looks like:

CYPRESS_FOR_BEGINNERS/
├── cypress/
│   ├── e2e/
│   │   └── lambdatest/
│   │       └── lambdatest_test_spec.cy.js
│   ├── fixtures/
│   │   └── example.json
│   └── support/
├── node_modules/
├── base_reporter_config.json
├── cypress.config.js
├── lambdatest_run.json
├── lambdatest-config.json
├── package-lock.json
└── package.json

Writing First Cypress Test

In this section of Cypress tutorial, let's look at how to write your first Cypress test.

Step 1: Create a new lambdatest_test_spec.cy.js file under the cypress/e2e/ directory.

Step 2: Open lambdatest_test_spec.cy.js file and write your Cypress test.

The test script automates a user journey on the LambdaTest eCommerce Playground. It opens the login page, logs in with credentials, searches for a product named "VAIO," and verifies that "Sony VAIO" appears in the search results.

describe("Lambdatest Login ",() => {
 it("Open the URL", () => {
   cy.visit(
     "https://ecommerce-playground.lambdatest.io/index.php?route=account/login"
   );
 });
 it("Login into the application", () => {
   cy.get('[id="input-email"]').type("[email protected]");
   cy.get('[id="input-password"]').type("lambdatest");
   cy.get('[type="submit"]').eq(0).click();
 });
 it("Search the Product", () => {
   cy.get('[name="search"]').eq(0).type("VAIO");
   cy.get('[type="submit"]').eq(0).click();
 });
 it("Verify Product after search ", () => {
   cy.contains("Sony VAIO");
 });
});

Running Cypress Tests on Local Grid

You can run Cypress tests using:

• Headed Mode: Tests run in a visible browser window, allowing you to view each test step as it executes in real time.
• Headless Mode: Tests run without opening a browser interface.

Run Tests in Headed Mode

You can run Cypress tests in headed mode using the Cypress App.

Step 1: Run the below command to execute Cypress tests locally in headed mode:

npx cypress open

After running the command, the below screen of Cypress App will launch. Select E2E Testing.

Step 2: Choose your preferred browser, and open the Cypress Runner.

Step 3: Click on the lambdatest_test_spec.cy.js file to begin executing the tests. Once complete, you’ll see that all test steps have passed successfully.

Run Tests in Headless Mode

By default, Cypress runs in headless mode, so the tests execute in the background without launching a visible browser window.

Run the below command to execute Cypress tests locally in headless mode:

npx cypress run

You can notice in the screenshot below that all test cases were successfully executed in a headless browser.

How to Run Cypress Tests With LambdaTest?

So far in this Cypress tutorial, we’ve covered how to run Cypress tests locally. Now, let’s explore how to run Cypress tests on a cloud-based grid.

Running Cypress tests in the cloud allows parallel execution at scale, reduces local environment dependency, and speeds up overall test cycles.

AI-native test execution platforms like LambdaTest let you run Cypress tests on a cloud grid. With its Cypress cloud, you can test across real browsers and OS combinations, enabling faster, scalable, and more reliable test execution.

To get started, refer to this guide on Cypress testing with LambdaTest.

To execute your Cypress tests on the cloud grid by LambdaTest, follow the steps below:

Step 1: Get your LambdaTest Username and an Access Key from your LambdaTest Account Settings > Password & Security.

Step 2: Install the LambdaTest Cypress CLI using the below command:

npm install -g lambdatest-cypress-cli

Step 3: In your project root directory, generate a sample config file by running the below command:

lambdatest-cypress init

This creates a lambdatest-config.json file where you’ll specify LambdaTest credentials, browsers and operating systems.

Step 4: Update the generated lambdatest-config.json file with your details. This configuration will run tests in parallel across Chrome, Electron, and Firefox on Windows 11.

{
  "lambdatest_auth": {
    "username": "your_username",
    "access_key": "your_access_key"
  },
  "browsers": [
    {
      "browser": "Chrome",
      "platform": "Windows 11",
      "versions": ["latest-1"]
    },
    {
      "browser": "Electron",
      "platform": "Windows 11",
      "versions": ["latest"]
    },
    {
      "browser": "Firefox",
      "platform": "Windows 11",
      "versions": ["latest-1"]
    }
  ],
  "run_settings": {
    "build_name": "Write First Script In Cypress",
    "parallels": 3,
    "specs": "./cypress/e2e/lambdatest/*.cy.js",
    "ignore_files": "",
    "network": true,
    "headless": false,
    "npm_dependencies": {
      "cypress": "13.6.2"
    }
  },
  "tunnel_settings": {
    "tunnel": false,
    "tunnel_name": null
  }
}

When writing this Cypress tutorial, the latest Cypress version is 14.4.1. We used v13.6.2 for our examples. However, you can go ahead with any newer version you're comfortable with.

Step 5: Once your configuration file is ready, run the tests using the below command:

lambdatest-cypress run --sync=true

Step 6: Visit the LambdaTest Web Automation dasard to view your Cypress test results.

Best Practices for Cypress Testing

When performing Cypress UI testing, here are some of the best practices you can follow:

• Log in Programmatically: Use cy.request() method to handle login via API instead of relying on the UI. It speeds up tests and avoids unnecessary steps.
• Use Reliable Selectors: Target elements with data-cy or data-test attributes. These selectors are stable and won’t break with style changes.
• Access Command Values With .then() Method: Cypress commands are asynchronous. Therefore, use .then() method to work with their returned values safely.
• Keep Tests Independent: Each test should work in isolation without depending on the state or results of other tests. This improves reliability and debugging.
• Group Related Assertions: Add multiple meaningful assertions in the same test to improve efficiency and reduce execution time.
• Reset State Before Each Test: Ensure a clean starting point by resetting your web application state before running tests, not after.

Conclusion

In this Cypress tutorial, you explored how to use Cypress to test modern web applications. You learned what Cypress is and how it runs directly in the browser. This Cypress tutorial also explained how to perform Cypress automation testing on local grid in both headed and headless modes. You have also learned how to scale your Cypress tests using the LambdaTest cloud grid along with some best practices.

Cypress Learning Resources

In addition to this Cypress tutorial, you can explore the resources below to further enhance your learning.

Blog and Learning Hub Archive

• Getting Started With Cypress For Test Automation
• How to Write Your First Cypress Test [With Examples]
• Cross Browser Testing with Cypress : Tutorial
• How To Perform Cypress Testing At Scale With LambdaTest
• Cypress .should() Command: A Detailed Guide
• How To Find HTML Elements Using Cypress Locators
• How to Use Cypress scrollIntoView() Command
• How to Handle Dropdowns Using the Cypress .select() Command
• How To Fill And Submit Forms In Cypress
• Mastering Cypress Viewport: Testing Your Responsive Designs
• How to Use Cypress in Headless Mode
• How To Check If An Element Exists In Cypress
• How To Handle iFrames In Cypress
• How to Handle Shadow DOM in Cypress
• A Step-By-Step Guide To Cypress API Testing
• How To Perform Cypress Accessibility Testing
• How to Use Cypress for File Upload and Download
• How To Find Broken Links Using Cypress [With Examples]
• Handling Touch And Mouse Events In Cypress [Tutorial]
• How To Get Started With Cypress Debugging
• Complete Guide To Cypress Visual Regression Testing
• How To Use Cypress Intercept For Handling Network Requests
• How To Avoid Anti-Patterns In Cypress
• Cypress Logs: How to Improve Custom Commands Visibility
• How To Write End-To-End Tests Using Cypress App Actions
• How to Perform E2E Testing Using Cypress CLI and Test Runner
• Cypress Testing Library: Getting Started Tutorial
• Migrating Test Automation Suite To Cypress 10
• How to Use Selenium and Cypress for Canvas Automation
• How To Run Cypress Tests In Azure DevOps Pipeline
• How to Run Cypress With Jenkins [Cypress Jenkins Tutorial]
• Running Tests In Cypress With Actions [Complete Guide]
• Cypress JavaScript
• Cypress Assertions
• Exception Handling in Cypress
• Cypress Page Object Model
• Cypress Cucumber Tutorial
• Cypress Docker
• Cypress Snapshot Testing
• Cypress Tips and Tricks
• Cypress Best Practices For Test Automation
• Cypress vs Playwright: A Detailed Comparison
• Playwright vs Selenium vs Cypress: A Detailed Comparison
• Cypress Vs Selenium: How To Pick The Right Testing Tool For You?
• 60+ Cypress Interview Questions

Video Archive

• Cypress Full 3 Hour Tutorial
• Introduction to Cypress Testing
• Learn Cypress GET and FIND Commands
• How to Install Cypress Plugin?
• How to Handle Cypress Async Commands?
• How to Handle Non-Cypress Async Promises Using ".then" Command?
• How to use Assertion in Cypress?
• How to Write Tests With Cypress UI Commands?
• What are Cypress Hooks?
• What are Cypress Fixtures?
• What are Cypress Custom Commands?
• What are Cypress Mouse Commands?
• What are Cypress Actions?
• Perform Cross Browser Testing on Cloud With Cypress and LambdaTest
• How to Perform Accessibility Testing With Cypress?
• How to Run Cypress Tests in Headless Mode?

Certification

• Cypress 101

Citations

• Cypress: https://www.cypress.io/