Skip to main content

Cypress click Command

When in need to click a particular web element like a button, then click command is the one to use.

Syntax

.click()
.click(options)
.click(position)
.click(position, options)
.click(x, y)
.click(x, y, options)

Arguments Used In Clicks

1. Options

Can pass in objects to change the default behavior of .click()

Here is the list of some of the options that Cypress can use with the click command:

  • altKey: Activates alt key in windows and options key in mac. Default is false.
  • animationDistanceThreshold: Used to consider the distance between the pixels and the element and that mist exceeds overtime. Default is animationDistanceThreshold.
  • ctrlKey: This activates the control key. Default is false.
  • force: Forces clickability. Default is false.
  • log: Displays the record in command log in output. Default is true.
  • metaKey: Used to activate windows key in windows and command key in mac. Default is false.
  • multiple: This is used to clock on multiple elements serially. Default is false.
  • scrollBehavior: This is used to viewport position where an element should be scrolled before the command execution. Default is ScrollBehaviour.
  • shiftKey: This activates the shift key. Default is false.
  • timeout: Used to input time to wait for the click to resolve before timing out. Default is defaultCommandTimeout.
  • waitForAnimations: Waits for the animations to finish before clicking. Default is waitForAnimations.

2. Position Argument

Various arguments based on the positions can also be passed onto where the click command should perform. Here are some of the positions topLeft, top, top right, left, center, right, bottomLeft, bottom, and bottomRight.

3. X and Y

Can mention the pixel distances coordinates on where it should be clicked on.

Usage

Correct Usage

1) Clicks the btn element.

y.get('.btn').click() 

2)  Clicks with more focus.

    cy.focused().click() 

    3) Clicks text containing 'Welcome.'

      cy.contains('Welcome').click() 

        Wrong Usage

        cy.click()
        cy.window().click()

        Example

        describe('The Click Command',() => {
            it('visit the site, perform various clicks',()=>{
                cy.visit('https://www.programsbuzz.com/')
                cy.contains('Start Learning').click()
            })
        })
        Tags
        Submitted by arilio666 on February 8, 2022

        Ashwin is working with iVagus as a Technical Lead. He has experience in various technologies like Cypress, JavaScript, TypeScript, Rest Assured, Selenium, Cucumber, and Java.

        About

        At ProgramsBuzz, you can learn, share and grow with millions of techie around the world from different domain like Data Science, Software Development, QA and Digital Marketing. You can ask doubt and get the answer for your queries from our experts.