Puppeteer:正确选择内部文本
2019-06-21
11607
我想获取具有特定类名的字符串,比如说“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
这变得更加令人困惑...
EDIT 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
2个回答
答案分为几个部分。获取正确的选择器和获取数据。
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
});
Md. Abu Taher
2019-06-22
尝试在
var x = document.getElementsByClassName("example");
或
var x = document.getElementsById("example");
之前验证元素
var counter = await page.evaluate(() => {
return x.innerText;
});
Fadi
2019-06-21