CODEWITHSUNDEEP
puppeteerplaywright
Justin Young
Justin Young

Reputation: 2463

How to select inner text of cousin using puppeteer

I'm trying to get the phone number based on a string value of a cousin.

My goal is to search for "Owner" and end up with the value of the phone number.

<div>
    <h3>
        <a href="#">Owner</a>
    </h3>
    <p>
        (555) 555-5555
    </p>
</div>

Here's what I have so far, but I keep getting undefined. Can you explain what I'm doing wrong?

console.log(await this.page.$("//h3[contains(a, 'Owner')]/../p").innerText);

Upvotes: 0

Views: 789

Answers (1)

vsemozhebuty
vsemozhebuty

Reputation: 13812

There are some issues:

  1. page.$() needs a CSS selector, not an XPath.
  2. page.$x() will return an array with ElementHandle-s.
  3. ElementHandle-s have not the same properties as a DOM elements, we need to use more complicated API to get them.
  4. I could not make puppeteer create an a element with '#' href, only with full URL, but this may be a test case issue.

This is what works for me:

const html = `
  <!doctype html>
  <html>
    <head><meta charset='UTF-8'><title>Test</title></head>
    <body>
      <div>
          <h3>
              <a href="http://example.com/">Owner</a>
          </h3>
          <p>
              (555) 555-5555
          </p>
      </div>
    </body>
  </html>`;

const puppeteer = require('puppeteer');

(async function main() {
  try {
    const browser = await puppeteer.launch();
    const [page] = await browser.pages();

    await page.goto(`data:text/html,${html}`);

    const data = await (
      await (
        await page.$x("//h3[contains(a, 'Owner')]/../p")
      )[0].getProperty('innerText')
    ).jsonValue();
    console.log(data);

    await browser.close();
  } catch (err) {
    console.error(err);
  }
})();

Upvotes: 2

Related Questions