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

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

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

Answer 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);

上述功能的替代方法是使用伪造者$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元素并从中返回文本内容。

puppeteer：document.querySelector可在控制台上使用，但不能在pupppeteer上使用

2 个答案: