使用 Javascript Puppeteer 获取标签的内部文本

Question

我是 js 新手，一直在尝试获取 bio__name__display 标记的内部文本（请参阅附加的 DOM），但我失败了。 这可能是什么问题？

我从 index.js 调用 page.js 中定义的异步函数，当我 console.log 第一个函数的返回值时，它工作正常。但是第二个函数不起作用（输出为undefined）。

对于 CSS 选择器，我尝试了以下但无济于事。

• div.bio__name > span.bio__name__display
• "div.bio__name>span.bio__name__display"
• div.bio__name span.bio__name__display

index.js

const splinterlandsPage= require('./page');
.
.
.
await page.waitForTimeout(10000);
    let [mana, displayName] = await Promise.all([
        splinterlandsPage.checkMatchMana(page).then((mana) => mana).catch(() => 'no mana'),
        splinterlandsPage.getText(page).then((displayName) => displayName).catch(() => 'displayName name not caught')
    ]);

console.log("mana : ", mana)                   //works
console.log("displayName: ", displayName);     //does not work
.
.
.

page.js

.
.
.
// first function
async function checkMatchMana(page) {
    const mana = await page.$$eval("div.col-md-12 > div.mana-cap__icon", el => el.map(x => x.getAttribute("data-original-title")));
    const manaValue = parseInt(mana[0].split(':')[1], 10);
    return manaValue;
}

// second function
async function getText(page) {
    const displayName= await page.$$eval("div.bio__name > span.bio__name__display", el => el.innerText);
    return displayName
}
.
.
.
exports.checkMatchMana = checkMatchMana;
exports.getText= getText;

DOM

Answer 1

尽管我想分享实际的网站 URL，但这样做很困难，因为访问 DOM 需要注册该网站，而这个特定的 DOM 仅在特定时间后 2 分钟内可用点击网站内的按钮。

我今天终于自己弄明白了——下面是一个解决方案和一些注释供以后参考。

解决方案

问题不是 CSS 选择器，而是 $$eval 返回的内容。
由于$$eval 返回一个元素列表，所以返回值必须像el => el.map(x => x.innerText)) 那样处理，而不是el => el.innerText。

page.js

// second function
async function getText(page) {
    const displayName = await page.$$eval("div.bio__name > span.bio__name__display", el => el.map(x => x.innerText));
    return displayName[0]
}

其他解决方法可以使用 $eval 代替它返回单个匹配元素。

// second function
async function getText(page) {
    const displayName = await page.$eval("div.bio__name > span.bio__name__display",　el => el.innerText);
    return displayName
}

注意事项

$$eval 和 $eval

• $$eval 在内部运行document.querySelectorAll('CSS Selector')，它返回多个匹配指定选择器组的elements。
  （也适用于只有一个元素匹配，但返回值需要在pageFunction[, ...args]进行相应处理）

• $eval 在内部运行document.querySelector('CSS Selector')，它返回一个匹配指定选择器组的element。

CSS 选择器

作为一个新学习者，我经常发现自己在选择正确的选择器时迷失了方向。
可能是一种快速而肮脏的方式，但the first answer to this question 有所帮助。