如何等待多个定位器可见答案

【问题标题】：How to wait for multiple locators to be visible如何等待多个定位器可见
【发布时间】：2023-01-13 03:43:15
【问题描述】：

当等待单个 Locator 可见时，这可以使用简单的 expect().toBeVisible() 但我将如何等待多个独立定位器同时可见？在下面的示例中，el1 最初可能是可见的，但在等待 el2 可见时，el2 可能不再可见，我想确保这两个元素同时可见。

test('visible', async ({page}) => {
   const el1 = page.locator('.el1');
   const el2 = page.locator('.el2');

   await expect(el1).toBeVisible();
   await expect(el2).toBeVisible();
});

【问题讨论】：

标签： playwright

【解决方案1】：

您可以使用 v1.29 中的 .toPass() 为此，它将重试直到所有断言通过或满足超时：

await expect(async () => {
    const el1 = page.locator('.el1');
    const el2 = page.locator('.el2');

    await expect(el1).toBeVisible();
    await expect(el2).toBeVisible();
}).toPass({
    timeout: 10000,
});

【讨论】：

但是当el1可见时，这个断言不会也通过吗，剧作家等待el2，el1消失并且el2变得可见？
@stefanjudis 否。两个断言都必须在重试时通过内部才能通过。如果 el1 在重试 1 时可见而 el2 不可见，它将失败并重试。如果在下一次重试时 el1 不可见，它将立即失败并进行另一次重试，直到两者都可见或我们遇到超时。

【解决方案2】：

或者，您也可以使用 Promise.all 来确保两个元素都可见。

代码示例：

const el1 = page.locator('.el1');
const el2 = page.locator('.el2');
await Promise.all([
      expect(el1).toBeVisible();
      expect(el2).toBeVisible();
]);

【讨论】：