在剧作家中，如何等待所有加载微调器的实例消失？

Question

测试失败，因为加载程序不允许保存表单，但我的方法不起作用。

我也尝试过将函数和 Promise.all 与 waitForElementState('hidden') 一起使用，但不起作用。有必要获取该组件的所有元素（使用 $$、all() 或其他方式），因为页面正在查找超过 2 个元素（有时是 3 个或更多）。

我的方法：

函数（由

await waitForLoadersToDisappear(page)

调用），我也尝试过使用page.$$：

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

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

我也尝试过这种没有功能的方法：

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');

装载机图片：

HTML 元素：

也许我可以等一下::然后再停止工作吗？

Answer 1

await expect(locator).toHaveCount(0);

toHaveCount 将等待所有加载器实例消失。

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

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;
}

这将等待旋转器并计算旋转器的数量并检查旋转器是否消失。完全加载后，它将返回完全加载的页面

注意：将 locator_name 替换为您唯一的定位器名称