0

Desired Outcome: I would like to write a test that clicks on each of these "X"s. I would like to do this until there are not any images left.

Images

Use Case:

I reload the list of images each time, to ensure I backfill up to 15.

  1. The user has 18 images
  2. On the first page I show 15
  3. When the user deletes 1 image, I reload the images so there are 15 on page 1 again, and now only 2 images on page 2.

Error:

Because of the reload of the images, it is causing the .each functionality from Cypress to break with the following error message:

cy.click() failed because the page updated as a result of this command, but you tried to continue the command chain. The subject is no longer attached to the DOM, and Cypress cannot requery the page after commands such as cy.click().

Cypress Code Implementation:

cy.get('[datacy="deleteImageIconX"]').each(($el) =>  cy.wrap($el).click());

What can I do to run a successful test that meets my use-case?

Mark Rotteveel
  • 100,966
  • 191
  • 140
  • 197
Luke
  • 761
  • 1
  • 18

1 Answers1

5

I've seen this before, this answer helped me tremendously waiting-for-dom-to-load-cypress.

The trick is not to iterate the elements, rather use a loop over the total (18) and to confirm deletion within the loop.

for (let i = 0; i < 18; i++) {
  cy.get('[datacy="deleteImageIconX"]')
    .first()
    .click()
    .should('not.exist');  
}

This strategy eliminates the problems:

  • trying to work with stale element references (detached)
  • iterating too fast (confirm current action completes first)
  • page count being less than total count (page adjusts between iterations)
Jhaidel
  • 149
  • 6