How to get text from xPath in Puppeteer node js

Question

I need to get a text from the span tag and to verify whether the text equals to "check".

How can I achieve this in puppeteer?

Below is the example of the code I've written, if anyone could put me help me figure this out, please.

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    // "slowMo": 50,
    args: ["--start-fullscreen"],
    defaultViewport: null,
  });
  //Page
  const page2 = await browser.newPage();

  await page2.goto("https://www.flipkart.com");
  await page2.waitFor(2000);
  await page2.$x("//input[@class='_2zrpKA _1dBPDZ']").then(async (ele) => {
    await ele[0].type(username);
  });
  await page2.waitFor(2000);
  await page2.$x("//input[@type='password']").then(async (ele) => {
    await ele[0].type(password);
  });
  await page2.waitFor(2000);
  await page2
    .$x("//button[@class='_2AkmmA _1LctnI _7UHT_c']")
    .then(async (ele) => {
      await ele[0].click();
    });
  await page2.waitFor(2000);
  await page2.$x("//input[@class='LM6RPg']").then(async (ele) => {
    await ele[0].type("iPhone 11");
  });
  await page2.waitFor(2000);
  await page2.$x("//button[@class='vh79eN']").then(async (ele) => {
    await ele[0].click();
  });
  await page2.waitFor(2000);
  await page2.$x("//div[@class='col col-7-12']/div").then(async (ele) => {
    await ele[0].click();
  });
  await page2.waitFor(2000);
  let [element] = await page2.$x('//span[@class="_2aK_gu"]');
  let text = await page2.evaluate((element) => element.textContent, element);
  if (text.includes("Check")) {
    console.log("Check Present");
  }
  if (text.includes("Change")) {
    console.log("Change Present");
  }
})();

Answer 1

//get the xpath of the webelement

const [getXpath] = await page.$x('//div[]');

//get the text using innerText from that webelement

const getMsg = await page.evaluate(name => name.innerText, getXpath);

//Log the message on screen

console.log(getMsg)

Answer 2

You can get the text form the selected element like this:

await page.goto(url, {waitUntil: "networkidle2"});
await page.waitForXPath('//span[@class="_2aK_gu"]');
//assuming it's the first element
let [element] = await page.$x('//span[@class="_2aK_gu"]');
let text = await page.evaluate(element => element.textContent, element);

Note that page.$x returns an array of ElementHandles, so the code here assumes it's the first element. I'd suggest you chose a more specific XPath than a class as many elements may have it.

---

For the condition:

if (text.includes("Check"))
    //do this
else if (text.includes("Change"))
    //do that

Answer 3

Here is the complete code for getting div or any html element data using xpath....

const puppeteer = require("puppeteer");

async function scrape () {

    const browser = await puppeteer.launch({headless: false});
    const page =  await browser.newPage();
    await page.goto("https://twitter.com/elonmusk", {waitUntil: "networkidle2"})
    await page.waitForXPath('/html/body/div[1]/div/div/div[2]/main/div/div/div/div/div/div[2]/div/div/section/div/div/div[1]/div/div/article/div/div/div/div[2]/div[2]/div[1]/div/div/div[1]/div[1]/div/div[1]/a/div/div[1]/span/span');

    let [el] = await page.$x('/html/body/div[1]/div/div/div[2]/main/div/div/div/div/div/div[2]/div/div/section/div/div/div[1]/div/div/article/div/div/div/div[2]/div[2]/div[1]/div/div/div[1]/div[1]/div/div[1]/a/div/div[1]/span/span');

    // console.log()

    const names = await page.evaluate(name => name.innerText, el);
    console.log(names);


    await browser.close();
};

scrape();