如何等待多个独立Locator同时可见？

你遇到的问题很典型——顺序等待元素可见时，第一个元素可能在等待第二个元素的过程中变得不可见，导致测试逻辑不符合预期。要确保两个元素同时处于可见状态，可以用以下两种方法解决：

方法一：使用Promise.all并行等待断言 #

直接通过Promise.all同时启动两个可见性断言，只有当两者都满足条件时才会继续执行后续代码：

test('两个元素同时可见', async ({page}) => {
   const el1 = page.locator('.el1');
   const el2 = page.locator('.el2');

   // 并行等待两个元素都达到可见状态
   await Promise.all([
     expect(el1).toBeVisible(),
     expect(el2).toBeVisible()
   ]);
});

这种方式完全贴合Playwright的断言体系，代码简洁易维护，是最推荐的方案。

方法二：使用waitForFunction自定义检查逻辑 #

如果需要更灵活的判断逻辑，可以用page.waitForFunction在浏览器上下文里直接检查两个元素的可见状态：

test('两个元素同时可见', async ({page}) => {
  await page.waitForFunction(() => {
    const el1 = document.querySelector('.el1');
    const el2 = document.querySelector('.el2');
    // 模拟Playwright的toBeVisible判断逻辑：元素存在且未被隐藏
    return el1?.offsetParent !== null && el2?.offsetParent !== null;
  });
});

这里通过offsetParent !== null来判断元素是否可见（和Playwright内部的可见性判断逻辑一致），确保两个元素同时满足条件时才会结束等待。

内容的提问来源于stack exchange，提问作者doberkofler