为什么 getElementsByClassName() 在使用 puppeteer 时返回 undefined？

Question

现在我正在尝试使用 puppeteer 获取一些元素，以获取一些类项（div）。我知道 getElementsByClassName 返回一个列表，您必须对其进行解析。然而对我来说，这个函数只是说未定义，即使我在浏览器中尝试它（最新版本的 chrome）。

这是代码（顺便说一句打字稿）：

private async getElementsFromBrowser(url : string) : Promise<any[]>{
  const page : Page = await goToPage(url)
  const result = await page.evaluate( arr => {
    //this is where the error comes in
    let setOfElements = document.getElementsByClassName('classnamethatexists');

    arr = setOfElements;
    return arr;
  }
  return Promise.resolve(result);
}

和html：

<div class='classnamethatexists'>"This is an example of the text I want to get"</div>
<div class='classnamethatexists'>"This is an example of the text I want to get"</div>
<div class='classnamethatexists'>"This is an example of the text I want to get"</div>
<div class='classnamethatexists'>"This is an example of the text I want to get"</div>

有没有办法让函数不返回未定义；

Answer 1

您的代码有很多问题。

page.evaluate 无法返回 HTMLCollection

page.evaluate 只能返回可序列化的数据，即可以从浏览器上下文通过JSON.stringify 发送到 Node.js 上下文的数据。 document.getElementsByClassName 返回一个 HTMLCollection，无法序列化。

使用page.$ 或page.$$ 返回元素句柄

要查询具有特定类的元素，最好将page.$$ 函数与class selector 结合使用。这将返回一个element handle，可用于在 Node.js 执行上下文中进一步执行。

异步返回值

由于您已经将函数声明为async，因此任何结果都将隐含地成为 Promise 的结果。因此，返回值时不需要使用Promise.resolve。

---

结果代码

将它们放在一起，生成的代码如下所示：

private async getElementsFromBrowser(url : string) : Promise<any[]>{
  const page = await goToPage(url); // I imagine this calls page.goto and returns the page
  const elements = await page.$$('.classnamethatexists');
  return elements;
}