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

Question

我正在使用CucumberJS和Puppeteer。我在从<h1>标签中提取文本时遇到了困难。

炭烬.hbs代码为：

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

由于EmberJS使用动态ID，因此我在选择器中使用HTML data-标签。

// 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

该元素很可能是动态生成的，因此在尝试抓取textContent之前，应等待page.waitForSelector()的出现：

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