如何让page.waitForSelector等待匹配选择器的任意可见元素？

你的推测是对的：page.waitForSelector('.modal-body', {visible: true})确实会先定位到第一个匹配.modal-body的元素，然后等待它变为可见，而非等待任意满足选择器+可见性条件的元素。要直接等待任意符合要求的元素，有以下两种实用方法：

方法一：使用waitForFunction检测可见元素 #

通过waitForFunction在页面上下文里检查是否存在可见的.modal-body元素，直到找到为止：

await page.waitForFunction(() => {
  // 获取所有匹配的元素
  const modalBodies = document.querySelectorAll('.modal-body');
  // 检查是否有任意一个元素可见（offsetParent不为null表示元素在文档流中可见）
  return Array.from(modalBodies).some(el => el.offsetParent !== null);
});

如果需要同时获取这个可见元素的句柄，可以把some换成find：

const visibleModalBody = await page.waitForFunction(() => {
  const modalBodies = document.querySelectorAll('.modal-body');
  return Array.from(modalBodies).find(el => el.offsetParent !== null);
});
// 之后可以对元素进行操作，比如获取文本
const text = await visibleModalBody.evaluate(el => el.textContent);

方法二：结合CSS伪类优化选择器 #

如果你的页面中可见的模态框有特定的状态标识（比如父元素有active类），可以直接优化选择器，让waitForSelector精准匹配可见元素：

// 假设可见模态框的父元素有.active类
await page.waitForSelector('.modal.active .modal-body', {visible: true});

这种方法更简洁，但依赖页面的DOM结构约定，如果没有固定的状态标识，优先用第一种方法。

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