Contents

集成测试介绍

Contents

Unit tests 和 Widget tests 在测试独立的类、函数或者组件时非常方便。然而，它们并不能够测试单独的模块形成的整体或者获取真实设备上应用运行状态。这些任务需要集成测试 (integration tests) 来处理。

集成测试由 SDK 直接提供支持，使用 integration_test 这个 package 实现。

在这个章节中，我们将会学习如何去测试一个计数器应用，包括如何设置集成测试、如何验证指定文本能否在应用内正常显示、如何模拟点击指定组件和如何运行集成测试。

本教程将包含以下步骤：

  1. 创建一个应用用于测试；

  2. 添加 integration_test 依赖

  3. 创建测试文件

  4. 编写集成测试

  5. 运行集成测试

1. 创建一个应用用于测试

首先，我们需要创建一个应用用于测试。在这个示例中，我们将会测试一个由 flutter create 命令创建的计数器应用。这个应用允许用户点击按钮增加计数。

此外，我们将会给 Text 组件和 FloatingActionButton 组件增加 ValueKey 属性。通过这个我们将可以在测试套件中标识特定组件并进行交互。

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Counter App',
      home: MyHomePage(title: 'Counter App Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              // Provide a Key to this specific Text widget. This allows
              // identifying the widget from inside the test suite,
              // and reading the text.
              key: const Key('counter'),
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // Provide a Key to this button. This allows finding this
        // specific button inside the test suite, and tapping it.
        key: const Key('increment'),
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

2. 添加 integration_test 依赖

接着，我们需要用到 integration_test 和 flutter_test package 来编写集成测试，把依赖添加到应用pubspec.yaml 文件的 dev_dependencies 区域。

dev_dependencies:
  integration_test:
    sdk: flutter
  flutter_test:
    sdk: flutter

3. 创建测试文件

创建一个名为 integration_test 的新文件夹，并在文件夹中创建一个空的 app_test.dart 文件：

counter_app/
  lib/
    main.dart
  integration_test/
    app_test.dart

4. 编写集成测试文件

现在我们可以来写测试文件了，步骤如下列三项：

  1. 初始化一个单例 IntegrationTestWidgetsFlutterBinding，这将用于在物理设备上执行测试；

  2. 使用 WidgetTester 类测试并与 widget 发生交互；

  3. 测试重要的应用场景。

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

import 'package:counter_app/main.dart' as app;

void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  group('end-to-end test', () {
    testWidgets('tap on the floating action button, verify counter',
        (tester) async {
      app.main();
      await tester.pumpAndSettle();

      // Verify the counter starts at 0.
      expect(find.text('0'), findsOneWidget);

      // Finds the floating action button to tap on.
      final Finder fab = find.byTooltip('Increment');

      // Emulate a tap on the floating action button.
      await tester.tap(fab);

      // Trigger a frame.
      await tester.pumpAndSettle();

      // Verify the counter increments by 1.
      expect(find.text('1'), findsOneWidget);
    });
  });
}

5. 运行集成测试

集成测试的运行情况会根据需要进行测试的平台不同而不尽相同，你可以针对移动平台或者 Web 平台进行测试。

5a. 移动平台

在 iOS 或 Android 平台进行真机测试的时候，首先需要连接设备并在工程的根目录运行下面的命令：

flutter test integration_test/app_test.dart

或者你可以在指定目录下运行所有的集成测试：

flutter test integration_test

这个命令可以在目标设备上运行应用并执行集成测试，更多相关信息，请参阅文档：集成测试 页面。

5b. Web 平台

在网页浏览器里开始进行集成测试，首先要下载 ChromeDriver。

接下来，新建一个文件夹，命名为 test_driver，并包含一个新的文件，命名为 integration_test.dart。

import 'package:integration_test/integration_test_driver.dart';

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

运行 chromedriver，执行如下命令：

chromedriver --port=4444

在工程的根目录下，运行如下命令：

flutter drive \
  --driver=test_driver/integration_test.dart \
  --target=integration_test/app_test.dart \
  -d chrome

如需 Headless 测试体验，你同样可以运行 flutter drive 命令，并加入 web-server 作为目标设备，参考如下命令：

flutter drive \
  --driver=test_driver/integration_test.dart \
  --target=integration_test/app_test.dart \
  -d web-server