使用 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>

我似乎也看不到使用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将检查style 属性是否visibility不存在hidden以及元素是否具有可见的边界框。

确保元素不为空

即使该元素是可见的，它也可能是空的（例如<span></span>）。如果您也希望元素不为空，则可以使用以下查询：

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

这还将使用伪选择器:empty并:not确保元素包含子节点或文本。如果您想查询元素内的特定文本，您可能需要查看此答案。