Puppeteer how to click the child element of 'next sibling'

Question

I want to select and click the specified <a> of next sibling, html code below:

<ul>
  <li>
    <a></a>
  </li>
  <li>
    <a></a>
  </li>
  <li class='abc'>
    <a></a>
  </li>
  <li>
    <a></a> <!-- I want to click this link -->
  </li>
</ul>

the <ul> is changing, but the <li class='abc'> is changeless

and use the code below:

    let tag = await page.evaluate(() => {
        return document.querySelector('li.abc').nextSibling.a
    })

    console.log(tag?'Y': 'N')
    // await page.click(tag)

then it output 'N'

Can someone help me fix this error？ Thanks in advance!

Now it solved use `page.click('.abc + li > a');` Thanks Dave Batiste(user of puppeteer.slack.com) — marslord, Jun 05 '19 at 02:26
Hi @marslord, can you please help me with the below issue https://stackoverflow.com/questions/69648540/how-to-navigate-to-following-sibling-in-puppeteer — Explorer, Oct 21 '21 at 13:52

score 4 · Answer 1 · answered Jun 05 '19 at 02:52

Got this answer from Dave Batiste（user of puppeteer.slack.com),

Thanks to @Vaviloff point that: I should post this answer.

Use the code page.click('.abc + li > a') can click the specified <a> that I want to, and Dave Batiste(user of puppeteer.slack.com) give more info as below:

If you do want a handle that you can call methods on, I think you'd be interested in > page.$...
const handle = await page.$(selector);
handle.click(options);

Puppeteer how to click the child element of 'next sibling'

1 Answers1