如何使用Cypress测试触发showSaveFilePicker的按钮？

因为Cypress无法直接处理浏览器原生的系统文件对话框，所以需要通过Mock原生API或封装库方法来绕过真实的系统交互，完成测试。以下是两种可行方案：

方案一：Mock全局的showSaveFilePicker函数 #

直接替换浏览器全局的showSaveFilePicker方法，让它返回模拟的文件句柄，避免触发真实的系统保存对话框：

it("'new' creates and links to an empty file", () => {
  cy.visit("/");
  
  // 注入Mock，替换原生API
  cy.window().then(win => {
    win.showSaveFilePicker = cy.stub().resolves({
      // 模拟文件句柄的核心方法，可根据业务需求扩展
      async write(data) {
        // 可选：断言写入的内容是否符合预期
        expect(data).to.equal(""); // 假设新建文件是空内容
        return Promise.resolve();
      },
      name: "new-empty-file.txt"
    });
  });

  cy.get("#new").click();
  
  // 验证API是否被正确调用
  cy.window().then(win => {
    expect(win.showSaveFilePicker).to.have.been.called;
  });
});

方案二：Mock browser-fs-access库的封装方法 #

如果你的代码通过browser-fs-access的封装方法（比如saveFile）调用原生API，可以直接Mock这个封装方法：

it("'new' creates and links to an empty file", () => {
  cy.visit("/");
  
  // 假设saveFile方法挂载在window对象上，根据实际情况调整
  cy.window().then(win => {
    cy.stub(win, "saveFile").resolves({
      name: "new-empty-file.txt"
    });
  });

  cy.get("#new").click();
  
  // 验证封装方法的调用参数是否符合预期
  cy.window().then(win => {
    expect(win.saveFile).to.have.been.calledWithMatch({
      suggestedName: "new-empty-file.txt" // 匹配预期的文件名参数
    });
  });
});

关键说明 #

• 原生showSaveFilePicker需要真实用户交互触发，Cypress模拟的点击无法绕过系统级对话框，因此Mock是唯一可行的测试方式。
• 使用cy.stub()而非普通JavaScript stub，这样才能结合Cypress的断言体系验证调用情况。

内容的提问来源于stack exchange，提问作者João Melo