Click event does nothing when triggered

问题

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.

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

回答1:

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.

Code sample

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']");
}

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.

回答2:

Here might be a less confusing way to click those:

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

来源：https://stackoverflow.com/questions/55910796/click-event-does-nothing-when-triggered

标签

node.js

web-scraping

Puppeteer