How can I retrieve an XPath value using Puppeteer?

Other Questions Puppeteer
1

I need assistance in extracting a specific value from an XPath that reads 1,400 using Puppeteer. I can’t utilize span or label class names because there are several elements with the same class or label. Therefore, I want to focus on the XPath instead. What are my options?

Here’s the HTML segment:

<span class="currency-coins value">1,400</span>

And the full XPath is:

/html/body/main/section/section/div[2]/div/div/section[2]/div[2]/section/div[2]/ul/li[1]/div/div[2]/div[3]/span[2]/text()

Any tips would be greatly appreciated!

2

You can retrieve XPath values in Puppeteer using page.$x() paired with evaluate(). To extract the value, use the following approach:

const elements = await page.$x('/html/body/main/section/section/div[2]/div/div/section[2]/div[2]/section/div[2]/ul/li[1]/div/div[2]/div[3]/span[2]');
const value = await page.evaluate(el => el.textContent, elements[0]);
console.log(value); // This will log: 1,400

Ensure to omit /text() in your XPath since $x() works with element selectors, not text nodes. You can access the text using textContent. Also, validate that elements[0] is defined to avoid errors when the element isn’t found.

3

I usually use page.waitForXPath() first to make sure the element exists before grabbing the value. Prevents timing issues with dynamic content:

const xpath = '/html/body/main/section/section/div[2]/div/div/section[2]/div[2]/section/div[2]/ul/li[1]/div/div[2]/div[3]/span[2]';
const elementHandle = await page.waitForXPath(xpath);
const textContent = await page.evaluate(element => element.textContent, elementHandle);

This waits for the element to show up in the DOM before trying to extract anything. Super helpful for SPAs or async content. Plus waitForXPath() throws an error if the element doesn’t appear within the timeout, so you get better error handling than just checking for empty arrays.

4

try page.$eval() with xpath - way easier than using evaluate. something like const text = await page.evaluate(() => document.evaluate('your-xpath-here', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue?.textContent) should do it. just handle cases where the xpath doesn’t find anything or you’ll get errors.