Puppeteer page.click CSS selector not working

Question

I currently have this two input tags in my DOM

1. <input class="select2-search__field form-control">

2. <input class="select2-search__field form-control">

As you can notice, they're the exact same input tag with the same classes

However, I'm able to select the first one, but not the second one using page.click()

I tried doing something like the examples below:

await page.click("ul.select2-selection__rendered:nth-of-type(2)>li>input");

Also:

await page.click("ul.select2-selection__rendered>li>input")[1];

But none of these work.

In the Chrome Dev Tools console I used just to make sure document.querySelectorAll("ul.select2-selection__rendered>li>input") that I was targeting the right elements, and it worked just fine, the output was an array of two input elements.

Answer 1

You could get first the elements (which will be ElementHandle s) and then call the click function.

var links = await page.$$('ul.select2-selection__rendered>li>input');
await links[1].click();