Cypress Double-click using dblclick Command

When you need to double click a particular web element like a button, for example, in cypress, then the dblclick command is the one to use.

Syntax

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

Arguments Used In Double Click

• Options: Can pass in objects to change the default behavior of .dblclick() Here is the list of some of the options that cypress can use with the double click command:
• altKey: Activates alt key in windows and options key in mac. Default is false.
• waitForAnimations: Waits for the animations to finish before double clicking. Default is waitForAnimations.
• animationDistanceThreshold: Used to consider the distance between the pixels and the element and that mist exceeds overtime. Default is animationDistanceThreshold.
• timeout: Used to input time to wait for the double click to resolve before timing out. Default is defaultCommandTimeout.
• ctrlKey: This activates the control key. Default is false.
• log: Displays the record in command log in output. Default is true.
• Force: Forces double clickability. Default is false.
• 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.
• ScrollBehaviour: 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.
• Position: Various arguments based on the positions can also be passed onto where the double click command should perform. Here are some of the positions topLeft, top, top right, left, center, right, bottomLeft, bottom, and bottomRight.
• X and Y: Can mention the pixel distances coordinates on where it should be double clicked on.

Double click command correct use

y.get('.btn').dblclick() 

double clicks the btn element.

cy.focused().dblclick() 

double clicks with more focus.

cy.contains('Welcome').dblclick() 

double clicks text containing 'Welcome.'

Wrong use

cy.dblclick()
cy.window().dblclick()

Example

Examples of dblclick command with various arguments:

describe('The DoubleClick Command',() => {
    it('visit the site, perform various clicks',()=>{
        cy.visit('https://www.programsbuzz.com/')
        cy.contains('Start Learning').dblclick()
    })
})

This one double clicks the text containing 'Start Learning.'

describe('The DoubleClick Command',() => {
    it('visit the site, perform various clicks',()=>{
        cy.visit('https://www.programsbuzz.com/')
        cy.get('page-img').dblclick('bottomLeft')
    })
})

Double clicks the bottomLeft element after getting the entire page.

describe('The DoubleClick Command',() => {
    it('visit the site, perform various clicks',()=>{
        cy.visit('https://www.programsbuzz.com/')
        cy.get('#id').dblclick(10, 100)
    })
})

Double clicks on the provided id after getting the id with coordinates of CSS px distance.

describe('The DoubleClick Command',() => {
    it('visit the site, perform various clicks',()=>{
        cy.visit('https://www.programsbuzz.com/')
        cy.get('#id').as('id')
        cy.get('@id').dblclick('topRight', {force: true})
    })
})

Aliases the element and uses the same alias to double click on the element present on the top right of the page with force.

describe('The DoubleClick Command',() => {
    it('visit the site, perform various clicks',()=>{
        cy.visit('https://www.programsbuzz.com/')
        cy.get('#id').dblclick({multiple: true})
    })
})

Double clicks on the id element, which is present everywhere.

describe('The DoubleClick Command',() => {
    it('visit the site, perform various clicks',()=>{
        cy.visit('https://www.programsbuzz.com/')
        cy.get('#id').dblclick({ctrlKey: true})
    })
})

Activates the control key and dblclicks along with it. Identical syntaxes go for other keypress arguments.