javascript - 使用 puppeteer 单击可见元素

Question

我试图单击页面中的多个元素，但前提是它们可见。使用 selenium(使用 is_displayed)这很容易，但我似乎无法在 puppeteer 中找到方法。我想用类似的东西

try {
    await page
      .waitForSelector(id, visible=true, timeout=0)
      .then(() => {
        element.click()
      });
...

但是如果它是一个像这样的简单元素，这就不起作用了:

<a class="cookie-close" href="#">
OK
</a>

我似乎也看不到使用 puppeteer 中的 element.click 方法来完成此操作的方法。

Answer 1

简答

const element = await page.waitForSelector('a.cookie-close', { visible: true });
await element.click();

这使用了 page.waitForSelector 使用选择器选择可见元素的函数 a.cookie-close .查询选择器后，代码使用 elementHandle.click 点击它。

解释

只有函数 page.waitForSelector 和 page.waitForXPath 内置一个选项，用于检查元素是否不仅存在而且可见。使用时，puppeteer will check如果样式属性 visibility不是 hidden如果元素有 visible bounding box .

确保元素不为空

即使元素可见，它也可能是空的(例如 <span></span> )。如果您还希望元素不为空，则可以改用以下查询:

const element = await page.waitForSelector('SELECTOR:not(:empty)', { visible: true });

这将另外使用伪选择器 :empty 和 :not 以确保该元素包含子节点或文本。如果您想查询元素内的特定文本，您可能需要查看 this answer .