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

为什么在VS代码的调试会话中手动单击时不会触发锚上的点击事件

大体上，我的目标是：

• 在headfulChrome中使用木偶师进入linkedin.com
• 登录
• 访问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();

const puppeter=require（'puppeter'）
异步函数main（）{
const browser=wait puppeter.launch（{headless:false}）
const page=wait browser.newPage（）；
等待页面。转到（'https://www.linkedin.com/');
等待登录（第页）；
等待页面。转到（'https://www.linkedin.com/jobs/');
等待附件链接（第页）；
等待页面。屏幕截图（{path:“bla”}）
browser.close（）；
};
异步函数附件链接（第页）{
const bodyHandle=等待页面。$（'body'）；
等待页面。评估（（正文，numLinks=3）=>{
让anchors=Array.from（body.querySelectorAll（“a”））。
过滤器（（e，i）=>i{
log（“有人点击了链接”）；
e、 预防默认值（）；
e、 停止传播（）；
返回false；
});
};
}，车身把手）；
等待bodyHandle.dispose（）；
}
main（）；

---

然后使用VS Code和node.js调试支持，在标记的onclick事件被附加后，我在等待页面的第行放置了一个断点。在打开的浏览器中（headless设置为false），当代码等待恢复时，我用鼠标点击了

中的

标记，希望在满头的调试浏览器控制台中看到“有人点击了链接”。但是我在浏览器或VS代码的调试控制台中都没有看到日志。我在这里遗漏了什么吗？

这是因为您没有实际单击锚定标记。您已将事件附加到它“单击”，并定义了当我们单击它时将发生什么，但您实际上并没有单击它。只需添加

a。单击（）

like

       // 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

，您正在附加事件侦听器，而不是实际单击它

，这是因为您没有实际单击锚定标记。您已将事件附加到它“单击”，并定义了当我们单击它时将发生什么，但您实际上并没有单击它。只需添加

a。单击（）

like

       // 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

，您正在附加事件侦听器，而不是实际单击它

您希望在哪里呈现控制台？为了澄清，您是否正在查看浏览器的DevTools控制台以获取这些日志？还是VSCode中的调试控制台？是的，在headful浏览器的控制台中，as

attachLinks

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

attachLinks

函数向它们添加onClick事件处理程序。我还仔细检查了VS代码调试控制台。那里也没有。谢谢特里皮。但我的目标是在调试会话期间手动单击（而不是通过代码），如代码后面的问题所述：）@Nitin抱歉。尝试放置

等待页面。等待（2*1000）之后<代码>等待页面。转到（'https://www.linkedin.com/jobs/');行您也可以使用
wait page.waitForNavigation（）
也代替了
waitFor（）
。整个想法是等待slighlty加载页面，然后再启动另一个活动感谢Tripti提供的所有伟大提示。我的问题是无法停止浏览器，在这种情况下，
waitFor
变体可能会有所帮助。在附加链接后，我使用VS Code的调试器暂停了浏览器，方法是在wait page.screenshot（{path:“bla”}）上放置一个断点。在等待恢复的过程中，我手动单击页面上的链接，但我没有看到click事件处理程序中的控制台语句暗示它们未被附加。ok，但我的建议仍然是一样的。我之所以这么说，是因为在使用
waitFor
进行
goto
操作后，变量
bodyHandle
没有暂停，因为没有附加链接。所以，我将给出最后一条评论，您是否在代码中使用waitFor，然后在VS代码中调试它？如果是，它是否仍然给出相同的结果？如果是的，那么我就到此为止，因为我在这方面无法提供帮助：）@Nitinhanks Tripti。但我的目标是在调试会话期间手动单击（而不是通过代码），如代码后面的问题所述：）@Nitin抱歉。尝试放置
等待页面。等待（2*1000）之后<代码>等待页面。转到（'https://www.linkedin.com/jobs/');行您也可以使用
wait page.waitForNavigation（）
也代替了
waitFor（）
。整个想法是等待slighlty加载页面，然后再启动另一个活动感谢Tripti提供的所有伟大提示。我的问题是无法停止浏览器，在这种情况下，
waitFor
变体可能会有所帮助。在附加链接后，我使用VS Code的调试器暂停了浏览器，方法是在wait page.screenshot（{path:“bla”}）上放置一个断点。当它等待恢复时，我手动单击页面上的链接，但看不到控制台状态我