Error: locator.click: Target closed when using saucedemo.com

Basically, don't use a forEach loop. When I paste the code in my editor I get this error (I have eslint configured):

use just a regular for ... of ... loop:

const products = await page.getByRole('button').filter({ hasText: 'Add to cart' }).all();
  for (const addToCart of products) {
    await expect(addToCart).toBeVisible({timeout: 10000});
    await addToCart.click();
  }

In general, you can't use await with a forEach loop, and there's almost never a reason to use forEach over a regular for ... of ... loop

Ah makes sense, coming from python and c#, trying to force a forEach when it's not necessary. for... x of y is great to know.

Unfortunately, I'm still having an issue...

There are 6 buttons total, but only the first 3 buttons are being successfully clicked. The rest are not able to be found. I'm wondering if because the button text is changing once clicked, that the original locator I used is no longer valid?

Sure enough, this is clicking all the buttons:

for (let i = 0; i < products.length; i++) { await products[0].click(); }

I expected the state of the buttons to have been saved in the products variable at the point it was assigned

You know, I had that issue too. I was wondering what was going on

https://playwright.dev/docs/api/class-locator#locator-all

Very weird...

const productsLocator = page
    .getByRole('button')
    .filter({ hasText: 'Add to cart' });
  await expect(productsLocator).toHaveCount(6);
  for (const addToCart of await productsLocator.all()) {
    await expect(addToCart).toBeVisible();
    await addToCart.click();
  }

Even that doesn't work

I think something is happening because the .all() is being messed up when the locators are disappearing

Yeah that must be it, changing the click() to hover() works fine, because the locators aren't disappearing

interesting

await page.goto('https://www.saucedemo.com/');
  await page.locator('[data-test="username"]').fill('standard_user');
  await page.locator('[data-test="password"]').fill('secret_sauce');
  await page.locator('[data-test="login-button"]').click();
  const productsLocator = page
    .getByRole('button')
    .filter({ hasText: 'Add to cart' });
  await expect(productsLocator).toHaveCount(6);
  let products = await productsLocator.all();
  while (products.length > 0) {
    await expect(products[0]).toBeVisible();
    await products[0].click();
    products = await productsLocator.all();
  }

There you go, using a while loop and always clicking on the first one found, then getting the list again

since the list being iterated over changes every time around the loop 🙂

Nicely done!