cy.click() in Cypress

Introduction

The cy.click() command simulates a mouse click on a web page element. It helps test if buttons, links, or other clickable items work as expected.

When you want to test if a button submits a form correctly.

When you need to check if clicking a link navigates to the right page.

When verifying that clicking a checkbox or radio button changes its state.

When testing if clicking a menu item opens a dropdown.

When simulating user interaction on any clickable element.

Syntax

Cypress

cy.get('selector').click(options)

cy.get('selector') finds the element to click.

options is optional and can control click behavior like force clicking.

Examples

Clicks the button with id submit.

Cypress

cy.get('button#submit').click()

Clicks a link with class nav-link even if it is hidden or disabled.

Cypress

cy.get('a.nav-link').click({ force: true })

Clicks a checkbox input to toggle its state.

Cypress

cy.get('input[type="checkbox"]').click()

Sample Program

This test visits a page, clicks a button with id submit, and checks if the result area shows the text 'Submitted'.

Cypress

describe('Button click test', () => {
  it('Clicks the submit button and checks result', () => {
    cy.visit('https://example.cypress.io')
    cy.get('button#submit').click()
    cy.get('#result').should('contain.text', 'Submitted')
  })
})

Important Notes

Always use a reliable selector with cy.get() to avoid flaky tests.

Use { force: true } option carefully to click hidden or disabled elements.

Remember that cy.click() waits for the element to be visible and enabled before clicking.

Summary

cy.click() simulates a user clicking an element on the page.

Use it to test buttons, links, checkboxes, and other clickable elements.

Combine with cy.get() to select the element before clicking.