Playwright中Page.on("filechooser")上传失效及代码顺序疑问

问题重现 #

尝试使用Playwright的Page.on("filechooser")实现文件上传，两段代码均无法正常工作：

代码1（点击无反应） #

from playwright.sync_api import sync_playwright
viewport={"width":1920,"height":1080}
p = sync_playwright().__enter__()
browser = p.chromium.launch(headless=False,chromium_sandbox=True)
context = browser.new_context(viewport=viewport)
page = context.new_page()
page.goto("https://zh-cn.imgbb.com/")

page.on("filechooser",lambda f:f.set_files("picture.png")) #1
page.click(".home-buttons>a") #2

执行后点击操作未弹出文件选择窗口，上传失败。

代码2（弹窗但上传无效） #

调换代码顺序后：

page.click(".home-buttons>a") #2
page.on("filechooser",lambda f:f.set_files("picture.png")) #1

点击能弹出文件选择窗口，但自动上传未生效。

修复方案 #

使用Playwright官方推荐的page.expect_file_chooser()上下文管理器，确保文件选择器事件被正确捕获：

from playwright.sync_api import sync_playwright

viewport = {"width": 1920, "height": 1080}
with sync_playwright() as p:
    browser = p.chromium.launch(headless=False, chromium_sandbox=True)
    context = browser.new_context(viewport=viewport)
    page = context.new_page()
    page.goto("https://zh-cn.imgbb.com/")

    # 用上下文管理器预先监听事件，同时执行点击操作
    with page.expect_file_chooser() as fc_info:
        page.click(".home-buttons>a")
    file_chooser = fc_info.value
    # 确保文件路径正确，不在当前目录则使用绝对路径
    file_chooser.set_files("picture.png")

原因解析 #

代码1无反应的原因 #

page.on("filechooser")注册的是异步监听器，在同步API执行逻辑中，page.click()触发时，监听器尚未完成事件绑定，Playwright会默认拦截未被监听的文件选择器弹窗，导致窗口无法弹出。

代码2上传无效的原因 #

先执行page.click()会立即触发文件选择器弹窗，此时监听器还未注册，已经发生的事件无法被后续注册的监听器捕获，自然无法自动设置文件路径。

上下文管理器的优势 #

page.expect_file_chooser()会预先完成事件监听绑定，同时阻塞等待事件触发，既保证点击操作能正常弹出文件选择窗口，又能100%捕获到对应的事件，完成自动文件设置。

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