木偶：适当选择内部文本

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）的建议，我发现他提供的代码片段未返回未定义的内容。这意味着选择器对我的代码是可见的。

然后我运行以下代码段：

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

尝试验证之前的元素

var x = document.getElementsByClassName("example");

OR

var x = document.getElementsById("example");

然后

var counter = await page.evaluate(() => {
            return x.innerText;
        });

Answer 2

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

1。正确选择器

使用检查元素

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

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

使用选择器工具

有一堆chrome扩展名可以帮助您找到合适的选择器。

• Selectorgadget
• Get Unique CSS Selector
• Copy Css Selector

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