Flutter Web集成测试：FilePicker文件选择问题及替代方案咨询

一、解决integration_test下FilePicker阻塞问题 #

Flutter Web的文件选择依赖浏览器原生弹窗，integration_test无法直接交互该弹窗，推荐两种非硬编码的解决方案：

1. 依赖注入替换FilePicker实现 #

将文件选择逻辑抽象为接口，生产环境用真实FilePicker，测试环境用模拟实现直接返回预设文件：

// 抽象文件选择服务接口
abstract class FilePickerService {
  Future<File?> pickFile();
}

// 生产环境真实实现
class RealFilePickerService implements FilePickerService {
  @override
  Future<File?> pickFile() async {
    final result = await FilePicker.platform.pickFiles();
    return result != null ? File(result.files.single.path!) : null;
  }
}

// 测试环境模拟实现
class MockFilePickerService implements FilePickerService {
  @override
  Future<File?> pickFile() async {
    // 从测试资源读取预设文件内容返回
    final bytes = await rootBundle.load('test/test_sample.txt');
    return File.fromRawPath(bytes.buffer.asUint8List());
  }
}

测试时注入MockFilePickerService，完全绕过真实文件选择流程，避免阻塞。

2. JS互操作模拟文件选择 #

利用Flutter Web的JS互操作，直接调用浏览器API给文件选择input注入文件：

import 'dart:html' as html;

void simulateFileUpload(String fileName, String fileContent) {
  // 创建模拟文件对象
  final file = html.File([fileContent], fileName);
  // 定位FilePicker对应的input元素（需确保元素可被选择，可加id/class）
  final input = html.document.querySelector('input[type="file"]') as html.InputElement;
  
  // 模拟文件选择事件
  final dataTransfer = html.DataTransfer();
  dataTransfer.items.add(file);
  input.files = dataTransfer.files;
  input.dispatchEvent(html.Event('change'));
}

测试中调用该方法，直接触发文件选择完成的事件，无需手动操作弹窗。

二、Flutter Web E2E测试替代方案 #

如果integration_test的局限性难以适配，可选择专门的Web自动化工具：

• Cypress：对Web文件上传支持完善，通过cy.get('input[type="file"]').selectFile('test/sample.txt')即可模拟文件选择，无需修改Flutter业务代码，上手成本低。
• Playwright：跨浏览器自动化工具，支持多端测试，通过page.setInputFiles('input[type="file"]', 'test-file.csv')实现文件上传，灵活性强。
• Selenium：传统Web自动化工具，定位文件选择input后直接发送文件路径，适合已有Selenium技术栈的团队。

内容的提问来源于stack exchange，提问作者Alviss Nguyen Bui