First Cypress Test

Writing your first Cypress test builds the foundation for everything else in this course. A test file contains simple instructions that describe expected website behavior. This topic breaks down each part of a basic test.

Structure of a Test File

Every Cypress test file uses two main functions: describe and it. The describe function groups related tests under one label. The it function defines a single test case with its own steps.

describe('Login Page', () => {
  it('displays a login form', () => {
    cy.visit('/login')
    cy.get('form').should('be.visible')
  })
})

A Simple Way to Picture It

Think of describe as a chapter title in a book and it as a paragraph inside that chapter. The chapter groups related paragraphs under one topic. Each paragraph explains one specific idea on its own.

Breaking Down the Example

The describe block names the feature being tested, in this case the login page. The it block names the specific behavior being checked, in this case the visible form. The cy.visit command opens the page. The cy.get command finds the form element. The should command checks that the form appears on screen.

Test Execution Flow

Start Test
   |
   v
Visit the page (cy.visit)
   |
   v
Find an element (cy.get)
   |
   v
Check a condition (should)
   |
   v
Report Pass or Fail

Writing a Second Test

A single describe block can hold multiple it blocks. Each test focuses on one specific behavior of the page.

describe('Login Page', () => {
  it('displays a login form', () => {
    cy.visit('/login')
    cy.get('form').should('be.visible')
  })

  it('shows a username field', () => {
    cy.visit('/login')
    cy.get('#username').should('exist')
  })
})

Separating checks into individual tests makes failures easier to trace. A broken username field will not affect the test checking the form's visibility.

Naming Tests Clearly

A good test name describes the expected outcome in plain words. A name like "shows an error for wrong password" tells readers exactly what the test checks without opening the code.

Running the Test

Open the Test Runner and click the test file to watch it execute. Cypress opens the page, performs each command, and marks the test with a pass or fail result. A passing test turns green in the command log.

Common Beginner Mistakes

New testers sometimes forget the cy.visit command and try to check elements on a blank page. Others place unrelated checks inside a single it block, making failures confusing to diagnose. Keeping each test focused on one behavior avoids both problems.

Adding Comments

Comments explain the purpose of tricky steps inside a test file. Cypress ignores comments during execution, so they exist purely for human readers.

// Check that the submit button starts disabled
cy.get('#submit').should('be.disabled')

A Complete Small Example

describe('Homepage', () => {
  it('shows a welcome message', () => {
    cy.visit('/')
    cy.contains('Welcome').should('be.visible')
  })
})

This test opens the homepage and confirms the word "Welcome" appears somewhere visible on the page.

Key Points

• The describe function groups related tests under one label.
• The it function defines a single, focused test case.
• cy.visit opens a page, and cy.get finds elements on it.
• Each test should check one specific behavior.
• Clear test names make results easier to understand at a glance.