Using Puppeteer in Javascript to locate text on a webpage

Question

Using Puppeteer in Javascript to locate text on a webpage

I am currently exploring ways to utilize Puppeteer for searching an HTML page for a specific product name.

Just to give you an idea, the HTML code looks something like this:

<a class="example" href = "example_link">PRODUCT NAME</a>

My goal with Puppeteer is to locate the PRODUCT NAME either through relevant keywords or the exact name itself, and then instruct it to click on the text which will in turn redirect the browser to the corresponding href link.

Your assistance with this matter would be highly appreciated!

Thank you so much.

javascript puppeteer webautomation

Answer 1

Answer №1

It seems like you are looking to locate a link based on its text content for clicking purposes. Here are a couple of approaches you can take:

const puppeteer = require('puppeteer');

(async function main() {
  try {
    const browser = await puppeteer.launch({ headless: false, defaultViewport: null });
    const [page] = await browser.pages();

    const textToFind = 'More information...';

    // Method 1.

    await page.goto('https://example.org/');

    const link1 = await page.evaluateHandle(
      text => [...document.querySelectorAll('a')].find(a => a.innerText === text),
      textToFind
    );
    await link1.click();
    await page.waitFor(3000);

    // Method 2.

    await page.goto('https://example.org/');

    const [link2] = await page.$x(`//a[text()="${textToFind}"]`);
    await link2.click();
    await page.waitFor(3000);

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

If you need to find a partial match, consider using includes() in place of === for the first method and utilize the XPath contains() function for the second method.

Answer 2

It seems like you are looking to locate a link based on its text content for clicking purposes. Here are a couple of approaches you can take:

const puppeteer = require('puppeteer');

(async function main() {
  try {
    const browser = await puppeteer.launch({ headless: false, defaultViewport: null });
    const [page] = await browser.pages();

    const textToFind = 'More information...';

    // Method 1.

    await page.goto('https://example.org/');

    const link1 = await page.evaluateHandle(
      text => [...document.querySelectorAll('a')].find(a => a.innerText === text),
      textToFind
    );
    await link1.click();
    await page.waitFor(3000);

    // Method 2.

    await page.goto('https://example.org/');

    const [link2] = await page.$x(`//a[text()="${textToFind}"]`);
    await link2.click();
    await page.waitFor(3000);

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

If you need to find a partial match, consider using includes() in place of === for the first method and utilize the XPath contains() function for the second method.

Using Puppeteer in Javascript to locate text on a webpage

Answer №1

Similar questions

Issue with Videogular: hh:mm:ss Date filter not functioning properly

Is there a way to automate clicking a button when an ajax request is successful through programming?

What is the best way to locate and send a message to a particular channel within a server?

Attempting to access a shared php/javascript library using mod_rewrite

Handling versioning when a property is deprecated in semver

AngularJS - directive template is not being compiled correctly

Preserve and recover the dynamic form value following an AJAX update

Is it possible to achieve seamless image transitions in Firefox like it does in Chrome?

Implementing conditional logic using v-if and v-else statements

What could be causing the issue of req.body being undefined within the destination function of Multer's diskStorage?

typescript: define the type of an object that behaves like a map

Hide <a> by setting its display property to none

Performing an Angular JS $http post request with URL parameters included in the GET request

Calculating the sum of table columns with the help of knockout.js

Problem encountered when utilizing map() function - it returns undefined

Occasionally I encounter the message: "Error: Server unexpectedly terminated with status 1."

Incorporating DefinitelyTyped files into an Angular 2 project: A step-by-step guide

Activate Bootstrap - navigate to a specific tab and scroll to a designated anchor upon link click

Express server is receiving undefined post parameters from Axios in Vue, even though they are clearly defined in Vue

Designing a login system with MEAN stack architecture?