如何在 ul / puppeteer 中点击 li

Question

我是木偶师的新手。 我想知道，如何在 puppeteer 中点击 li 元素？ 我做这个代码。 但它不起作用。

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

enter image description here

Answer 1

您第一次点击的 CSS 选择器是正确的，但您在第二次使用的选择器不是：

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

• 不要把#放在ul前面，它本身是有效的

• <ul>的 id 是“sl_general”，所以你应该在它前面放一个# （而不是. ）。

• :last-child(2)也不是 CSS 中的有效伪类，您想使用:nth-last-child(2)或简单地使用:last-child

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

我建议在MDN上阅读有关选择器的更多信息。

一般来说，您可以像这样编写选择器来单击 ul 元素中的特定 li，方法是使用它的索引：

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

---

你可知道？ 如果您右键单击 Chrome DevTools“元素”选项卡中的元素，您可以 select“复制”：您可以复制确切的 CSS 选择器或元素的 ZB6454D498635710A189184A13BE。 之后，您可以切换到“控制台”选项卡，使用 Chrome API 可以测试选择器的内容，以便为您的 puppeteer 脚本准备它。 例如： $("ul#sl_general:nth-last-child(2)").href应该显示你希望点击的链接，否则你需要更改访问，或者你需要检查是否还有更多具有相同选择器的元素等。这可能有助于找到更合适的选择器。