暴力突破 Flutter 自动化测试

1、前言


移动应用的测试每每比较复杂且工做量很大,为了验证用户的真实使用体验每每须要跨越多个平台以及不一样的物理设备手动测试。随着产品功能不断迭代累积,测试的复杂度随之大幅增加,手动测试会变得更加困难。所以,编写自动化测试用例对咱们的项目更新、迭代有着很是重要的做用。html

2、单元测试


单元测试是指对软件中的最小可测试单元进行验证的方式,使用单元测试能够验证单个函数、方法或类的行为。咱们来看看 Flutter 项目的工程目录:web

如上图所示,lib 是 Flutter 应用源文件目录,test 是测试文件目录。接下来咱们看看编写单元测试用例的步骤。json

2.1 相关步骤

2.1.1 添加依赖

Flutter 工程默认添加了 flutter_test package,若是是 dart package 没有依赖 Flutter,能够导入 test package,示例代码以下:api

dev_dependencies:
  flutter_test:
    sdk: flutter
  //or
  test:
复制代码

2.1.2 声明一个用来测试的类

在 lib 目录下新建一个 dart 文件,声明一个用来测试的类,示例代码以下:微信

//unit.dart
 
class Counter {
  int value = 0;
 
  void increment() => value++;
 
  void decrement() => value--;
}
复制代码

2.1.3 编写测试用例

在 test 目录下建立一个 dart 文件(文件名建议已 _test 结尾),编写测试用例。测试用例一般包含含定义、执行和验证步骤,示例以下:markdown

//unit_test.dart
 
import 'package:flutter_unit_test/unit.dart';
import 'package:flutter_test/flutter_test.dart';
 
void main() {
  //第一个用例,判断Counter对象调用increase方法后是否等于1
  test('Increase a counter value should be 1', () {
    final counter = Counter();
    counter.increase();
    expect(counter.count, 1);
  });
  
  //第二个用例,判断1+1是否等于2
  test('1+1 should be 2', () {
    expect(1 + 1, 2);
  });
}
复制代码

能够看到验证须要使用 expect 函数,将最小可测单元的执行结果与预期进行比较。 另外,测试用例须要包装在 test() 内部,test 是 flutter 提供的测试用例封装类。网络

2.1.4 启动测试用例

选择 unit_test.dart 文件,在右键弹出的菜单中选择 “Run ‘tests in widget_test’”,就能够启动测试用例了。运行结果以下:app

接下来咱们修改下测试用例代码,以下:less

void main() {
  //第一个用例,判断Counter对象调用increase方法后是否等于1
  test('Increase a counter value should be 1', () {
    final counter = Counter();
    counter.increase();
    expect(counter.count, 2);
  });
 
  //第二个用例,判断1+1是否等于2
  test('1+1 should be 2', () {
    expect(1 + 1, 2);
  });
}
复制代码

能够看到,咱们将第一个用例的 1 修改为 2 来制造一个错误,如今来看看测试用例执行不经过的提示:async

2.1.5 组合测试用例

若是有多个测试用例,它们之间存在关联关系,能够在外层使用 group 函数将它们组合在一块儿,示例代码以下:

void main() {
  //组合测试用例,判断Counter对象调用increase方法后是否等于1,
  // 而且判断Counter对象调用decrease方法后是否等
  group('Counter', () {
    test('Increase a counter value should be 1', () {
      final counter = Counter();
      counter.increase();
      expect(counter.count, 1);
    });
    test('Decrease a counter value should be -1', () {
      final counter = Counter();
      counter.decrease();
      expect(counter.count, -1);
    });
  });
}
复制代码

另外,除了上述启动方式外,还可使用终端命令来启动测试用例,示例以下:

//flutter test 文件路径
flutter test test/unit_test.dart
//使用 flutter run 文件路径 的方式来运行到真机或模拟器上测试也是能够的
复制代码

2.2 使用 mockito 模拟外部依赖

进行单元测试时咱们可能还须要从外部依赖(好比web服务)获取须要测试的数据,咱们先来看一个示例,在 lib 中建立一个要测试的类:

//mock.dart
 
import 'dart:convert';
import 'package:http/http.dart' as http;
 
class Todo {
  final String title;
 
  Todo({this.title});
 
  //工厂类构造方法,将JSON转换为对象
  factory Todo.fromJson(Map<String, dynamic> json) {
    return Todo(
      title: json['title'],
    );
  }
}
 
Future<Todo> fetchTodo(http.Client client) async {
  //获取网络数据
  final response = await client.get('https://xxx.com/todos/1');
  if (response.statusCode == 200) {
    //请求成功,解析JSON
    return Todo.fromJson(json.decode(response.body));
  } else {
    //请求失败,抛出异常
    throw Exception('Failed to load post');
  }
}
复制代码

能够看到与 web 服务的数据交互是咱们程序不可以控制的,很难覆盖全部可能成功或失败的用例,所以更好的办法是在测试用例中模拟这些”外部依赖“,让其能够返回特定内容。接下来咱们来看看使用 mockito 模拟外部依赖的步骤:

2.2.1 添加依赖

在 pubspec.yaml 文件的 dev_dependencies 中添加 mockito 包:

dependencies:
  http: ^0.12.2
 
dev_dependencies:
  flutter_test:
    sdk: flutter
  mockito:
复制代码

2.2.2 建立模拟类

建立一个模拟类,示例以下:

//mock_test.dart
 
import 'package:mockito/mockito.dart';
import 'package:http/http.dart' as http;
 
class MockClient extends Mock implements http.Client {}
复制代码

能够看到咱们定义了一个模拟类 MockClient,这个类以接口声明的方式获取到了 http.Client 的外部接口。

2.2.3 编写测试用例

如今咱们可使用 when 语句,在其调用 Web 服务时注入 MockClient 并返回相应的数据,代码以下:

//mock_test.dart
 
import 'package:flutter_test/flutter_test.dart';
import 'package:flutter_unit_test/mock.dart';
import 'package:mockito/mockito.dart';
import 'package:http/http.dart' as http;
 
class MockClient extends Mock implements http.Client {}
 
void main() {
  group('fetchTodo', () {
    test('returns a Todo if successful', () async {
      final client = MockClient();
 
      //使用Mockito注入请求成功的JSON字段
      when(client.get('https://xxx.com/todos/1'))
          .thenAnswer((_) async => http.Response('{"title": "Test"}', 200));
 
      //验证请求结果是否为Todo实例
      expect(await fetchTodo(client), isInstanceOf<Todo>());
    });
 
    test('throws an exception if error', () {
      final client = MockClient();
 
      //使用Mockito注入请求失败的Error
      when(client.get('https://xxx.com/todos/1'))
          .thenAnswer((_) async => http.Response('Forbidden', 403));
 
      //验证请求结果是否抛出异常
      expect(fetchTodo(client), throwsException);
    });
  });
}
复制代码

能够看到在第一个用例中咱们为其注入了 json 结果,而在第二个用例中咱们注入了一个 403 异常。咱们来看看运行结果:

能够看到,在没有调用真实 Web 服务的状况下咱们的程序成功地模拟出了正常和异常两种状况。

关于 Flutter 的单元测试部分先说到这里,细心的同窗可能发现整个 Flutter 单元测试的模式跟 Android 是很是相似的。

3、UI 自动化测试


3.1 简单示例

为了测试 widget 类,咱们须要使用 flutter _test package。拿一个 Flutter 默认的计时器应用模板为例:

它的 UI 测试用例能够这么来写:

//widget_test.dart
 
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:flutter_unit_test/widget.dart';
 
void main() {
  testWidgets('Counter increments UI test', (WidgetTester tester) async {
    //声明所须要验证的Widget对象(即MyApp),并触发其渲染
    await tester.pumpWidget(MyApp());
    //查找字符串文本为'0'的Widget,验证查找成功
    expect(find.text('0'), findsOneWidget);
    //查找字符串文本为'1'的Widget,验证查找失败
    expect(find.text('1'), findsNothing);
    //查找'+'按钮,施加点击行为
    await tester.tap(find.byIcon(Icons.add));
    //触发其渲染
    await tester.pump();
    //查找字符串文本为'0'的Widget,验证查找失败
    expect(find.text('0'), findsNothing);
    //查找字符串文本为'1'的Widget,验证查找成功
    expect(find.text('1'), findsOneWidget);
  });
}
复制代码

右键点击该文件,选择 Run 'tests in widget_test.dart' 选项执行测试,测试结果以下:

3.2 相关步骤以及API详解

flutter_test package 提供了如下工具用于 widget 的测试:

  • testWidgets() :此函数会自动为每一个测试建立一个 WidgetTester,用来代替普通的 test 函数。
  • WidgetTester:使用该类可在测试环境下创建 widget 并与其交互。
  • Finder :该类能够方便咱们在测试环境下查找 widgets。
  • Mathcer 常量:该常量在测试环境下帮助咱们验证 Finder 是否认位到一个或多个 widgets。

接下来咱们来看看编写测试用例的相关步骤:

3.2.1 添加 flutter_test 依赖

在 pubspec.yaml 文件的 dev_dependencies 里添加 flutter_test 依赖,代码以下:

dev_dependencies:
  flutter_test:
    sdk: flutter
复制代码

3.2.2 建立用于测试的 widget

仍是拿 Flutter 默认的计时器应用模板为例,代码以下:

import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
 
  final String title;
 
  @override
  _MyHomePageState 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>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}
复制代码

3.2.3 建立一个 testWidgets 测试方法

用 flutter_test package 提供的 testWidgets() 函数定义一个测试。testWidgets 函数能够定义一个 widget 测试并建立一个可使用的 WidgetTester。

import 'package:flutter_test/flutter_test.dart';
 
void main() {
  testWidgets('Counter increments UI test', (WidgetTester tester) async {
    
  });
}
复制代码

3.2.4 使用 WidgetTester 创建并渲染 widget

在上一步中咱们建立了一个 WidgetTester,使用 WidgetTester 能够在测试环境下创建、渲染 widget 并能够与其进行交互。接下来咱们来介绍下 WidgetTester 中常见的 api。

建立/渲染类API

  • pumpWidget(Widget widget) :建立并渲染咱们提供的 widget。
  • pump(Duration duration):触发 widget 重建。与 pumpWidget 不一样之处在于即便 widget 与先前的调用相同, pumpWidget 也会强制彻底重建树,而 pump 将仅重建已更改的 widget。例如咱们点击调用 setState() 的按钮,可使用 pump 方法来让 flutter 再一次创建咱们的 widget。
  • pumpAndSettle():在给按期间内不断重复调用 pump() 直到完成全部绘制帧,通常须要等到全部动画所有完成。

交互类API

  • enterText():模拟输入文本。
  • tap():模拟点击按钮。
  • drag():模拟滑动。
  • longPress():模拟长按。

其余方法这里再也不赘述,若是想深刻理解这些内容,能够参考 WidgetTester 进行学习。

3.2.5 使用 Finder 定位(查找) widget

在测试环境下,为了定位 widget,咱们须要用到 Finder 类。

  • text(String text):查找含有特定文本的 widget,例如 find.text('0')。
  • widgetWithText():限定 widget 的类型,而且该类型 widget 包含给定的文本,例如 find.widgetWithText(Button, '0')。
  • byKey(Key key):使用具体 key 查找 widget。例如 find.byKey(Key('H'))。
  • byType(Type type):根据 type 来寻找对应的 widget,type 参数必须是 Widget 的子类,例如 find.byType(IconButton)。
  • byWidget(Widget widget):根据 widget 实例来寻找对应的 widget。示例以下:
Widget myButton = new Button(
  child: new Text('Update')
);
 
find.byWidget(myButton);
复制代码
  • byWidgetPredicate():根据 widget 的属性匹配 widget,示例以下:
find.byWidgetPredicate(
  (Widget widget) => widget is Tooltip && widget.message == 'Back',
  description: 'widget with tooltip "Back"',
)
复制代码

若是想深刻理解这些内容,能够参考 CommonFinders 进行学习。

3.2.六、使用 Matcher 常量进行验证

flutter_test 提供了如下 matchers:

  • findsOneWidget:找到一个 widget
  • findsWidgets:找到一个或多个 widget
  • findsNothing:没有找到 widget
  • findsNWidgets:找到指定数量的 widget

例如:

//查找字符串文本为'0'的Widget,验证查找失败
expect(find.text('0'), findsNothing);
复制代码

经过以上步骤,咱们对 widget 测试有了必定的了解了,如今咱们再来看看上面写的那个 widget 测试用例能够有更深入的认识了:

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:flutter_unit_test/widget.dart';
 
void main() {
  testWidgets('Counter increments UI test', (WidgetTester tester) async {
    //声明所须要验证的Widget对象(即MyApp),并触发其渲染
    await tester.pumpWidget(MyApp());
    //查找字符串文本为'0'的Widget,验证查找成功
    expect(find.text('0'), findsOneWidget);
    //查找字符串文本为'1'的Widget,验证查找失败
    expect(find.text('1'), findsNothing);
    //查找'+'按钮,施加点击行为
    await tester.tap(find.byIcon(Icons.add));
    //触发其渲染
    await tester.pump();
    //查找字符串文本为'0'的Widget,验证查找失败
    expect(find.text('0'), findsNothing);
    //查找字符串文本为'1'的Widget,验证查找成功
    expect(find.text('1'), findsOneWidget);
  });
}
复制代码

尽管 widget 测试扩大了应用的测试范围,能够找到单元测试没法找到的问题,不过相比于单元测试来讲,widget 测试用例的开发和维护成本很是高,所以建议在项目达到必定的规模,而且业务特征具备必定的延续规律后,再考虑 widget 测试的必要性。

更多精彩内容,尽请关注腾讯VTeam技术团队微信公众号和视频号

原做者:但超

未经赞成,禁止转载!

相关文章
相关标签/搜索