点击事件触发时什么都不做 [英] Click event does nothing when triggered

问题描述

当我在 puppeteer 的非无头模式下触发 .click() 事件时，没有任何反应，甚至没有错误......非无头模式，所以我可以直观地监控正在发生的事情点击

When I trigger a .click() event in a non-headless mode in puppeteer, nothing happens, not even an error.. "non-headless mode so i could visually monitor what is being clicked"

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

我希望它点击指定的按钮并在页面上加载一些动态数据.

I expect it to click the specified button and load in some dynamic data on the page.

在 Chrome 的控制台中，我收到错误

In Chrome's console, I get the error

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,"} ))

推荐答案

问题

通过执行像 element.click()(在页面上下文中)或 element.value = '..' 之类的代码来表现非人类(有关类似问题，请参阅此答案)对于 Angular 应用程序似乎存在问题.您想尝试通过使用诸如 page.click() 之类的 puppeteer 函数来表现得更像人类，因为它们模拟真正的"鼠标点击，而不是仅仅触发元素的点击活动.

Problem

Behaving non-human-like by executing code like element.click() (inside the page context) or element.value = '..' (see this answer for a similar problem) seems to be problematic for Angular applications. You want to try to behave more human-like by using puppeteer functions like page.click() as they simulate a "real" mouse click instead of just triggering the element's click event.

此外，每当单击其中一项时，页面似乎都会重建页面的某些部分.因此，每次点击后都需要再次执行选择器.

In addition the page seems to rebuild parts of the page whenever one of the items is clicked. Therefore, you need to execute the selector again after each click.

要表现得更人性化并在每次点击后重新查询元素，您可以将代码的后半部分更改为如下所示:

To behave more human-like and requery the elements after each click you can change the latter part of your code to something like this:

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元素的变化.

This code uses an XPath expression to query the div elements which contain another div element with the given text. After that, a click is simulated on the element and then the contents of the page are queried another time to respect the change of the DOM elements.

这篇关于点击事件触发时什么都不做的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！