是否可以从 Puppeteer 中的现有节点获取 CSS 选择器？

Question

我这里有一个非常简单的用例，我需要浏览元素表并单击每个元素，然后输入一个值。

在浏览器环境中，您可以在文档、任意节点上调用QuerySelector。所以你可以轻松地做一些事情，比如：

const list = document.querySelectorAll('.rows')

然后用

查询每行的元素

list.map(el => { 
    el.querySelector('.thing_1').click();
    el.querySelector('.thing_2').click();
    el.querySelector('.thing_3').click();
})

我使用列表元素 el 作为 QuerySelector 的根来获取第二级元素。

所以现在我处于Javascript Click功能无法正常工作的情况，我需要鼠标单击。在 puppeteer 中，我相信您需要通过调用 page.click() 方法来完成此操作，该 Page 在浏览器级别上下文中不可用（即：在 page.evaluate() 或 $$eval() 内）

我知道我可以使用

const list = page.$$('.rows')

函数以与 QuerySelectorAll 相同的方式获取节点的元素，但是一旦我有了它，我如何迭代它们以从作为根元素的节点查询第二级元素下一个查询？在木偶师的背景下这是否可能？

正如您可能猜到的，您不能就这么走

page.click('.thing_1'); 

因为该查询只会给你第一行的 thing_1 ，除了使用现有的元素节点之外，没有什么好的方法来查询选择当前行。理想情况下，您希望以相同的方式进行 css 查询来执行类似的操作

list.map((el,page) => { 
    page.click(el.querySelector('.thing_1'));
    ...
},page)

这可能吗？如果是这样，它的正确语法是什么？我在此类问题上看到的每个答案都有效地使用了 Javascript Click 函数，而不是 Puppeteer click 函数。

Answer 1

我在测试时通过另一个答案找到了这一点。如果其他人遇到这个问题：

JAVASCRIPT 浏览器上下文

const rows = document.QuerySelectorAll(".row") 
const data = rows.map(r=>r.querySelector(".item_in_row").innerText); 

木偶师背景：

const rows = await page.$$(".row"); 
let data = []; 
for(let r of rows) { 
    const item = await r.$(".item_in.row"); 
    const item_in_row_text = await item.evaluate(x => x.innerText);
    data.push(item_in_row_text); 
}

JS document.QuerySelectorAll() == Puppeteer page.$$() JS document.QuerySelector() == Puppeteer page.$() 您可以在从页面返回的 CdpElementHandle 对象数组上运行相同的 .$() 和 .$$() 函数（以及评估和其他页面函数）。$$() 函数就像在由 NodeList 返回的元素上运行一样document.querySelectorAll().