Python环境下Playwright无法捕获页面自定义事件问题求解

Python侧的Playwright Page对象和浏览器页面的JS上下文是完全隔离的两个运行环境：

• page.on() 监听的是Python侧Playwright自身预定义或主动触发的事件，不会自动捕获浏览器DOM环境里派发的自定义CustomEvent
• 你在页面里执行document.dispatchEvent(new CustomEvent('newPosts'))，事件只会在浏览器DOM上下文里传播，根本不会跨环境传到Python运行时，自然不会触发你绑定的handle_posts回调。
  你在浏览器控制台用document.addEventListener能捕获到事件，只能证明事件在浏览器侧派发正常，和Python侧没有关联。

以下两种方案都可稳定实现需求，优先选第一种官方API方案，无版本兼容问题。

方案1：通过expose_binding打通跨上下文调用（推荐） #

提前把Python侧的处理函数绑定到页面全局，页面侧监听到DOM变动、要发通知的时候直接调用这个绑定好的全局方法即可，不需要绕自定义事件逻辑：

from playwright.sync_api import sync_playwright

def handle_posts(source, posts_data):
    # 写你的后续业务处理逻辑，posts_data是页面侧传回的可序列化数据
    print("收到新帖子数据：", posts_data)

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    # 先把Python处理函数暴露到页面全局，命名为pyHandleNewPosts
    page.expose_binding("pyHandleNewPosts", handle_posts)
    page.goto("目标页面地址")
    # 注入DOM变动监听逻辑，触发时直接调用暴露的Python方法传值
    page.evaluate("""
        const observer = new MutationObserver((mutations) => {
            // 此处替换为你判断新内容加载、提取数据的逻辑
            const newPosts = Array.from(document.querySelectorAll('.post-item')).map(el => el.textContent.trim())
            // 直接调用挂载到window的Python方法，传入需要处理的数据
            window.pyHandleNewPosts({posts: newPosts})
        })
        observer.observe(document.body, {
            childList: true,
            subtree: true
        })
    """)
    # 保持页面运行等待事件触发
    page.wait_for_timeout(100000)

方案2：兼容原有自定义事件写法 #

如果你不想修改现有浏览器侧派发CustomEvent的逻辑，可以加一层事件转发，打通DOM事件到Python侧的通道：

from playwright.sync_api import sync_playwright

def handle_posts(event_data):
    print("收到新帖子数据：", event_data)

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("目标页面地址")
    
    # 注册页面事件转发逻辑
    page.expose_binding("pyDispatchEvent", lambda source, event_name, data: page.emit(event_name, data))
    page.evaluate("""
        // 监听你在页面派发的自定义DOM事件
        window.addEventListener('newPosts', (e) => {
            // 把事件详情转发到Python侧
            window.pyDispatchEvent('newPosts', e.detail)
        })
    """)
    
    # 绑定自定义事件处理逻辑
    page.on("newPosts", handle_posts)
    
    # 注入你原有的DOM监听、自定义事件派发逻辑
    page.evaluate("""
        const observer = new MutationObserver(() => {
            const newPosts = Array.from(document.querySelectorAll('.post-item')).map(el => el.textContent.trim())
            document.dispatchEvent(new CustomEvent('newPosts', {detail: {posts: newPosts}}))
        })
        observer.observe(document.body, {childList: true, subtree: true})
    """)
    
    page.wait_for_timeout(100000)

• 严格遵守时序：先绑定跨上下文通信通道、注册监听，再注入DOM变动监听和事件派发逻辑，避免初始化阶段的事件丢失
• 跨上下文传递的数据必须是可JSON序列化的，不要传DOM节点、函数、Symbol这类无法序列化的内容，否则会出现传值失败
• 如果页面存在沙箱隔离的iframe，需要给对应iframe单独注入监听逻辑，主页面注入的JS不会作用到跨域iframe内

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