page.evaluate 比。木偶 $ 方法

Question

我对这两个代码块的区别很感兴趣。

const $anchor = await page.$('a.buy-now');
const link = await $anchor.getProperty('href');
await $anchor.click();

await page.evaluate(() => {
    const $anchor = document.querySelector('a.buy-now');
    const text = $anchor.href;
    $anchor.click();
});

我通常发现 page.evaluate() 中的原始 DOM 元素更容易工作，并且 $ 方法返回的 ElementHandles 是一种抽象。

但是我觉得异步 Puppeteer 方法可能性能更高或可靠性更高？我在文档中找不到任何关于此的指导，并且有兴趣了解更多关于 pro's/con 的关于每种方法的信息以及添加像 page.$$().[=15= 这样的方法背后的动机]

Answer 1

这些代码行之间的主要区别在于 Node.js 和浏览器环境之间的交互。

第一个代码片段将执行以下操作：

运行 document.querySelector 在浏览器中 return 元素句柄（到 Node.js 环境）
运行 getProperty 在句柄上 return 结果（到 Node.js 环境）
单击浏览器中的一个元素

第二个代码片段就是这样做的：

运行浏览器上下文中的给定函数（return 结果到 Node.js 环境）

性能

关于这些语句的性能，必须记住 puppeteer 通过 WebSockets 与浏览器进行通信。因此，第二条语句将运行更快，因为只有一个命令发送到浏览器（与三个相反）。

如果您要连接的浏览器运行在另一台机器上（使用 puppeteer.connect 连接），这可能会有很大的不同。如果脚本和浏览器位于同一台机器上，则可能只会导致几毫秒的差异。因此，在后一种情况下，它可能不会产生太大影响。

使用元素句柄的优势

使用元素句柄有一些优点。首先，与使用 document.querySelector('...').click() 相比，像 elementHandle.click 这样的函数将表现得更 "human-like"。例如，puppeteer 会将鼠标移动到该位置并单击元素的中心，而不仅仅是执行 click 函数。

什么时候用什么

一般来说，我建议尽可能使用 page.evaluate，因为 API 也更容易调试。当错误发生时，您可以通过在 Chrome 浏览器中打开 DevTools 并在浏览器中重新运行相同的行来简单地重现错误。如果您将许多 page.$ 语句混合在一起，可能会更难理解问题是什么以及它是发生在 Node.js 内还是浏览器运行时间内。

如果您需要更长时间的元素，请使用元素句柄（因为您可能进行了一些复杂的计算或等待外部事件，然后才能从中提取信息）。

page.evaluate 比。木偶 $ 方法

page.evaluate Vs. Puppeteer $ methods

javascript

node.js

puppeteer

性能

使用元素句柄的优势

什么时候用什么