Cypress - click() Method

Last Updated : 13 Sep, 2024

The click() method in Cypress is a command that simulates a click event on an element. It can be used to interact with web pages in a way that mimics how a user would click on an element. This method can also be used to test web applications.

Usages of Cypress - click() Method

It simulates a click event on an element.
It can be used to interact with web pages.
It can be used to test web applications.

Syntax

The syntax for the click() method is as follows:

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

Here, cy.get(selector) is used to retrieve an element using a CSS selector, and click() is the method that simulates the click event.

Arguments

The click() method takes an optional argument, options, which is an object that can contain the following properties:

force: A boolean value indicating whether to force the click event, even if the element is not visible or clickable.
multiple: A boolean value indicating whether to click multiple elements that match the selector.

Example 1: Clicking a Button

HTML Code:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Cypress Click Example</title>
  </head>
  <body>
    <button id="button">Submit</button>
  </body>
</html>

Javascript code:

JavaScript

describe('Clicking a Button', () => {
  it('clicks the button', () => {
    Cypress.on('uncaught:exception', (err, runnable) => {
      // handle the error
      console.error(err)
    })
    cy.visit('http://localhost:3000')
    cy.get('#button').click()
  })
})

// or with options
describe('Clicking a Button with Options and Error Handling', () => {
  it('clicks the button with options', () => {
    Cypress.on('uncaught:exception', (err, runnable) => {
      // handle the error
      console.error(err)
    })
    cy.visit('http://localhost:3000')
    cy.get('#button').click({ force: true, multiple: true })
  })
})

Output:

Example 2: Clicking a Checkbox

HTML Code:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Cypress Click Example</title>
  </head>
  <body>
    <input type="checkbox" id="checkbox">
    <label for="checkbox">Click me!</label>
  </body>
</html>

Javascript code:

JavaScript

describe('Clicking a Checkbox', () => {
  it('clicks the checkbox', () => {
    Cypress.on('uncaught:exception', (err, runnable) => {
      // handle the error
      console.error(err)
    })
    cy.visit('http://localhost:3000')
    cy.get('#checkbox').click({ force: true })
  })
})

// or with options
describe('Clicking a Checkbox with Options and Error Handling', () => {
  it('clicks the checkbox with options', () => {
    Cypress.on('uncaught:exception', (err, runnable) => {
      // handle the error
      console.error(err)
    })
    cy.visit('http://localhost:3000')
    cy.get('#checkbox').click({ force: true, position: 'topLeft' })
  })
})

Output:

Conclusion

We talked about the click() method in Cypress in this article. We learned about how to use it, what it needs, and how it works. We also showed two examples of how to use click() to make a button and a checkbox work like someone is really clicking on them. The click() method is very helpful in Cypress because it lets us test if our application is working correctly by pretending to be a user.

Cypress - click() Method

emailmeay8uic

Improve

Article Tags :

Cypress - click() Method

Usages of Cypress - click() Method

Syntax

Arguments

Example 1: Clicking a Button

Output:

Example 2: Clicking a Checkbox

Output:

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?