First Cypress test

Introduction

We write a first Cypress test to check if a website works as expected. It helps catch problems early.

To check if the homepage loads correctly.

To verify a button on the page works.

To confirm a user can see important text on the page.

To make sure a link goes to the right page.

Syntax

Cypress

describe('Test suite name', () => {
  it('Test case name', () => {
    cy.visit('https://example.com')
    cy.contains('Some text').should('be.visible')
  })
})

describe groups tests together.

it defines a single test case.

Examples

This test opens the homepage and checks if 'Welcome' text is visible.

Cypress

describe('Homepage test', () => {
  it('shows welcome message', () => {
    cy.visit('https://example.com')
    cy.contains('Welcome').should('be.visible')
  })
})

This test checks if a button with id 'submit' is on the page.

Cypress

describe('Button test', () => {
  it('checks if button exists', () => {
    cy.visit('https://example.com')
    cy.get('button#submit').should('exist')
  })
})

Sample Program

This test opens the Cypress example page and checks if the heading 'Kitchen Sink' is visible.

Cypress

describe('My First Cypress Test', () => {
  it('Visits example.com and checks for heading', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('Kitchen Sink').should('be.visible')
  })
})

Important Notes

Always use clear test names so you know what each test does.

Use cy.visit() to open the page you want to test.

Use cy.contains() or cy.get() to find elements.

Summary

Cypress tests are written inside describe and it blocks.

Use cy.visit() to open a webpage.

Use assertions like should('be.visible') to check page content.