Кукловод не распознает селектор только с типом и классом, но принимает полный селектор

Question

Я пытаюсь кликнуть на Cookiewall на веб-странице, но Puppeteer отказывается распознавать короткий селектор только с помощью селектора типа и класса (button.button-action). Изменение этого параметра на полный селектор CSS устраняет проблему, но не является жизнеспособным решением, поскольку любой шанс в родительских элементах может сломать селектор. Насколько я знаю, это не должно быть проблемой, потому что на рассматриваемой странице использование document.querySelector("button.button-action") также возвращает элемент, который я пытаюсь щелкнуть.

Код, который не работает:

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;
  }
}