2

(JS) I'm trying to wait a loader (div class="loader" data-testid="form-loader") disappear on my page.

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?

Henrique
  • 21
  • 3

1 Answers1

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

Vishal Aggarwal
  • 1,929
  • 1
  • 13
  • 23