Introduction to Cypress Test Runner

Writing Your First Cypress Test: A Beginner’s Guide

Cypress is a powerful tool for testing web applications.
If you're a developer or QA tester looking to write fast and reliable UI tests, Cypress is a great place to start.

In this post, you'll learn how to write your first Cypress test step by step.

---

🧰 What is Cypress?

Cypress is an open-source front-end testing tool built for the modern web.
It lets you write tests in JavaScript to verify how your website behaves in the browser.

You can use it for:

• End-to-End (E2E) testing

• Integration testing

• Unit testing (limited)

---

🛠️ Step 1: Set Up Cypress

If you haven’t already, create a new project:

mkdir my-cypress-test
cd my-cypress-test
npm init -y
npm install cypress --save-dev

To open the Cypress Test Runner:

npx cypress open

It will create a cypress/ folder with example tests inside.

---

📝 Step 2: Create Your First Test File

Create a file inside:

cypress/e2e/sample_test.cy.js

And write this code:

describe('My First Test', () => {
  it('visits 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');
  });
});

---

🔍 Step 3: Understanding the Test

Let’s break it down:

• describe() — Groups related tests

• it() — Defines an individual test case

• cy.visit() — Opens the target web page

• cy.contains() — Finds an element with matching text

• cy.url() — Checks the current URL

• cy.get() — Selects an input field

• .type() — Types into the field

• .should() — Asserts expected behavior

This simple test:

✅ Opens a demo page
✅ Clicks on a link
✅ Types an email
✅ Checks if it worked

---

🧪 Step 4: Run the Test

Once you open Cypress with:

npx cypress open

You’ll see your test file listed in the UI. Click it to run.
Cypress opens a browser and runs your test visually — step by step!

---

💡 Tips for Beginners

• Use browser DevTools to inspect elements before writing selectors

• Cypress auto-reloads when you update your tests

• Use .debug() or .pause() to slow things down and troubleshoot

• Prefer data-* attributes (like data-cy="login-btn") for reliable selectors

---

🚀 Final Thoughts

Cypress makes testing fast, fun, and easy.

Your first test is just the beginning. From here, you can:

• Test login forms

• Validate shopping carts

• Automate complex user flows

• Run tests in CI/CD pipelines

The more you test, the more confident you'll feel shipping your code.

Learn Cypress Course in Hyderabad

Read More 

How Cypress Works Behind the Scenes

Installing Cypress: Step-by-Step Guide