Electron E2E（Playwright）：如何获取文件保存/打开对话框

核心思路 #

Electron的文件保存/打开对话框属于系统原生控件，Playwright的filechooser事件仅针对Web页面的<input type="file">元素，无法捕获菜单触发的原生对话框。正确方案是拦截Electron主进程的dialog模块API，直接模拟对话框的返回结果，跳过原生界面交互。

具体实现方法 #

1. 拦截保存对话框（showSaveDialog） #

启动Electron应用后，mock主进程的dialog.showSaveDialog方法，指定保存路径：

// 拦截主进程的保存对话框API
await electronApp.evaluate(async ({ dialog }) => {
  const originalMethod = dialog.showSaveDialog;
  dialog.showSaveDialog = async () => {
    // 模拟用户选择路径并确认保存
    return { filePath: '/your/test/save/path/file.txt', canceled: false };
  };
});

// 触发保存菜单操作（示例：点击保存菜单项）
await page.click('#save-menu-btn');

2. 拦截打开对话框（showOpenDialog） #

同理，mock打开对话框的返回结果：

// 拦截主进程的打开对话框API
await electronApp.evaluate(async ({ dialog }) => {
  const originalMethod = dialog.showOpenDialog;
  dialog.showOpenDialog = async () => {
    return { filePaths: ['/your/test/open/path/file.txt'], canceled: false };
  };
});

// 触发打开菜单操作
await page.click('#open-menu-btn');

3. 测试后恢复原方法（可选） #

避免影响其他测试用例，可在测试完成后恢复原生API：

await electronApp.evaluate(async ({ dialog }) => {
  dialog.showSaveDialog = originalMethod;
});

原方法失效原因说明 #

• electronApp.waitForEvent('window')：仅监听Electron的BrowserWindow实例创建，文件对话框不属于BrowserWindow，无法捕获。
• window.waitForEvent('filechooser')：仅针对Web页面内的文件上传输入框，对Electron菜单触发的原生对话框不生效。

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