Puppeteer: Navigating Through Descendants to Click on Elements with Specific Values

Question

Puppeteer: Navigating Through Descendants to Click on Elements with Specific Values

Recently I started using Puppeteer and encountered an issue while trying to click on a specific element. The code snippet in question is:

await page.waitForSelector('.item-table > .grid-item > .grid-item-container > .grid-table-container > .grid-option-table:nth-child(1) > .grid-option:nth-child(1) > .grid-option-selectable > div');
await page.click('.item-table > .grid-item > .grid-item-container > .grid-table-container > .grid-option-table:nth-child(1) > .grid-option:nth-child(1) > .grid-option-selectable > div');

Given that there are multiple .item-table elements on the page, I am looking for a way to click on one that contains a specific text within its descendants, without knowing the exact level of the descendant. However, my attempts to solve this puzzle by adding > :contains("Foo bar") have been unsuccessful so far.

await page.waitForSelector('.item-table > :contains("Foo Bar") > .grid-item > .grid-item-container > .grid-table-container > .grid-option-table:nth-child(1) > .grid-option:nth-child(1) > .grid-option-selectable > div');
await page.click('.item-table > :contains("Foo Bar") > .grid-item-container > .grid-table-container > .grid-option-table:nth-child(1) > .grid-option:nth-child(1) > .grid-option-selectable > div');

If you have any insights or solutions on how to achieve this with Puppeteer, I would greatly appreciate it!

UPDATE: Below is the HTML structure I'm trying to scrape:

<div class="item-table"></div>
<div class="item-table"></div>
<div class="item-table"></div>
<div class="item-table"></div>
<div class="item-table"></div>
<div class="item-table"></div>
<div class="item-table">
    <div class="grid-item">
        <div class="grid-item-container">
            <div class="grid-table-container>
                <div class="grid-option-header">
                    <div class="grid-option-caption">
                        <div class="grid-option-name">
                            Foo Bar
                            <span>some other text</span>
                        </div>
                    </div>
                </div>
                <div class="grid-option-table">
                    <div class="grid-option">
                        <div class="grid-option-selectable">
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="item-table"></div>
<div class="item-table"></div>

To clarify, I need to click on a div within the grid-option-selectable div, located inside an item-table div that includes the text "Foo Bar" among its descendants.

javascript puppeteer selector

Answer 1

Answer №1

I will be making a small tweak to your markup in order to ensure that the code is functioning properly:

<!-- ... same ... -->
<div class="grid-option-selectable">
    <div>You caught me!</div>
</div>
<!-- ... same ... -->

It might be beneficial to add some similar-structured elements with different text content to validate that we are not encountering false positives.

The technique we are going to employ is outlined in this response (this answer within the same discussion offers alternatives and this separate conversation is relevant): using xpath to query the common parent between the target text and clickable element based on descendant text, then searching for the clickable element within that parent.

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch(/*{dumpio: true}*/);
  const page = await browser.newPage();
  await page.goto("http://localhost:8000");
  const xp = `
    //div[@class="item-table" 
          and descendant::*[contains(text(), "Foo Bar")]]
    //div[@class="grid-option-selectable"]
  `;
  const [el] = await page.$x(xp);
  console.log(await el.evaluate(el => el.innerText));
  await el.click();
  await browser.close();
})();

Output:

You caught me!

Please note that I am utilizing an exact class match, but in case your target element has multiple classes, you may need to adjust your query using contains. In that scenario, your xpath expression would look like this:

//div[contains(@class, "item-table")
      and .//*[contains(text(), "Foo Bar")]]
//div[contains(@class, "grid-option-selectable")]

Since the posting of this answer, page.$x has been deprecated from the library. Refer to How can I get an element by xpath? for more information.

Answer 2

I will be making a small tweak to your markup in order to ensure that the code is functioning properly:

<!-- ... same ... -->
<div class="grid-option-selectable">
    <div>You caught me!</div>
</div>
<!-- ... same ... -->

It might be beneficial to add some similar-structured elements with different text content to validate that we are not encountering false positives.

The technique we are going to employ is outlined in this response (this answer within the same discussion offers alternatives and this separate conversation is relevant): using xpath to query the common parent between the target text and clickable element based on descendant text, then searching for the clickable element within that parent.

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch(/*{dumpio: true}*/);
  const page = await browser.newPage();
  await page.goto("http://localhost:8000");
  const xp = `
    //div[@class="item-table" 
          and descendant::*[contains(text(), "Foo Bar")]]
    //div[@class="grid-option-selectable"]
  `;
  const [el] = await page.$x(xp);
  console.log(await el.evaluate(el => el.innerText));
  await el.click();
  await browser.close();
})();

Output:

You caught me!

Please note that I am utilizing an exact class match, but in case your target element has multiple classes, you may need to adjust your query using contains. In that scenario, your xpath expression would look like this:

//div[contains(@class, "item-table")
      and .//*[contains(text(), "Foo Bar")]]
//div[contains(@class, "grid-option-selectable")]

Since the posting of this answer, page.$x has been deprecated from the library. Refer to How can I get an element by xpath? for more information.

Puppeteer: Navigating Through Descendants to Click on Elements with Specific Values

Answer №1

Similar questions

Incorporating Vuetify into a Vue CLI application with the help of webpack

Exporting JavaScript formatting in Netbeans is a breeze

What steps are involved in creating a default toolbar for a material picker in a React application?

Uncovering the Android tablet browser: A guide

Issue: "TypeError: Unable to retrieve dynamically imported module" encountered while utilizing dynamic imports in Remix application

JS form validation malfunctioning

What is causing the backslash character to be removed from my ajax request?

PHP: Avoiding duplicate JavaScript imports

An error occurred: an unexpected identifier was found when trying to import axios using './lib/axios.js' and require('axios')

Aligning divs, prevent duplicate HTML within multiple divs

Why is my md-button in Angular Material displaying as full-width?

Guide to integrating animations into a React JS array sorting program

Problem with Chrome Compatibility for Bootstrap Carousel

What is the way to create the appearance of a hand or arrow hovering over my "X" while I am closing out my Div using jQuery?

Guide to creating a secure login page with the help of cookies

Can an internal/private function call a public function?

"Exploring the Method of Inheriting from a BaseComponent in Angular 2

Is it possible to selectively export certain interfaces within a .d.ts file?

Top solution for efficiently capturing and storing user input in a React JS application: Event Handler

Navigating the realm of JavaScript and managing the uncertainties of floating point precision