基于Flutter集成测试的图片/文件上传自动化实现及Web替代方案问询

针对Flutter应用中图片/文件选择器的集成测试，以及Patrol不支持Web平台的问题，以下是几种可行的解决方案：

方案1：官方集成测试 + 测试通道（跨平台通用，含Web） #

核心思路是通过自定义测试逻辑绕过原生系统选择器，直接向应用注入模拟的文件选择结果，无需触发真实的系统交互。

实现步骤 #

1. 应用代码中添加测试兼容逻辑
   定义测试专用的判断开关和数据传递通道，在测试环境下跳过真实选择器调用：

   import 'package:flutter/services.dart';
   import 'package:flutter/foundation.dart';
   import 'package:file_picker/file_picker.dart';
   
   class FilePickerService {
     static const MethodChannel _testChannel = MethodChannel('com.example/file_picker_test');
     // 通过编译参数控制测试模式，避免污染生产代码
     static bool isTesting = const bool.fromEnvironment('TEST_MODE');
   
     Future<FilePickerResult?> pickFile() async {
       if (isTesting) {
         if (kIsWeb) {
           // Web环境直接返回模拟的文件数据
           final mockBytes = Uint8List.fromList([0x00, 0x01]);
           return FilePickerResult([
             PlatformFile(name: 'test.jpg', size: mockBytes.length, bytes: mockBytes)
           ]);
         }
         // 原生环境通过测试通道获取模拟路径
         final String? mockPath = await _testChannel.invokeMethod('getTestFilePath');
         if (mockPath != null) {
           return FilePickerResult([
             PlatformFile(path: mockPath, name: 'test.jpg', size: 1024)
           ]);
         }
         return null;
       }
       // 生产环境调用真实选择器
       return await FilePicker.platform.pickFiles();
     }
   }
   

2. 集成测试中注入模拟结果
   在测试代码中配置测试通道，返回预设的文件数据：

   import 'package:flutter/services.dart';
   import 'package:flutter_test/flutter_test.dart';
   import 'package:your_app/main.dart';
   
   void main() {
     const MethodChannel _testChannel = MethodChannel('com.example/file_picker_test');
   
     setUp(() {
       _testChannel.setMockMethodCallHandler((MethodCall call) async {
         if (call.method == 'getTestFilePath') {
           return 'test/assets/test.jpg';
         }
         return null;
       });
     });
   
     testWidgets('测试文件选择与上传', (WidgetTester tester) async {
       // 启动应用时传入测试模式参数
       await tester.pumpWidget(MyApp());
       
       // 点击文件选择按钮
       await tester.tap(find.byKey(const Key('file_picker_btn')));
       await tester.pumpAndSettle();
       
       // 验证文件是否被正确处理
       expect(find.text('已选择: test.jpg'), findsOneWidget);
     });
   
     tearDown(() {
       _testChannel.setMockMethodCallHandler(null);
     });
   }
   

   运行测试时添加编译参数：

   flutter test --dart-define=TEST_MODE=true
   

方案2：Web平台专用模拟（基于dart:html） #

如果仅需覆盖Web场景，可以直接操作DOM元素模拟文件选择事件：

import 'dart:html' as html;
import 'package:flutter_test/flutter_test.dart';
import 'package:your_app/main.dart';

void main() {
  testWidgets('Web平台模拟文件上传', (WidgetTester tester) async {
    await tester.pumpWidget(MyApp());
    
    // 获取Web页面中的文件输入元素（需对应插件生成的<input>标签）
    final fileInput = html.document.querySelector('input[type="file"]') as html.FileInputElement;
    
    // 创建模拟文件
    final mockBlob = html.Blob(['test file content'], 'image/jpeg');
    final mockFile = html.File([mockBlob], 'test.jpg');
    
    // 触发文件选择事件
    fileInput.files = html.FileList.fromList([mockFile]);
    fileInput.dispatchEvent(html.Event('change'));
    
    await tester.pumpAndSettle();
    
    // 验证上传状态
    expect(find.text('上传成功: test.jpg'), findsOneWidget);
  });
}

方案3：跨平台E2E测试工具替代Patrol #

如果需要更贴近真实用户的操作流程：

• Flutter Driver + 原生工具：针对Android/iOS，用Flutter Driver结合UiAutomator（Android）或XCTest（iOS）触发系统选择器；Web端需单独用Web专用工具。
• WebdriverIO：纯Web场景下的E2E测试工具，可直接模拟用户选择文件的全流程。

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