puppeteer - 如何在 puppeteer js 中选择具有多个类名和特定 aria-label 的按钮？

Question

我试图点击这个按钮，但我总是失败，因为还有另一个按钮具有相同的类名，但 aria-name 不同，或者我只是错误地点击了它。

<button aria-label="upvote" aria-pressed="false" class="voteButton _2m5vzALl8kQdr9kwIFUo5t" data-click-id="upvote"><span class="_3wVayy5JvIMI67DheMYra2 _3SUsITjKNQ7Tp0Wi2jGxIM _22nWXKAY6OzAfK5GcUqWV2 qW0l8Af61EP35WIG6vnGk _3edNsMs0PNfyQYofMNVhsG"><i class="icon icon-upvote _2Jxk822qXs4DaXwsN7yyHA _39UOLMgvssWenwbRxz_iEn"></i></span></button>

我的代码现在看起来像这样:

  await page.waitForSelector('.voteButton._2m5vzALl8kQdr9kwIFUo5t');
  await page.click('.voteButton._2m5vzALl8kQdr9kwIFUo5t');

如何单击专门用于 aria-label 或 data-click-id 的元素？

Answer 1

您必须独立于哈希名称，如 _3wVayy5JvIMI67DheMYra2此名称将在重建后更改

你需要为你的情况使用一些固定的类，比如'按钮[class~="voteButton"]'

在运行 puppeteer 之前，不要忘记在 console 页面上检查您的选择器:

document.querySelector('button[class~="voteButton"]');

然后你可以运行 puppeteer:

await page.waitForSelector('button[class~="voteButton"]');
await page.click('button[class~="voteButton"]');