Your First Cypress Test: Step-by-Step

Cypress is a powerful, modern testing framework used for end-to-end testing of web applications. It’s known for being fast, reliable, and easy to use—even for developers who are new to testing. If you're just starting with Cypress, this guide will walk you through setting up your first Cypress test from scratch.

What is Cypress?

Cypress is a JavaScript-based testing framework designed for modern web applications. Unlike traditional tools like Selenium, Cypress runs in the same execution loop as your application, giving it faster execution and better control over the browser.

Key features:

Real-time reloads

Time travel debugging

Automatic waiting (no need for manual wait statements)

In-browser test execution and recording

Step 1: Set Up Your Project

Before writing tests, you need to set up Cypress in your project.

Prerequisites:

Node.js and npm installed

A web application to test (you can use any site, even a demo one)

Steps:

Open your terminal and create a new project (if needed):

bash

mkdir my-cypress-test && cd my-cypress-test

npm init -y

Install Cypress:

bash

npm install cypress --save-dev

Open Cypress for the first time:

bash

Copy

Edit

npx cypress open

This will generate a default Cypress folder structure in your project, including a cypress folder with integration, fixtures, and support directories.

Step 2: Create Your First Test File

Navigate to the cypress/e2e (or cypress/integration in older versions) folder and create a new file named first_test.cy.js.

javascript

describe('My First Cypress Test', () => {

  it('Visits the Example Site and Checks Title', () => {

    cy.visit('https://example.cypress.io')

    cy.title().should('include', 'Cypress')

  })

})

Explanation:

describe() is used to group related tests.

it() defines an individual test.

cy.visit() opens a URL in the browser.

cy.title() checks the page title.

Step 3: Run the Test

If you used npx cypress open, a test runner will open in your browser. Click on first_test.cy.js to execute the test.

You’ll see:

A browser window controlled by Cypress

A visual display of commands being executed

A green check mark if the test passes

Alternatively, you can run it in headless mode:

bash

npx cypress run

Step 4: Add More Assertions

Let’s make the test more informative:

javascript

describe('Cypress Interaction Test', () => {

  it('Searches on the Example Page', () => {

    cy.visit('https://example.cypress.io')

    cy.contains('type').click()

    cy.url().should('include', '/commands/actions')

    cy.get('.action-email')

      .type('test@example.com')

      .should('have.value', 'test@example.com')

  })

})

What’s happening:

cy.contains() finds and clicks the "type" button.

cy.url() asserts the URL has changed.

cy.get() locates an input field and types into it.

should() verifies the typed value.

Step 5: Organize and Scale

Once you're comfortable with the basics:

Create separate folders for different test categories.

Use fixtures for test data.

Write custom commands in support/commands.js.

Conclusion

Cypress makes web testing intuitive, fast, and developer-friendly. With minimal setup and powerful features, you can start writing your first test in minutes. By following this step-by-step guide, you’ve now created a working Cypress test, interacted with a real web page, and made assertions—all without writing complex configurations. As you continue exploring, you’ll discover Cypress is not only beginner-friendly but also scalable for advanced testing workflows. Happy testing!

Learn Cypress Training
Read More: Installing and Setting Up Cypress Locally

Visit IHUB Talent Training Institute in Hyderabad
Get Direction