Blog Ask AI Tools Videos QA Wiki Discord

Locator all() returns empty list but given locator resolves to 3 elements

I am using this locator to try to get a list of elements on the page: await page.locator('input[id="remove"]').all() but it returns an empty list.

However, when I do something like await page.locator('input[id="remove"]').click() I get an error because the locator resolves to 3 elements. If that's the case, why aren't those 3 elements getting into my list when I use all()?

I feel like I must be missing something fundamental about the way all() works.

For reference, I'm trying to locate the three remove inputs in the .cell-remove classes inside of the td elements (see attached screenshot of the html). I need to get all of them and then delete the last 2 in the list, which I think I can figure out - but I need to be able to grab those elements first.

Thanks for any help you can give me!

This thread is trying to answer question "Why does the locator `all()` return an empty list when it resolves to 3 elements?"

3 replies

flyingchief888July 27 7:15 AM

Your syntax looks correct. Can you provide the site URL?

.gleedoJuly 27 8:03 AM

You don't actually need to use .all() to achieve what you want. Remove it and see what happens 🙂

ibrahim.bektasJuly 27 8:37 AM

you can try also await page.getByRole('input', { name: 'remove' }).all() .I dont know your flow you can also try something like this . : await page.getByRole('input', { name: 'remove' }).first().isVisible() then try to collect all the elements.

Open in Discord

Answer

Understanding the `all()` Function in @playwright/test

The all() function of a locator in @playwright/test doesn't wait for elements to match the locator. It immediately returns whatever is present on the page at that moment. If your page's elements change dynamically, calling locator.all() can produce unpredictable results.

Here's how you can ensure accurate results:

Wait for Elements to Load

Before calling locator.all(), make sure all elements have finished loading. You can use Playwright's waiting mechanisms, like waiting for a specific condition or event.

await page.waitForSelector('.my-element');
const elements = locator.all();

Interact with Returned Elements

The all() function returns an array of locators pointing to respective elements. You can interact with each element using Playwright's methods.

const elements = locator.all();
elements.forEach(async (element) => {
  await element.click();
});

In conclusion, if locator.all() returns an empty list when you expect multiple elements, it's likely due to dynamic changes in the elements. Always wait for all elements to load before calling locator.all().

For more insights on handling flaky tests in Playwright, check out this blog post.

Related Discord Threads