Flutter UI测试插件flutter_test_ui的使用

Flutter UI测试插件flutter_test_ui的使用

flutter_test_ui 是一个用于编写更易读的UI测试的封装。它通过提供 WidgetTesterCallback 参数来扩展 setUp 和 tearDown 函数，从而使得多个测试可以共享相同的设置，并且可以在子组中继续设置。这允许以类似于rspec的风格编写测试。

下面是一个完整的示例代码，展示了如何使用 flutter_test_ui 来测试一个简单的页面导航。

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

// 定义一个测试组
group("testUI and setUpUI example test", () {
  // 在每个测试之前执行的设置
  setUpUI((tester) async {
    // 初始化应用界面
    await tester.pumpWidget(MaterialApp(
      home: Builder(
        builder: (context) => GestureDetector(
          onTap: () => Navigator.of(context).push(
            MaterialPageRoute<void>(
              builder: (context) => Container(
                color: Colors.green,
                child: const Text("page 2"),
              ),
            ),
          ),
          child: Container(
            color: Colors.red,
            child: const Text("page 1"),
          ),
        ),
      ),
    ));
  });

  // 测试第一个页面是否显示
  testUI("first page is shown", (tester) async {
    // 验证文本 "page 1" 是否存在
    expect(find.text("page 1"), findsOneWidget);
  });

  // 子组：点击文本
  group("tapping the text", () {
    // 在每次点击测试之前执行的设置
    setUpUI((tester) async {
      // 点击 "page 1" 文本
      await tester.tap(find.text("page 1"));
      // 等待动画完成
      await tester.pumpAndSettle();
    });

    // 测试第二个页面是否显示
    testUI("second page is shown", (tester) async {
      // 验证文本 "page 2" 是否存在
      expect(find.text("page 2"), findsOneWidget);
    });

    // 子组：弹出第二个页面
    group("pop the second page", () {
      // 在每次弹出测试之前执行的设置
      setUpUI((tester) async {
        // 获取导航状态
        final nav = tester.state<NavigatorState>(find.byType(Navigator));
        // 弹出当前页面
        nav.pop();
        // 等待动画完成
        await tester.pumpAndSettle();
      });

      // 测试第二个页面是否不再可见
      testUI("second page isn't visible anymore", (tester) async {
        // 验证文本 "page 2" 是否不存在
        expect(find.text("page 2"), findsNothing);
      });

      // 测试第一个页面是否再次可见
      testUI("first page is visible again", (tester) async {
        // 验证文本 "page 1" 是否存在
        expect(find.text("page 1"), findsOneWidget);
      });
    });
  });
});

更多关于Flutter UI测试插件flutter_test_ui的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter UI测试插件flutter_test_ui的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_test_ui 是一个用于 Flutter 的 UI 测试插件，它提供了一些额外的功能和工具，使得编写和执行 UI 测试变得更加方便和高效。以下是如何使用 flutter_test_ui 插件的基本步骤和示例：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_test_ui 依赖：

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_test_ui: ^0.1.0  # 请使用最新的版本号

然后，运行 flutter pub get 来获取依赖。

2. 导入包

在你的测试文件中，导入 flutter_test_ui 包：

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

3. 编写测试

flutter_test_ui 提供了一些扩展方法和工具来简化测试代码。以下是一个简单的示例，展示了如何使用 flutter_test_ui 来编写 UI 测试。

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:flutter_test_ui/flutter_test_ui.dart';

void main() {
  testWidgets('Counter increments smoke test', (WidgetTester tester) async {
    // 构建我们的应用并触发一个帧
    await tester.pumpWidget(MyApp());

    // 使用 flutter_test_ui 的扩展方法来查找文本
    expect(find.text('0'), findsOneWidget);
    expect(find.text('1'), findsNothing);

    // 使用 flutter_test_ui 的扩展方法来点击按钮
    await tester.tap(find.byIcon(Icons.add));
    await tester.pump();

    // 验证计数器是否递增
    expect(find.text('0'), findsNothing);
    expect(find.text('1'), findsOneWidget);
  });
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Test UI Example'),
        ),
        body: Center(
          child: Counter(),
        ),
      ),
    );
  }
}

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          '$_counter',
          style: Theme.of(context).textTheme.headline4,
        ),
        IconButton(
          icon: Icon(Icons.add),
          onPressed: _incrementCounter,
        ),
      ],
    );
  }
}

4. 运行测试

你可以使用 flutter test 命令来运行测试：

flutter test
回到顶部