如何在 puppeteer 中获取 div 中的文本

Question

const puppeteer = require("puppeteer");

(async function main() {
    try {
        const browser = await puppeteer.launch({headless: false});
        const page = await browser.newPage();
        page.setUserAgent("Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36");

        await page.goto("https://www.qimai.cn/rank/index/brand/all/genre/6014/device/iphone/country/us/date/2019-03-19", {waitUntil: 'load', timeout: 0});
        await page.waitForSelector(".container");
        const sections = await page.$$(".container");

        const freeButton = await page.$('[href="/rank/index/brand/free/device/iphone/country/us/genre/6014/date/2019-03-19"]');
        await freeButton.click();


        // free list

        const appTable = await page.waitForSelector(".data-table");
        const lis = await page.$$(".data-table > tbody > tr > td");

        // go to app content
        const appInfo = await page.$("a.icon");
        // appInfo.click();

        for (const content of lis) {
            const name = await content.$("div.appname");
            const gameName = await page.evaluate(name => name.innerText, name);
            console.log("Game Name: ", gameName);
        }

        console.log("-- bingo --");

    } catch (e) {
        console.log("our error", e);
    }
})();

我似乎无法从 获取文本，并且我收到此错误：TypeError：无法读取 null 的属性“innerHTML”。我已经尝试了所有方法，但它不起作用。这是网站的链接。https://www.qimai.cn/app/rank/appid/1451505313/country/us

Answer 1

我使用“waitForSelector”方法，然后尝试获取文本

await page.waitForSelector('your selector')
let element = await page.$('your selector')
let value = await page.evaluate(el => el.textContent, element)

Answer 2

我设法使用 Puppeteer 和 jest 从 DOM 选择中检索值的最简单方法是使用 eval 方法。

假设我想要一个跨度的文本值。

// markup
<div class="target-holder">
    <span class="target">test</span>
</div>

// inside my e2e test file
const spanVal =  await page.$eval('.target-holder .target', el => el.innerText);

console.log(spanVal); // test

官方文档链接：https : //pptr.dev/#?product=Puppeteer&version=v2.1.1&show=api-pageevalselector-pagefunction-args

Answer 3

使用waitForSelector，evaluate这变得很干净

const element = await page.waitForSelector('your selector'); // select the element
const value = await element.evaluate(el => el.textContent); // grab the textContent from the element, by evaluating this function in the browser context

Answer 4

如果您通过 XPath 获取元素，只需使用上面的代码。

<span class="toggleable"> Random text.</span> 
// right click on this element -> copy -> copy XPath

const element = await page.$x('//thecopiedxpath');
const textObject = await element[0].getProperty('textContent');
const text = textObject._remoteObject.value;
console.log(text);

这将打印消息“随机文本”。

Answer 5

如果您的目标是接收文本，您可以在 DOM 页面中使用 JS 进行解决。
改变这个：

const lis = await page.$$(".data-table > tbody > tr > td");

const appInfo = await page.$("a.icon");

for (const content of lis) {
  const name = await content.$("div.appname");
  const gameName = await page.evaluate(name => name.innerText, name);
  console.log("Game Name: ", gameName);
}

对此：

const appInfo = await page.$("a.icon");

const texts = await page.evaluate(() => {
  const textsToReturn = [];

  const elems = Array.from(document.querySelectorAll('.data-table > tbody > tr > td'));

  for (const el of elems) {
   textsToReturn.push(el.querySelector('div.appname').innerText)
  }

  // If I'm not mistaken, puppeteer doesn't allow to return complicated data structures, so we'll stringify
  return JSON.stringify(textsToReturn)
})

// And here is your game names
console.log('Game names', JSON.parse(texts));

注意：由于没有示例，此代码尚未在实际 html 页面上进行测试。
但是，您应该了解如何使用 DOM 本机方法重新实现 puppeteer 逻辑，以实现目标。