Puppeteer 无法识别只有类型和 class 的选择器，但可以接受完整的选择器

Question

我试图点击网页上的 cookiewall，但 Puppeteer 拒绝识别只有类型和 class 选择器 (button.button-action) 的短选择器。将其更改为完整的 CSS 选择器可以解决问题，但不是可行的解决方案，因为父元素中的任何机会都可能破坏选择器。据我所知，这应该不是问题，因为在有问题的页面上使用 document.querySelector("button.button-action") 也 returns 我试图点击的元素。

无效的代码：

const puppeteer = require('puppeteer');

const main = async () => {
    const browser = await puppeteer.launch({headless: false,});
    const page = await browser.newPage();
    await page.goto("https://www.euclaim.nl/check-uw-vlucht#/problem", { waitUntil: 'networkidle2' });
    const cookiewall = await page.waitForSelector("button.button-action", {visible: true});
    await cookiewall.click();
};

main();

有效的代码：

const puppeteer = require('puppeteer');

const main = async () => {
    const browser = await puppeteer.launch({headless: false,});
    const page = await browser.newPage();
    await page.goto("https://www.euclaim.nl/check-uw-vlucht#/problem", { waitUntil: 'networkidle2' });
    const cookiewall = await page.waitForSelector("#InfoPopupContainer > div.ipBody > div > div > div.row.actionButtonContainer.mobileText > button", {visible: true});
    await cookiewall.click();
};

main();

Answer 1

问题是那里有三个 button.button-action。并且第一场比赛不可见。

你可以做的一件事是 waitForSelector 但没有可见位（因为它会检查第一个按钮）。然后遍历所有项目，检查哪个项目是可点击的。

await page.waitForSelector("button.button-action");
const actions = await page.$$("button.button-action");
for(let action of actions) {
  if(await action.boundingBox()){
    await action.click();
    break;
  }
}

Puppeteer 无法识别只有类型和 class 的选择器，但可以接受完整的选择器

Puppeteer doesn't recognize selector with just type and class but accepts full selector

css-selectors

chromium

node.js

puppeteer