Playwright Python点击未触发JS事件：问题排查与替代方案咨询

在使用Playwright Python编写自动化用例时，需要监听页面上被点击的元素并获取其bounding box用于后续验证。由于Playwright文档中没有专门的页面点击事件处理器，尝试结合JS与Playwright Python实现点击事件监听，但发现通过Playwright方法触发的点击无法被JS的click事件监听器捕获，只有手动点击页面时事件才能正常触发。

提出两个问题：

1. 是否遗漏了某些配置？或是该场景在Playwright中不被支持？
2. Playwright中是否有其他可捕获所有点击的替代方案？

运行的Python代码如下：

import asyncio
import time
from playwright.async_api import async_playwright


async def main():
    playwright = await async_playwright().start()
    browser = await playwright.chromium.launch(headless=False)
    page = await browser.new_page(viewport={"width": 1880, "height": 900})
    client = await page.context.new_cdp_session(page)

    print("successfully opened browser")
    url = 'https://www.cricbuzz.com/'
    await page.goto(url=url if "://" in url else "http://" + url)

    time.sleep(3)
    ### Code goes here ###
    js = """
    clickEvent = null;
    console.log("Adding Click handler")
    window.addEventListener('click', (e) => { 
        console.log("Click handler called "+e.clientX+"||"+e.clientY); 
        console.log(e); 
        clickEvent=5;});
    let startTime = new Date();
    while(clickEvent==null){
        let endTime = new Date();
        if(endTime - startTime>10000)
        break;
    };
    """

    window_handle = page.evaluate_handle(js)
    await page.mouse.click(100, 100)

    clickCompleted = await window_handle

    clickEventObjectDirect = await page.evaluate("clickEvent")
    print(clickEventObjectDirect)
    clickEventObject = page.evaluate_handle("clickEvent")
    clickEventObjectTemp = await clickEventObject
    clickEventObjectJSON = await clickEventObjectTemp.json_value()
    print(clickEventObjectJSON)

    print("Waiting")


if __name__ == '__main__':
    asyncio.run(main())

问题1：Playwright触发的点击无法被JS监听的原因 #

这不是配置遗漏，是Playwright的默认行为：通过Playwright API触发的点击（比如page.mouse.click()、element.click()）默认走浏览器的自动化执行层，不会完全模拟用户手动点击的原生DOM事件流，所以JS的window.addEventListener('click')捕获不到这类点击。

不过可以通过特定参数或方法强制触发原生事件，但这不是最优解。

问题2：Playwright捕获所有点击的替代方案 #

推荐两种更可靠的实现方式：

方案1：使用Playwright原生的page.on("click")事件监听 #

Playwright自带页面级的点击事件监听，不管是API触发的点击还是手动点击，都能捕获到，还能直接获取元素的bounding box：

import asyncio
from playwright.async_api import async_playwright

async def main():
    async with async_playwright() as playwright:
        browser = await playwright.chromium.launch(headless=False)
        page = await browser.new_page(viewport={"width": 1880, "height": 900})
        
        # 定义点击事件处理函数
        async def handle_click(event):
            target_element = event.element
            if target_element:
                # 获取元素的bounding box
                box = await target_element.bounding_box()
                print(f"点击元素的bounding box：{box}")
                # 可选：获取元素的选择器路径
                selector = await target_element.path()
                print(f"点击元素的选择器：{selector}")
        
        # 绑定页面点击事件
        page.on("click", handle_click)
        
        await page.goto("https://www.cricbuzz.com/")
        # 通过API触发点击测试
        await page.mouse.click(100, 100)
        
        # 保持页面打开，方便测试手动点击
        await page.wait_for_timeout(30000)
        await browser.close()

if __name__ == '__main__':
    asyncio.run(main())

方案2：修复原有JS监听的思路 #

如果坚持用JS监听的方式，可以通过dispatch_event触发元素的原生click事件，替代page.mouse.click()：

# 替换原有代码中的await page.mouse.click(100, 100)
# 先获取点击位置对应的元素
target_element = await page.element_from_point(100, 100)
# 触发原生click事件
await target_element.dispatch_event("click")

这种方式能让JS监听器捕获到事件，但只能针对特定元素触发，不如方案1的页面级监听灵活。

内容的提问来源于stack exchange，提问作者Vaibhav More