How to click x number of times in Cypress

user_11582405 0
Viewed 14221

I have a list of objects on my site that all have 'Add' buttons next to them. When the first 'Add' button is clicked, that object is added and the row disappears and is replaced by the next one down. The object name is the same. I want to .click() three times to add the first three objects in the list, before saving. How can I do this?

I'm aware of .click() to click a single object. I'm also aware of .click ({ multiple: true}) to click all the objects on the page. However, I want it to stop clicking after the third time.

Currently set to click multiple times to add all the objects in the list (which is incorrect):

    cy.get('#FieldListDialog > div > table > tr > td > button.button.add-button')
       .should('exist')
       .click({ multiple: true });
cypress click testing
10 Answers

To hammer click a button you can use this:

for(let n = 0; n < 10; n ++){
  cy.get('#FieldListDialog > div > table > tr > td > button.button.add-button')
    .click()
}

The multiple: true is used to click several elements, for example to click all buttons on the page.

user_110793560

If you need just a few clicks you could also go for this great solution:

cy.get("button").click().click().click()
.click().click().click().click().click()
.click().click()

In my opinion this syntax also gives a great sensation of what the user would be doing in this scenario.

user_57902880

The problem is with your selector. If you have n number of buttons, and you want to click all of them, then you need to match all the buttons, not just a single one. So look for a selector (e.g. a class unique to your Add button) that matches all of them. You can then use .each() to iterate through them and break out of the loop when you reach a certain index:

cy.get('#your_selector_to_your_add_buttons')
                .each(($el, $index) => {
                    if($index == 3){
                        return false;
                    }
                    cy.wrap($el).click()
                } )
user_89287270

You just had to move your assertion after the click and said click until not exists 

       .click({ multiple: true })
       .should('not.exist');```
user_51260470

you could use lodash https://lodash.com/docs/4.17.15#times

import { times } from 'lodash'

  times(2, () => {
    cy.get('#FieldListDialog > div > table > tr > td > button.button.add-button')
      .click()
  })
user_55713970

You could also do like this:

Cypress._.times(10, () => {
    cy.get('#FieldListDialog > div > table > tr > td > button.button.add-button').click()
})
user_101396110

The best way I could find to do this was by using the Wait for a number of milliseconds or wait for an aliased resource to resolve before moving on to the next command.

cy.get('#FieldListDialog > div > table > tr > td > button.button.add-button')
       .should('exist')
       .click();
cy.wait(500)

cy.get('#FieldListDialog > div > table > tr > td > button.button.add-button')
       .should('exist')
       .click();
cy.wait(500)

cy.get('#FieldListDialog > div > table > tr > td > button.button.add-button')
       .should('exist')
       .click();
user_131447710

Following the comments by Kamran Eyyubov and monikapatelIT, I was able to come up with the following to simulate a button mash, using the Lodash library that cypress exposes.

  // Fetch a reference outside the loop so it can be referenced inside the
  // loop.
  cy.get('#submit-button')
    .as('submitButton');

  // Simulate a button mash. Click the button 10 times.
  Cypress._.times(10, function () {
    cy.get('@submitButton')
      // The submit button is disabled on the first click, so
      // force is set to TRUE to prevent the test from failing
      // due to clicking a disabled element.
      .click({force: true});
  });
user_10322530 
// option 1
cy.get('button')
  .dblclick()

// option 2
cy.get('button')
  .click({ multiple: true })
user_44876570

I did and command

Cypress.Commands.add('MultiClick',(element:string,times: number) => {
    for(let n = 0; n < times; n ++){
        cy.get(element).click({ force: true })
    }
})

and then use it

cy.MultiClick('[data-cy=qty-product]',2)
user_96865090
Related