使用puppeteer中的CSS选择器单击元素

Question

我想在puppeteer上使用css选择器点击一个对象，我使用的是设备模拟器(iphoneX(。

我有以下两个css选择器，用于相同的对象，

div:nth-of-type(1) > .canvasContentDiv.container_1vt1y2p > div > div:nth-of-type(4) .react-knockout-control > div

和

[aria-labelledby='pa-gallery-label-1'] [data-control-id='24'] [touch-action]

有什么帮助吗？试过以下两种方法，但都没用？

方法1:

const elementHandle = await page.evaluate(() => { const element = document.querySelector("[aria-labelledby='pa-gallery-label-1'] [data-control-id='24'] [touch-action]"); });
await page.waitFor(500);
elementHandle.click();

方法2:

await page.click("[aria-labelledby='pa-gallery-label-1'] [data-control-id='24'] [touch-action]");

Answer 1

尝试以这种方式获取句柄，以检测您的查询在运行时是否正常工作：

const query = "[aria-labelledby='pa-gallery-label-1'] [data-control-id='24'] [touch-action]";
const element = await this.page.$(query);
if (element) {
await element.click();
console.log('element clicked');
}
else {
console.log('element not found');
}

如果找到并单击了元素，那么我建议您在可见模式{headless: false}下运行浏览器，在附带调试器的VS code中运行代码，并在单击后暂停执行。这将允许你在它启动的Chromium实例中打开DevTools，你可以检查控制台中发生的事情。