是否可以单击页面上具有动态内容的每个元素？

Question

puppeteer是否可以访问网站，测试页面上的每个内容是否都可单击/链接有效以及所有这些内容是否具有动态内容，以便我可以自动进行UI测试？

问题是，内容在变化，并不是每个元素都有一个ID，但我仍然希望每个元素都检查一个页面。

Answer 1

是的，通常可以单击页面上的任何元素。即使没有标识它们的ID或类的元素也具有选择器。获取他们的选择器可能更复杂。

获取元素的选择器

下面是一个如何在Chrome浏览器中获取元素选择器的示例。我正在获取问题第一个p元素的选择器。请注意，它也没有ID或类。 document.querySelector('...')表明它可以正确识别节点。

---

即使元素是动态生成的，它也具有选择器，但可能很难找到它。您可能要检查this page关于CSS选择器的各种可能性。

如果该元素不容易识别，您还可以考虑使用该元素的内容进行识别是否更有意义。例如，您可以将XPath表达式用于find an element with a specific text inside。

点击元素

有了选择器后，可以使用page.click函数或elementHandle.click函数，如下所示：

示例：查询所有元素，对其进行迭代，然后依次单击

const elements = await page.$$('div.example a');
for (const element of elements) {
    await element.click();
}

示例：只需单击两个元素

await page.click('div.selector a.example');
await page.click('div.selector a.example2');

点击页面上的所有元素

如果您实际上要单击页面上的所有元素，则可以使用*选择器：

const elements = await page.$$('*');

您可以遍历此数组，但是要知道它还包含诸如script标签，div容器，html，head，body之类的元素以及不可点击的元素此外，某些元素（如a标签）在单击后可能会发出导航请求。其他元素（如按钮）甚至可能在DOM中添加或删除某些内容。