如何在 ul / puppeteer 中点击 li

Question

I'm new to the puppeteer. I wonder, how to click li elements in puppeteer? I do this code. but it doesn't work.

 await page.click('#currentSearchByTop') await page.click('#ul.sl_general:last-child(2)')

enter image description here

Answer 1

your first click's CSS selector is correct, but the one you are using in the 2nd is not:

await page.click('#ul.sl_general:last-child(2)') // invalid and mismatched selector

• do not put # in front of the ul , it is valid in itself

• the <ul> 's id is "sl_general" so you should put a # in front of it (and not a . ).

• also :last-child(2) is not a valid pseudo-class in CSS, you wanted to use :nth-last-child(2) or simply :last-child

await page.click('ul#sl_general:nth-last-child(2)') // valid selector

I recommend reading more about selectors on MDN .

to answer in general you can compose your selector like this to click specific li within ul element, by using its index:

const lis = await page.$$('ul#sl_general li') // all <li> element handles within the ul
await lis[0].click()
// OR
await lis[2].click()

---

did you know? if you right-click on an element in Chrome DevTools "Elements" tab and you can select "Copy": there you are able to copy the exact CSS selector or XPath of an element. after that, you can switch to the "Console" tab and with the Chrome API you are able to test the selector's content, so you can prepare it for your puppeteer script. Eg: $("ul#sl_general:nth-last-child(2)").href should show the link that you expected to click on, otherwise you need to change on the access, or you need to check if there are more elements with the same selector, etc. this may help to find more appropriate selectors.