Using Puppeteer, how do you get text from an <h1> tag?

Question

I'm using CucumberJS & Puppeteer. I am having a difficult time extracting the text from an <h1> tag.

The ember .hbs code is:

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

I'm using HTML data- tags for my selectors since EmberJS uses dynamic id's.

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

When I run this, I get:

Error: Evaluation failed: TypeError: Cannot read property 'textContent' of null

Which doesn't make sense to me. I look at the HTML, and I see:

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

Where am I going wrong?

Answer 1

The element is most likely being generated dynamically, so you should wait for the element with page.waitForSelector() before attempting to scrape the 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);