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

【问题标题】：Is it possible to click every element on a page with dynamic content?是否可以单击具有动态内容的页面上的每个元素？
【发布时间】：2019-09-20 18:23:54
【问题描述】：

puppeteer 是否可以访问网站，测试页面上的每个内容是否可点击/链接是否正常工作，并且所有这些都使用动态内容，以便我可以自动化我的 UI 测试？

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

【问题讨论】：

【解决方案1】：

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

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

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

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

有了选择器后，你可以像这样使用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 中添加或删除某些内容。

【讨论】：