时间戳

首页 > 解决方案 > 点击事件触发时什么都不做

node.js - 点击事件触发时什么都不做

问题描述

当我在 puppeteer 中以非无头模式触发.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,"} ))

标签： node.jsweb-scrapingpuppeteer

解决方案

问题

通过执行代码（在页面上下文中）或（参见类似问题的答案）来表现非人类的行为对于 Angular 应用程序来说似乎是有问题的。您想尝试通过使用 puppeteer 函数来表现得更像人类，因为它们模拟“真实”鼠标点击，而不是仅仅触发元素的点击事件。element.click()element.value = '..'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 元素的变化。

推荐阅读