Extracting string data from Puppeteer Promise object

[Claire29]

I’m working with Node.js and having trouble getting the actual string value from a Promise returned by Puppeteer. My code successfully scrapes data but I can’t figure out how to access the content inside the Promise.

const puppeteer = require('puppeteer');

async function scrapeWebsite(targetUrl) {
    const browser = await puppeteer.launch();
    const newPage = await browser.newPage();
    await newPage.goto(targetUrl);
    
    const [element] = await newPage.$x('//div[@class="main-header"]/h1/span');
    const property = await element.getProperty('textContent');
    const result = (await property).jsonValue();
    
    console.log({result});
    
    await browser.close();
}

scrapeWebsite('https://example-site.com/page');

When I execute this script, the output shows:

{ result: Promise { 'My Title Text' } }

I want to extract just the string value ‘My Title Text’ from this Promise so I can use it in other parts of my code. How can I properly resolve this Promise to get the actual text content?

[emmat83]

yeah, you’re double-wrapping promises. when you do (await property).jsonValue() you’re not awaiting the jsonValue part. try const result = await property.jsonValue(); without the extra parentheses. for xpath stuff like this, i usually just do const result = await newPage.evaluate(() => document.evaluate('//div[@class="main-header"]/h1/span', document).iterateNext().textContent); which skips all the getProperty mess.

[OwenNebula55]

You’re getting a nested Promise because you’re awaiting property instead of calling jsonValue() on it. The problem is this line: const result = (await property).jsonValue(); - you need to await the jsonValue() method itself. Change it to: const result = await property.jsonValue(); This’ll give you the actual string value instead of a Promise wrapper. I hit the same issue when I started with Puppeteer. getProperty() returns a JSHandle, and jsonValue() returns a Promise that resolves to the actual value, so you gotta await the jsonValue() call.

[John_Clever]

The problem’s your parentheses around the await. You’re doing (await property).jsonValue() which resolves the property first, then calls jsonValue - but jsonValue also returns a Promise that needs awaiting. Just remove the parentheses and await the whole jsonValue call: const result = await property.jsonValue();. Hit this exact issue last month scraping product titles. You could also use $eval which handles Promise resolution automatically: const result = await newPage.$eval('xpath_selector', el => el.textContent); - though you’d need to convert your xpath to CSS selector. Remember: both getProperty and jsonValue return Promises, so you need to await both operations.