How to click x number of times in Cypress - testing

Question

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

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

You just had to move your assertion after the click and said click until not exists
.click({ multiple: true })
.should('not.exist');```

Answer 5

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

Answer 6

You could also do like this:
Cypress._.times(10, () => {
cy.get('#FieldListDialog > div > table > tr > td > button.button.add-button').click()
})

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

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)