How to select a parent element in Puppeteer?

Other Questions Puppeteer
1

I’m working on a Puppeteer project and I’m stuck. I need to click on a specific odds value based on the team name. But here’s the tricky part: these elements are nested inside a parent container that I can only identify by its text content.

The page has multiple identical structures, so I can’t use class names to target them. My goal is to:

  1. Find a container with the text “1st Goal”
  2. Get its parent element
  3. Within that parent, locate the second div (with class “parent2”)
  4. Find and click on a specific odds value (like 200) inside that div

I’ve tried using parentElement and parentNode, but I keep getting ‘undefined’ when trying to access the parent. The child element is found correctly, but I can’t seem to navigate up the tree.

Here’s a simplified version of the HTML structure I’m dealing with:

<div class="group">
  <div class="parent1"><span>1st Goal</span></div>
  <div class="parent2">
    <div class="container">
      <div>
        <div><span>TeamA</span><span class="odds">200</span></div>
        <div><span>No 1st Goal</span><span class="odds">300</span></div>
        <div><span>TeamB</span><span class="odds">400</span></div>
      </div>
    </div>
  </div>
</div>

Any ideas on how to solve this parent-child navigation issue in Puppeteer?

2

I’ve been in your shoes, and I know how frustrating it can be to navigate complex DOM structures with Puppeteer. Here’s a trick that’s worked wonders for me:

Instead of trying to navigate up and down the DOM tree, use XPath. It’s incredibly powerful for these kinds of scenarios. You can craft an XPath query that pinpoints exactly what you need in one go. Here’s how I’d approach your specific problem:

const [oddsElement] = await page.$x('//span[text()=\"1st Goal\"]/ancestor::div[contains(@class, \"group\")]//div[contains(@class, \"parent2\")]//span[@class=\"odds\" and text()=\"200\"]');

if (oddsElement) {
    await oddsElement.click();
} else {
    console.log('Element not found');
}

This XPath query starts from the ‘1st Goal’ text, goes up to find the ‘group’ div, then drills down to the ‘parent2’ div and finally locates the odds span with the value ‘200’. It’s like a surgical strike, getting exactly what you need in one fell swoop. Give it a shot!

3

I’ve encountered similar challenges with Puppeteer before. Here’s a solution that should work for your scenario:

First, use page.evaluate() to find the element containing ‘1st Goal’. Then, within that same function, traverse up to the parent and locate the specific odds element you need.

Here’s a code snippet to illustrate:

await page.evaluate(() => {
  const targetElement = Array.from(document.querySelectorAll('span'))
    .find(el => el.textContent.includes('1st Goal'));
  if (targetElement) {
    const parentGroup = targetElement.closest('.group');
    const oddsElement = parentGroup.querySelector('.parent2 .odds');
    if (oddsElement && oddsElement.textContent === '200') {
      oddsElement.click();
    }
  }
});

This approach avoids the limitations of Puppeteer’s element handle API by performing the DOM traversal directly in the page context. It should reliably select and click the desired element based on your described structure.