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()
})
})
