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

Question

是否可以使用 puppeteer 访问网站，测试页面上的每个内容是否可点击/链接是否有效以及所有这些是否都带有动态内容，这样我就可以自动化我的 UI 测试？

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

Answer 1

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

获取元素的选择器

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

---

即使元素是动态生成的，它也有一个选择器，但可能更难找到它。您可能想查看 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 中添加或删除某些内容。