Javascript 木偶演员：内部文本的正确选择

我想获取一个具有特定类名的字符串，比如“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上使用数组表示法来访问第一个类名中的信息吗

编辑2： 我运行以下命令：

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

---

请在安装之前尝试验证该元素

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

或

然后

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

---

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

1.选择正确的选择器 使用检查元件 在所需图元上单击鼠标右键，然后单击“检查图元”。 然后单击鼠标右键，然后单击“复制>复制选择器” 这将为该特定元素提供唯一的选择器

使用选择器工具 有很多chrome扩展可以帮助您找到正确的选择器

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

---

您能提供您试图访问的页面的url吗？除了确保类名没有更改之外，请在调用querySelector之前确认您正在等待页面加载。@krzystofkrzeszewski感谢您的努力，但这是一个内部网URL@zaquest对处理得很好。是否正在等待在dom中加载内容？我这样做了：var counter=wait page.evaluate=>{var x=document.getElementsByClassNameCL1；console.logx；return x.innerText；}；控制台.日志计数器；我得到了这个{undefined TypeError:Cannot read property'replace'of undefined}尝试使用innerHTML而不是innerText//document.getElementByIddemo.innerHTML此链接可能有助于完全阅读我的答案并应用我在那里写的内容：您使用了domcontentloaded而不是networkidle2或networkidle0。让我们来看看。

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