Skip to content
Advertisement

Node JS Puppeteer click on a li element without name or id

I’m trying to click on a li element which for some reason works as a size selector on a certain website. It looks like this

size selector

And its html looks like this

enter image description here

Each <li> represents one size option, I’ve tried some stuff but none of it works.

my first attempt was using xpath:

JavaScript

I also tried a regular click action:

JavaScript

None of this worked, and I’m wondering if it is even possible to click on such a element with puppeteer…

If anyone would like to examine the page, the link is here

Advertisement

Answer

This is a bit tricky. Your selector is working OK, as is the click event, but I suspect that event does nothing but call e.preventDefault() to prevent navigation to the anchor’s href.

The highlight showing the size was selected is actually applied by a mousedown event in the <a>‘s parent <li>, and it seems the child event hasn’t been applied or doesn’t bubble using your .click method:

image showing browser console element tree with the li element's mousedown event circled to indicate it's the important event OP wants to trigger

You can trigger this as follows:

JavaScript

The final timeout gives you a chance to look at the page and see that size 8.5 was highlighted.

Note that I’ve made your xpath selector more precise to avoid false positives.

User contributions licensed under: CC BY-SA
2 People found this is helpful
Advertisement