puppeteer：document.querySelector 适用于控制台但不适用于 puppeteer答案

【问题标题】：puppeteer: document.querySelector works on console but not on pupppeteerpuppeteer：document.querySelector 适用于控制台但不适用于 puppeteer
【发布时间】：2018-09-17 16:25:57
【问题描述】：

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

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

谢谢

【问题讨论】：

标签： puppeteer

【解决方案1】：

那是因为 querySelector 返回一个节点。尝试返回innerText，

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

【讨论】：

嘿，我确实用 .innertext 获得了一些东西。当我将 queryselector 与 puppeeter 一起使用时，为什么我可以在 chrome 控制台上显示节点但什么也没有？谢谢
因为 puppeteer 在节点上下文中运行，但 chrome 控制台在浏览器上下文中。它们是分开的。
如果 puppeteer 在节点上下文上运行，“document.querySelector('div.tagCloud-slotAble.space--mv-2 > button:nth-child(1)').innerText”如何工作？
因为你是evaluating/running这部分在page

【解决方案2】：

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

您没有从 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 元素并从中返回文本内容。

【讨论】：