如何使用TestCafe关闭浏览器文件选择对话框？

核心思路 #

TestCafe的setFilesToUpload是直接给input[type="file"]元素赋值，无需依赖浏览器的文件选择对话框。对话框弹出的原因是测试中触发了页面按钮的点击逻辑，而该按钮会主动唤起系统级对话框——TestCafe无法直接关闭系统对话框，因此需要从根源避免它被触发。

具体解决方案 #

1. 直接操作隐藏的文件输入框（推荐） #

大多数上传按钮是作为input[type="file"]的视觉遮罩存在的，测试时可以跳过点击按钮，直接定位到真实的文件输入框并调用setFilesToUpload：

await t.setFilesToUpload('input[type="file"]', ['./test-files/sample.txt']);

如果输入框有特定ID或类名，使用更精确的选择器：

await t.setFilesToUpload('#hidden-file-input', ['./test-files/sample.txt']);

2. 拦截按钮点击的默认行为 #

如果业务逻辑要求必须点击上传按钮（比如按钮点击后才初始化输入框），可以通过ClientFunction修改按钮的点击事件，阻止对话框唤起：

import { ClientFunction } from 'testcafe';

const disableFileDialogTrigger = ClientFunction(() => {
    const uploadBtn = document.querySelector('#upload-button');
    const fileInput = document.querySelector('input[type="file"]');

    // 阻止按钮点击时的默认行为
    uploadBtn.addEventListener('click', e => {
        e.preventDefault();
        // 若需要触发输入框的change事件以执行后续逻辑，手动派发事件
        fileInput.dispatchEvent(new Event('change'));
    });

    // 同时阻止输入框自身的点击默认行为
    fileInput.addEventListener('click', e => e.preventDefault());
});

// 在测试流程中先执行拦截，再点击按钮
await disableFileDialogTrigger();
await t.click('#upload-button');
await t.setFilesToUpload('input[type="file"]', ['./test-files/sample.txt']);

3. 重写浏览器文件选择API #

如果页面使用了现代浏览器的showOpenFilePicker等API唤起对话框，需要重写该API返回模拟数据，避免真实对话框弹出：

import { ClientFunction } from 'testcafe';

const mockFilePicker = ClientFunction(() => {
    window.showOpenFilePicker = async () => {
        // 返回模拟的文件对象，匹配测试所需的文件信息
        return [{
            getFile: async () => new Blob(['test content'], { type: 'text/plain' }),
            name: 'sample.txt'
        }];
    };
});

// 先注入模拟函数，再执行按钮点击
await mockFilePicker();
await t.click('#upload-button');

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