In playwright,how to wait for all instances of loading spinner to disappear?

Question

The test is failing because the loader doesn't allow saving the form but my methods isn't working.

I too have tried to use a function and Promise.all with waitForElementState('hidden'), but doesn't work. It's necessary to get all elements of this component (with $$, all() or another way) because the page is finding more than 2 elements (sometimes is 3 or more).

My methods:

function (called by await waitForLoadersToDisappear(page)), i've tried with page.$$ too:

async waitForLoadersToDisappear() {
  const loaders = await this.page.getByTestId('form-loader').all(); 

  await Promise.all(
    loaders.map(async (loader) => {
      await loader.waitForElementState('hidden');
    }),
  );
}

I too have tried this methods without functions:

await expect(page.$$('.loader')).toBeHidden();

await expect(page.locator('div[class="loader"]')).toBeHidden();

await expect(page.getByTestId('form-loader').all()).toBeHidden();

const loader = page.$$('form-loader'); //tried with locator.all() too await loader.waitForElementState('hidden');

Loader image: enter image description here

HTML element: enter image description here

Maybe can i wait this ::before stop works?

Hawker

This question is similar to: How can I assert that an element is NOT on the page in playwright?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. – Heirdom

Answer 1

await expect(locator).toHaveCount(0);

toHaveCount will wait until all loader instances disappear.

Reference: https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-have-count https://github.com/microsoft/playwright/issues/11988

Tomokotomorrow

Answer 2

export async function WaitForLoadingSpinner(page){
await page.locator('locator_name').waitFor();
let spinnerVisible = await page.locator('locator_name').isVisible();
let spinnerCount = await page.locator('locator_name').count();
while (spinnerVisible || spinnerCount>0) {
    spinnerVisible = await page.locator('locator_name').isVisible();
    spinnerCount = await page.locator('locator_name').count();
}
await page.waitForLoadState('networkidle');
await page.waitForTimeout(2000);  
return page;
}

This will wait for the spinner and count the number of spinner and check for the spinners are disappeared or not. After full load it will return the fully loaded page

NB : replace locator_name with your unique locator name

Puseyism