Puppeteer：正确选择内部文本

Question

我想获取一个具有特定类名的字符串，比如说“CL1”。

这是用来做的并且它起作用了:(我们在一个 asycn 函数中）

var counter = await page.evaluate(() => {
            return document.querySelector('.CL1').innerText;
        });

现在，几个月后，当我尝试运行代码时，出现此错误：

Error: Evaluation failed: TypeError: Cannot read property 'innerText' of null

我console.log()在上一段代码前后做了一些调试，发现这是罪魁祸首。

我查看了网页的代码，里面有特定的类。

但是我发现了另外两个同名的类。

它们三个都嵌套在许多类的深处。

那么，鉴于我知道我感兴趣的那个的类层次结构，选择我想要的那个的正确方法是什么？

编辑：由于有三个同名的类名，我想从第一个中提取信息，我可以在 querySelector() 上使用数组表示法来访问第一个中的信息吗？

EDIT2：我运行这个：

return document.querySelector('.CL1').length;

我得到了

Error: Evaluation failed: TypeError: Cannot read property 'length' of null

这更令人困惑......

编辑 3：我尝试了 Md Abu Taher 的建议，我看到他提供的代码片段没有返回 undefined。这意味着选择器对我的代码可见。

然后我运行这段代码：

var counter = await page.evaluate(() => {
            return document.querySelector('#react-root > section > main > div > header > section > ul > li:nth-child(1) > a > span').innerText;
            });

我得到了同样的错误：

Error: Evaluation failed: TypeError: Cannot read property 'innerText' of null

Answer 1

答案分为几个部分。获得正确的选择器，并获得数据。

1. 正确选择器

使用检查元素

• 右键单击所需的元素，然后单击检查元素。
• 然后右键单击并单击复制 > 复制选择器

这将为您提供该特定元素的唯一选择器。

使用选择器工具

有很多 chrome 扩展可以帮助您找到正确的选择器。

• 选择工具
• 获取唯一的 CSS 选择器
• 复制 CSS 选择器

2. 获取数据

鉴于您的选择器是.CL1，您需要做的事情很少。

等待所有网络事件完成

基本上在导航上，您可以等到网络空闲。

await page.goto(url, {waitUntil: 'networkidle2'});

等待元素出现在 DOM 中。

即使网络空闲，也可能有重定向等。最好的选择是等到元素出现。以下将等待直到找到元素，否则将引发错误。

await page.waitFor('.CL1');

或者，检查元素是否存在并仅在存在时返回数据

如果不想抛出错误或者元素随机出现，则需要检查它的存在并返回数据。

await page.evaluate(() => {
  const element = document.querySelector('.CL1');
  return element && element.innerText; // will return undefined if the element is not found
});