无法使用 Puppeteer 在 HTML 元素上附加新的单击事件处理程序答案

【问题标题】：Unable to attach new click event handlers on HTML element using Puppeteer无法使用 Puppeteer 在 HTML 元素上附加新的单击事件处理程序
【发布时间】：2018-06-19 15:11:20
【问题描述】：

为什么在 VS Code 中手动点击调试会话时，锚点上的点击事件没有触发？

大致来说，这是我的目标：

在 headful Chrome
登录
访问linkedin.com/jobs
为页面上的所有链接附加点击事件处理程序
附加事件处理程序后暂停 node.js 执行
用鼠标手动单击链接以观察这个新事件处理程序的运行情况

在代码中，这就是我得到的

const puppeteer = require('puppeteer')
async function main() {
    const browser = await puppeteer.launch({ headless: false })
    const page = await browser.newPage();

    await page.goto('https://www.linkedin.com/');
    await login(page);
    await page.goto('https://www.linkedin.com/jobs/');
    await attachLinks(page);
    await page.screenshot({ path: "bla" })
    browser.close();
};

async function attachLinks(page) {
    const bodyHandle = await page.$('body');
    await page.evaluate( (body, numLinks=3) => {
        let anchors = Array.from( body.querySelectorAll("a") ).
            filter( (e, i) => i < numLinks );
        for(let i = 0; i < anchors.length; i++) {
            let a = anchors[i];
            console.log(`Binding for ${a.href}`);

            // This event does not trigger!!!!!
            a.addEventListener("click", e => { 
                console.log("some one clicked the link");
                e.preventDefault(); 
                e.stopPropagation(); 
                return false; 
            });
        };
    }, bodyHandle);
    await bodyHandle.dispose();
}

main();

然后使用 VS Code 和 node.js 调试支持，在附加了 <a> 标记的 onclick 事件之后，我在 await page.screenshot({ path: "bla" }) 线上放置了一个断点。在打开的浏览器中（因为 headless 设置为 false），当代码等待恢复时，我用鼠标单击了 <body> 中的 <a> 标签，期望看到“有人点击了链接” headful 调试 Chrome 浏览器的控制台。但我在浏览器或 VS Code 的调试控制台中都没有看到日志。我在这里遗漏了什么吗？

【问题讨论】：

您希望控制台在哪里呈现？
澄清一下，您是否在浏览器的 DevTools 控制台中查看这些日志？还是 VSCode 中的调试控制台？
是的，在 headful 浏览器的控制台中，attachLinks 函数向它们添加了 onClick 事件处理程序。我也仔细检查了 VS Code 调试控制台。那里也没有。

标签： javascript puppeteer

【解决方案1】：

那是因为您实际上并没有单击锚标记。您已将一个事件附加到它“单击”并定义了当我们单击它时会发生什么，但您实际上并没有单击它。只需添加a.click() 喜欢

       // This event will now trigger
        a.addEventListener("click", e => { 
            console.log("some one clicked the link");
            e.preventDefault(); 
            e.stopPropagation(); 
            return false; 
        });

        a.click();

查看名称addEventListener，您正在附加一个事件侦听器，而不是实际单击它

【讨论】：

感谢 Tripti。但我的目标是在调试会话期间手动单击（而不是通过代码），如代码后的问题中所述:)
@Nitin 对此感到抱歉。尝试将await page.waitFor(2*1000); 放在await page.goto('https://www.linkedin.com/jobs/'); 行之后
您也可以使用await page.waitForNavigation(); 代替waitFor()。整个想法是在触发另一个事件之前稍微等待页面加载
感谢 Tripti 的所有重要提示。我的问题是无法停止浏览器，在这种情况下，waitFor 变体会有所帮助。使用 VS Code 的调试器，我在附加链接后通过在await page.screenshot({ path: "bla" }) 放置断点暂停了浏览器。在等待恢复时，我手动单击页面上的链接，但我没有看到来自单击事件处理程序的控制台语句暗示它们未附加
是的，但是我的建议还是一样。为什么我这么说是因为在 goto 之后不使用 waitFor 暂停，变量 bodyHandle 保持为空，因为没有附加链接。所以我将发表最后一条评论，您是否在代码中使用了 waitFor，然后在 VS 代码中对其进行了调试？如果是，它仍然给出相同的结果吗？如果再次是，那么我会在这里停下来，因为我无法在这方面提供帮助:) @Nitin