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

Question

是否可以使用 puppeteer 访问网站，测试页面上的每个内容是否 clickable/links 正常工作以及所有这些都与动态内容相关，这样我就可以自动化我的 UI 测试？

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

Answer 1

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

获取元素的选择器

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

---

即使元素是动态生成的，它也有一个选择器，但可能更难找到它。您可能想检查 this page CSS 选择器的各种可能性。

如果元素不好识别，你也可以想想用元素的内容来识别是不是更有意义。例如，您可以使用 XPath 表达式 .

单击元素

有了选择器后，就可以像这样使用page.click function or the 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、[=22 等元素=] 以及不可点击的元素。此外，一些元素（如 a 标签）在被点击后可能会发出导航请求。其他元素（如按钮）甚至可能会在 DOM.

中添加或删除某些内容