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

Question

当我在 Chrome 控制台中使用 document.querySelector 时，我得到了一些东西，但是当我对 puppeeter 使用相同的查询时。我得到 "undefined" 或 "Promise { }".

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

谢谢

Answer 1

那是因为querySelectorreturn是一个节点。尝试 return innerText,

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

Answer 2

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

您没有 return 从您的 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），但这是一个偏好问题。两者做同样的事情。

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

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

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

puppeteer: document.querySelector works on console but not on pupppeteer

puppeteer