Assistance needed to extract a value from XPath using Puppeteer

Other Questions Puppeteer
1

I need guidance on how to retrieve the value from a specific XPath which holds the value of 1,400. I’m unable to utilize span or label class names, as there are numerous classes with identical names. Therefore, I believe XPath is the right approach. What can you recommend?

HTML:

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

XPath Expression:

/html/body/main/content/section/container[2]/items/item[1]/details[3]/span[1]/text()
2

Hey Emma, you can use Puppeteer’s evaluate() function to retrieve the value easily using your XPath. Here’s a simple way to do it:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('your_page_url');
  
  const value = await page.evaluate(() => {
    const xpathResult = document.evaluate(
      '/html/body/main/content/section/container[2]/items/item[1]/details[3]/span[1]',
      document,
      null,
      XPathResult.STRING_TYPE,
      null
    );
    return xpathResult.stringValue;
  });
  
  console.log(value); // Logs "1,400"

  await browser.close();
})();

Make sure to replace 'your_page_url' with the actual URL of the page you're accessing. This should get the job done!

3

The approach suggested by CharlieLion22 is quite effective for retrieving a value using XPath in Puppeteer. However, let’s consider a slightly different method in case you need more control or want to handle additional elements:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  try {
    await page.goto('your_page_url');
    
    // Wait for the specific element to ensure it exists
    await page.waitForXPath('/html/body/main/content/section/container[2]/items/item[1]/details[3]/span[1]');

    // Use the Puppeteer's page.$x method which is ideal for handling multiple elements
    const [element] = await page.$x('/html/body/main/content/section/container[2]/items/item[1]/details[3]/span[1]');
    if (element) {
      const value = await page.evaluate(el => el.textContent, element);
      console.log(value); // Logs "1,400"
    } else {
      console.log('Element not found');
    }
  } catch (error) {
    console.error('Error fetching the value:', error);
  } finally {
    await browser.close();
  }
})();

This code utilizes page.waitForXPath() which ensures that the element is present in the DOM before trying to access it. It then retrieves the element using page.$x, which returns an array of elements matching the XPath expression. Using page.evaluate() on the returned element, you can extract the text content.

Ensure to replace 'your_page_url' with the actual URL. This method is especially useful if you anticipate the need to handle or inspect further elements.