Javascript 如何在Puppeter中获取div中的文本

我似乎无法从中获取文本，我收到以下错误： TypeError:无法读取null的属性“innerHTML”。我试过所有的方法，但都不管用。

---

这是该网站的链接

如果您的目标是接收文本，您可以在DOM页面中使用JS进行变通。
更改此项：

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

为此：

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

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

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

wait page.waitForSelector（“您的选择器”）
让元素=等待页面。$（“您的选择器”）
让value=wait page.evaluate（el=>el.textContent，元素）

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

假设我想要跨度中的文本值

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

//标记
测试
//在我的e2e测试文件中
const spanVal=wait page.$eval（'.target holder.target'，el=>el.innerText）；
console.log（spanVal）；//测试

官方文档链接：

来自：

---

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

const tweetHandle = await page.$('.tweet .retweets');
expect(await tweetHandle.evaluate(node => node.innerText)).toBe('10');

随机文本。
//右键单击此元素->复制->复制XPath
const元素=等待页面。$x（'//thecopiedxpath'）；
const textObject=await元素[0]。getProperty（'textContent'）；
const text=textObject.\u remoteObject.value；
console.log（文本）；

---

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

使用

waitForSelector

和

evaluate

这将变得非常干净

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

---

请分享HTML布局。添加一些代码解释，使其易懂，它是如何工作的我在评论中添加了解释我相信基于

wait页面的解决方案。evaluate（el=>el.textContent，element）

更好。或者只使用element上的方法：

let value=wait element.evaluate（el=>el.textContent）

谢谢！与您的应答器链接一起使用时获得的链接无效。仅供参考

const tweetHandle = await page.$('.tweet .retweets');
expect(await tweetHandle.evaluate(node => node.innerText)).toBe('10');

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

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