Событие клика ничего не делает при срабатывании

Question

Когда я запускаю событие .click() в режиме без головы в кукловоде, ничего не происходит, даже ошибка .. «Режим без головы, чтобы я мог визуально контролировать то, что нажимается»

const scraper = {
test: async () => {
        let browser, page;
        try {
            browser = await puppeteer.launch({
                headless: false,
                args: ["--no-sandbox", "--disable-setuid-sandbox"]
            });
            page = await browser.newPage();
        } catch (err) {
            console.log(err);
        }
        try {
            await page.goto("https://www.betking.com/sports/s/eventOdds/1-840-841-0-0,1-1107-1108-0-0,1-835-3775-0-0,", {
                waitUntil: "domcontentloaded"
            });
            console.log("scraping, wait...");
        } catch (err) {
            console.log(err);
        }
        console.log("waiting....");
        try {
            await page.waitFor('.eventsWrapper');
        } catch (err) {
            console.log(err, err.response);
        }

        try {
            let oddsListData = await page.evaluate(async () => {
                let regionAreaContainer = document.querySelectorAll('.areaContainer.region .regionGroup > .regionAreas > div:first-child > .area:nth-child(5)');
                regionAreaContainer = Array.prototype.slice.call(regionAreaContainer);
                let t = []; //Used to monitor the element being clicked
                regionAreaContainer.forEach(async (region) => {
                    let dat = await region.querySelector('div');
                    dat.innerHTML === "GG/NG" ? t.push(dat.innerHTML) : false; //Used to confirm that the right element is being clicked
                    dat.innerHTML === "GG/NG" ? dat.click() : false;
                })
                return t;
            })
            console.log(oddsListData);
        } catch (err) {
            console.log(err);
        }
    }
}

Я ожидаю, что он нажмет указанную кнопку и загрузит некоторые динамические данные на странице.

В консоли Chrome я получаю сообщение об ошибке

Transition Rejection($id: 1 type: 2, message: The transition has been superseded by a different transition, detail: Transition#3( 'sportsMultipleEvents'{"eventMarketIds":"1-840-841-0-0,1-1107-1108-0-0,1-835-3775-0-0,"} -> 'sportsMultipleEvents'{"eventMarketIds":"1-840-841-0-0,1-1107-1108-0-0,1-835-3775-535-14,"} ))

Answer 1

Проблема

Ведение не по-человечески путем выполнения кода, подобного element.click() (в контексте страницы) или element.value = '..' (см. этот ответ дляпохожая проблема), кажется, проблематично для приложений Angular.Вы хотите попытаться вести себя более по-человечески , используя функции кукловода, такие как page.click(), так как они имитируют «настоящий» щелчок мыши, а не просто вызывают событие нажатия элемента.

В дополнениекажется, что страница перестраивает части страницы при нажатии на один из элементов.Поэтому вам нужно снова запускать селектор после каждого клика.

Пример кода

Чтобы вести себя более человечно и запрашивать элементы после каждого клика, вы можете изменить последнюю часть своего кода начто-то вроде этого:

let list = await page.$x("//div[div/text() = 'GG/NG']");
for (let i = 0; i < list.length; i++) {
    await list[i].click();

    // give the page some time and then query the selectors again
    await page.waitFor(500);
    list = await page.$x("//div[div/text() = 'GG/NG']");
}

Этот код использует выражение XPath для запроса элементов div, которые содержат другой элемент div с заданным текстом.После этого имитируется щелчок элемента, а затем содержимое страницы запрашивается в другой раз, чтобы учесть изменение элементов DOM.

Answer 2

Здесь может быть менее запутанный способ щелкнуть те:

for(var div of document.querySelectorAll('div')){
  if(div.innerHTML === 'GG/NG') div.click()
}