如何使用 Puppeteer 读取 span 元素的值答案

【问题标题】：How to read the value of an span element with Puppeteer如何使用 Puppeteer 读取 span 元素的值
【发布时间】：2020-07-13 22:23:08
【问题描述】：

我正在尝试进行一些网络抓取，以读取 html 页面中的一些行。我需要查找在某些<span> 元素内的页面中重复的文本。在下面的示例中，我想以 ['Text number 1','Text number 2','Text number 3']

的字符串数组结尾

<html>
    ...
    <span>Text number 1</span>
    ...  
    <span>Text number 2</span>
    ...
    <span>Text number 3</span>
    ...
</html>

我有以下代码

sElements = ' ... span'; // I declare the selector.
cs = await page.$$(sElements); // I get an array of ElementHandle

选择器的工作方式与 Google Chrome 开发者工具中的一样，它准确地捕获了我正在寻找的 3 个元素。 cs 变量也填充了三个元素的数组。但后来我正在尝试

for(c in cs)
    console.log(c.innerText);

但未定义已记录。我试过 .text .value .innerText .innerHTML .textContent ...我不知道我错过了什么，因为我认为这真的很简单

我也尝试过，结果相同。

cs = await page.$$eval(sElements, e => e.innerHTML);

【问题讨论】：

标签： node.js puppeteer

【解决方案1】：

这是一个获取最后一个 span 元素的 innerText 的示例。

  let spanElement;

  spanElement = await this.page.$$('span');
  spanElement = spanElement.pop();
  spanElement = await spanElement.getProperty('innerText');
  spanElement = await spanElement.jsonValue();

如果您仍然无法获取任何文本，请确保选择器是正确的，并且 span 元素定义了一个 innerText（不是 outerText）。您可以在 Chrome 控制台中运行 $(selector) 进行检查。

【讨论】：

这对我有用，但有更清洁的方法吗？获得 innerHTML 的代码很多，谢谢
您可以在上下文控制台中进行评估以获取属性。看看stackoverflow.com/a/46565796/4068558