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

Question

我正在使用 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>

data-因为 EmberJS 使用动态 id，所以我为我的选择器使用了 HTML标签。

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

当我运行这个时，我得到：

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

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

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

我哪里错了？

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