Flutter WebAPP集成测试

WebAPP集成测试前准备

1.添加FlutterDriver依赖

pubspec.yaml文件可以对依赖和配置进行管理，找到dev_denpendencies添加如下配置。flutteWebApp在测试前，除了test和flutter_driver配置之外，需要更改build_runner和build_test为any

dev_dependencies:
  flutter_test:
    sdk: flutter
  test: ^1.3.0
  flutter_driver:
    sdk: flutter
  build_runner: any
  build_test: any

2.创建test脚本

2.1、在工程根目录下创建test_driver文件夹
2.2、创建xx.dart文件：用于启动运行应用
2.3、创建xx_test.dart文件：Test脚本文件
因为集成测试中TestCase和应用运行在不同的进程中，所以需要test_driver目录里有两个文件分别用来执行应用和执行TestCase。

3.开启Flutterdriver扩展支持

在xx.dart文件中添加如下代码：

import 'package:flutter_driver/driver_extension.dart';
import 'package:cevt_fleet_app/main.dart' as app;
void main() {
  // 启用FlutterDriver扩展
  enableFlutterDriverExtension();
  // 启动执行应用
  app.main();
}

4.编写测试脚本

首先因为flutter中没有ID属性，一般通过Key属性进行标识（对应定位方法为valueKey），所以要先在需要测试的元素加上key属性，例如：

在xx_test.dart文件中添加如下代码：

import 'package:flutter_driver/flutter_driver.dart';
import 'package:test/test.dart';

@TestOn('browser')
void main() {
  group('Login test', () {
    FlutterDriver driver;

    // 测试开始前连接FlutterDriver
    setUpAll(() async {
      driver = await FlutterDriver.connect();
    });

    // 测试结束后关闭FlutterDriver
    tearDownAll(() async {
      if (driver != null) driver.close();
    }); 

    test('login test', () async {

      //通过Key查找用户名，密码和登录按钮控件
      final userNameTextField = find.byValueKey('userName');
      final passwordTextField = find.byValueKey('password');
      final LoginButtonWidget = find.byValueKey('loginBtn');

      // 输入空的账号密码，点击登录按钮进行登录测试
      // Enter the empty account and password, click login Button to login test
      await driver.tap(userNameTextField);
      await driver.enterText('');
      await driver.tap(passwordTextField);
      await driver.enterText('');
      await driver.tap(LoginButtonWidget);

      // 输入错误的账号和密码，点击登录按钮进行登录测试
      await driver.tap(userNameTextField);
      await driver.enterText('tony');
      await driver.tap(passwordTextField);
      await driver.enterText('test');
      await driver.tap(LoginButtonWidget);

      // 输入正确的账号和密码，点击登录按钮进行登录测试
      await driver.tap(userNameTextField);
      await driver.enterText('tony.ma');
      await driver.tap(passwordTextField);
      await driver.enterText('test');
      await driver.tap(LoginButtonWidget);

    }, tags: 'chrome');
  });
}

5.执行测试

5.1 启动ChromeDriver，并选择chrome作为测试设备

这时最好确认ChromeDriver是否更新至最新版本，根据chrome版本到ChromeDriver 官方网站下载更新。
更新文件ChromeDriver为可执行的文件，直接可以启动ChromeDriver:

这里就启动成功了。
注意：1.如果启动port值（上图红色框）不是4444的话，在进行下一步 “5.2 在项目的根目录下开启命令终端“”的时候应该加入port指定，例如这里port为9515，则应执行

flutter drive -d chrome --target=test_driver/app.dart --driver-port=9515

2. 如果出现DevToolsActivePort file doesn't exist错误时，应在启动ChromeDriver的时候，加入--disable-dev-shm-usage命令，例如：在 windows操作系统上要在chromedriver.exe的根目录上执行：

chromedriver.exe --disable-dev-shm-usage

选择chrome作为测试设备

5.2 在项目的根目录下开启命令终端

flutter drive -d chrome --target=test_driver/app.dart 

5.3执行结果

All tests passed!即为测试通过，如果不通过，控制台会有对应报错信息。