Flutter集成测试辅助插件integration_test_helper的使用

简介

integration_test_helper 是一个用于加速Flutter应用端到端（E2E）测试部署的插件。它提供了预配置的方法，使得编写集成测试更加模块化和高效，减少了代码冗余，并且支持动态加载JSON数据进行黑盒测试。此外，它还支持所有主要的Widget交互操作，如点击、滑动等。

功能特点

• 快速部署：通过预配置的方法，减少重复代码，提高测试效率。
• 黑盒测试：支持从项目资源目录加载JSON数据进行测试，适用于ListView和其他类型的Widgets。
• 平台特定实现：可以根据不同的平台（如Android和iOS）提供不同的测试逻辑。
• 完整的测试覆盖率：帮助开发者编写更全面的测试用例，减少回归问题。

使用示例

1. 添加依赖

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.2
  drawer_manager: ^0.0.4

dev_dependencies:
  flutter_test:
    sdk: flutter
  integration_test:
    sdk: flutter
  integration_test_helper: ^latest_version

2. 创建主应用文件 lib/main.dart

创建一个包含Drawer导航的应用程序，用于展示不同页面。以下是 main.dart 的完整代码：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:drawer_manager/drawer_manager.dart';

import 'hello.dart'; // 自定义页面

void main() {
  runApp(setupMainWidget());
}

Widget setupMainWidget() {
  WidgetsFlutterBinding.ensureInitialized();
  return const MyApp();
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<DrawerManagerProvider>(
      create: (_) => DrawerManagerProvider(),
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  String _getTitle(int index) {
    switch (index) {
      case 0:
        return 'Hello 1';
      case 1:
        return 'Hello 2';
      default:
        return '';
    }
  }

  Widget _getTitleWidget() {
    return Consumer<DrawerManagerProvider>(builder: (context, dmObj, _) {
      return Text(
        _getTitle(dmObj.selection),
        key: const Key('app-bar-text'),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    final drawerSelections = [
      const HelloPage(position: 1),
      const HelloPage(position: 2),
    ];

    final manager = Provider.of<DrawerManagerProvider>(context, listen: false);

    return Scaffold(
      appBar: AppBar(title: _getTitleWidget()),
      body: manager.body,
      drawer: DrawerManager(
        context,
        drawerElements: [
          const DrawerHeader(
            decoration: BoxDecoration(color: Colors.blue),
            child: Padding(
              padding: EdgeInsets.only(bottom: 20),
              child: Icon(
                Icons.account_circle,
                color: Colors.blueGrey,
                size: 96,
              ),
            ),
          ),
          DrawerTile(
            key: const Key('drawer-hello-1'),
            context: context,
            leading: const Icon(Icons.hail_rounded),
            title: Text(_getTitle(0)),
            onTap: () async {},
          ),
          DrawerTile(
            key: const Key('drawer-hello-2'),
            context: context,
            leading: const Icon(Icons.hail_rounded),
            title: Text(_getTitle(1)),
            onTap: () async {},
          ),
        ],
        tileSelections: drawerSelections,
      ),
    );
  }
}

3. 创建页面文件 lib/hello.dart

创建一个简单的页面，用于展示不同的文本内容。以下是 hello.dart 的完整代码：

import 'package:flutter/material.dart';

class HelloPage extends StatelessWidget {
  final int position;

  const HelloPage({Key? key, required this.position}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Hello, Flutter $position!',
        key: Key('hello-page-text-$position'),
        textAlign: TextAlign.center,
        style: const TextStyle(
          color: Color(0xff0085E0),
          fontSize: 48,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }
}

4. 创建集成测试文件 integration_test/app_features.dart

在 integration_test 目录下创建一个测试文件，用于编写集成测试用例。以下是 app_features.dart 的完整代码：

import 'package:flutter_test/flutter_test.dart';
import 'package:integration_test/integration_test.dart';
import 'package:integration_test_helper/integration_test_helper.dart';

import 'package:example/main.dart' as app;
import 'app_feature_groups.dart';

void main() async {
  IntegrationTestHelperBinding.ensureInitialized();

  testWidgets('Testing end to end single-screen integration', (WidgetTester tester) async {
    final main = app.setupMainWidget();
    final integrationTestGroups = ScreenIntegrationTestGroups();
    await integrationTestGroups.initializeTests(tester, main);

    await integrationTestGroups.testHelloFlutterFeature();
  }, timeout: const Timeout(Duration(minutes: 1)));
}

5. 创建测试组文件 integration_test/app_feature_groups.dart

在 integration_test 目录下创建一个测试组文件，用于定义具体的测试逻辑。以下是 app_feature_groups.dart 的完整代码：

import 'dart:io';
import 'package:flutter_test/flutter_test.dart';
import 'package:integration_test_helper/integration_test_helper.dart';

class ScreenIntegrationTestGroups extends BaseIntegrationTest {
  @override
  Future<void> setupInitialData() async {
    // 初始化测试数据
  }

  @override
  Future<bool> isPlatformAndroid() async {
    return Future.value(true);
  }

  Future<void> showHelloFlutter({required int position}) async {
    print('Showing Hello, Flutter $position!');
    if (Platform.isAndroid) {
      await tapForTooltip('Open navigation menu');
      await tapForKey('drawer-hello-$position');
    }
    await waitForUI();
  }

  Future<void> testHelloFlutterFeature() async {
    await showHelloFlutter(position: 1);
    await verifyTextForKey('app-bar-text', 'Hello 1');
    await verifyTextForKey('hello-page-text-1', 'Hello, Flutter 1!');

    await showHelloFlutter(position: 2);
    await verifyTextForKey('app-bar-text', 'Hello 2');
    await verifyTextForKey('hello-page-text-2', 'Hello, Flutter 2!');
  }
}

6. 创建驱动文件 test_driver/app_features_test.dart

在 test_driver 目录下创建一个驱动文件，用于运行集成测试。以下是 app_features_test.dart 的完整代码：

import 'package:integration_test/integration_test_driver.dart';

Future<void> main() => integrationDriver();

7. 运行集成测试

在终端中运行以下命令来启动集成测试：

flutter drive -t integration_test/app_features.dart