puppeteer：document.querySelector 在控制台上工作，但不在 puppeteer 上工作

Question

当我在 Chrome 控制台中使用 document.querySelector 时，我得到了一些东西，但是当我对 puppeeter 使用相同的查询时。我得到“未定义”或“承诺{}”。

    const text = await page.evaluate(() => document.querySelector('div.tagCloud-slotAble.space--mv-2 > button:nth-child(1)'));
console.log(text)

谢谢

Answer 1

据我所知，您无法取回文本并将其输出到控制台的原因有两个：

• 您没有从您的evaluate方法返回值。
• 您正在检索元素，但不是元素中的文本内容。

如果您执行以下操作，这应该可以解决您的问题：

const text = await page.evaluate(() => {
  const uiElement = document.querySelector('div.tagCloud-slotAble.space--mv-2 > button:nth-child(1)'));
  return uiElement.textContent;
});
console.log(text);

上述函数的替代方法是使用 puppeteers$eval方法，如下所示：

const elementSelector = 'div.tagCloud-slotAble.space--mv-2 > button:nth-child(1)';
const text = await page.$eval(elementSelector, (uiElement) => {
  return uiElement.textContent;
});
console.log(text);

我个人更喜欢第二种选择（使用$eval），但这是一个偏好问题。两者都做同样的事情。

应该注意的是，您在evaluateor方法中运行的任何内容都会在您的页面上下文$eval中执行，即。它在远程浏览器当前打开的网页中执行。您基本上可以使用此方法在测试期间将新的 UI 元素注入您的网页，在网页中执行 JavaScript 代码等。

或者您可以像现在一样使用它来查找 UI 元素并从中返回文本内容。