使用 Puppeteer，如何从 <h1> 标签中获取文本？答案

【问题标题】：Using Puppeteer, how do you get text from an <h1> tag?使用 Puppeteer，如何从 <h1> 标签中获取文本？
【发布时间】：2019-02-06 22:10:50
【问题描述】：

我正在使用 CucumberJS 和 Puppeteer。我很难从 <h1> 标记中提取文本。

ember .hbs 代码为：

<div class="grid__cell" data-test-foobar4="true">
    <h1 class="ao-headline u-font--light" data-test-foobar3="true">{{pageTitle}}</h1>
</div>

我使用 HTML data- 标签作为我的选择器，因为 EmberJS 使用动态 ID。

// Read page table title
async verifyTestTileForList() {
    const textContent = await this.page.evaluate(() => document.body.querySelector('[data-test-foobar3="true"]').textContent);
    console.log('Page title = ' + textContent);
}

当我运行它时，我得到：

错误：评估失败：TypeError：无法读取 null 的属性“textContent”

这对我来说没有意义。我查看了 HTML，我看到了：

<h1 data-test-foobar3="true" class="ao-headline u-font--light">Imports</h1>

我哪里出错了？

【问题讨论】：

标签： javascript node.js google-chrome-devtools puppeteer

【解决方案1】：

该元素很可能是动态生成的，因此您应该等待带有page.waitForSelector() 的元素，然后再尝试抓取textContent：

await page.waitForSelector('[data-test-foobar3="true"]');
const textContent = await page.evaluate(() => document.querySelector('[data-test-foobar3="true"]').textContent);
console.log('Page title = ' + textContent);

【讨论】：

你是对的 - 我已经放置了一个 waitForSelector()。根据经验，对于动态（在我的例子中使用 {{ }} 的 emberJS 组件），我需要等待，否则代码将在尚未呈现时尝试查找它。