Playwright如何等待两个选择器中任意一个变为可见？

方案1：用page.waitForFunction自定义可见性判断 #

因为#message本来就存在DOM里只是不可见，直接用waitForSelector会误匹配到它，导致超时。可以自定义函数来检查两个元素任意一个是否真正可见：

await page.waitForFunction(() => {
  // 检查错误提示是否可见
  const msgEl = document.querySelector('#message');
  if (msgEl && window.getComputedStyle(msgEl).display !== 'none') {
    return true;
  }
  // 检查目标图片是否可见
  const imgEl = document.querySelector('img#image');
  return imgEl && imgEl.offsetParent !== null;
}, { timeout: 15000 });

这个逻辑里：

• 对#message，通过计算样式确认它不是display:none
• 对img#image，用offsetParent !== null判断元素是否在页面中可见（能覆盖visibility:hidden、被父元素隐藏等多种不可见场景）

方案2：用Promise.race包装带可见性要求的等待 #

也可以把两个独立的等待逻辑放在Promise.race里，让它们同时等待，只要其中一个满足条件就结束：

await Promise.race([
  page.waitForSelector('#message', { 
    timeout: 15000,
    visible: true // 只等可见的元素
  }),
  page.waitForSelector('img#image', { 
    timeout: 15000,
    visible: true
  })
]);

这里的核心是给waitForSelector加上visible: true参数，这样它会忽略已存在但不可见的#message，只等元素出现且可见的状态。

原写法失败的原因 #

你之前的代码await page.waitForSelector('#message, img#image', { timeout: 15000 })会匹配到DOM中已存在的#message（哪怕它是display:none），但waitForSelector默认只要求元素存在，不检查可见性，所以即使图片已经显示，它还在等#message变成可见，最终超时。

内容的提问来源于stack exchange，提问作者the constant gardener