Flutter测试屏幕插件test_screen的功能使用

简介

test_screen 插件为Flutter应用程序提供了强大的UI回归测试功能，它基于Flutter的Golden测试构建。该插件允许开发者对所有无法通过手动验证的视觉细节进行自动化的回归测试。

什么是新的

• loadSimulatedPlatformFonts: 允许test_screen加载模拟平台字体。

工作原理

首先，您需要全局定义UI测试的区域设置（locales）、平台（platforms）和设备（devices）。对于每个UI测试，将为配置中定义的每个平台、区域设置和设备创建具体的测试。在Visual Studio Code (VSC)中，这看起来像一个平台组，其中包含一组区域设置和每个设备的测试。

在运行测试之前，必须创建用于确定UI测试是否正确的参考屏幕（golden files）。这些文件可以通过终端命令或已配置的VSC直接从IDE创建。创建的目录结构如下：

test/
├── failures/  # 测试失败时生成的目录
└── screens/   # 保存golden files的目录

当测试运行时，它会比较由测试生成的屏幕与这些golden files。如果存在差异，测试将失败，并且会在failures目录中创建失败信息。

开始使用

设置

将failures和screens目录添加到.gitignore

test/**/failures
test/**/screens

在项目中添加screen和screen_ui标签

在项目的根目录下添加一个dart_test.yaml文件，内容如下：

tags:
  screen:
  screen_ui:

配置Visual Studio Code

launch.json

在.vscode/launch.json中添加以下配置，以便于从IDE中轻松地重新生成屏幕：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Create Screens",
      "request": "launch",
      "type": "dart",
      "codeLens": {
        "for": ["run-test", "run-test-file"]
      },
      "args": ["--update-goldens"]
    }
  ]
}

安装Test Screen扩展

安装VSIX格式的Test Screen扩展，可以方便地在VSC中查看由test_screen创建的图像。

添加包到pubspec

在dev_dependencies中添加test_screen依赖：

flutter pub add test_screen --dev

创建屏幕测试

全局配置

在flutter_test_config.dart文件中初始化全局配置：

Future<void> testExecutable(FutureOr<void> Function() testMain) async {
  initializeDefaultTestScreenConfig(
    TestScreenConfig(
      locales: ['es', 'pt', 'en'],
      devices: {
        UITargetPlatform.android: [
          const TestScreenDevice(
            id: 'S2',
            manufacturer: 'Samsung',
            name: 'Galaxy S2',
            size: Size(1200, 1600),
            devicePixelRatio: 1.0),
          const TestScreenDevice(
            id: 'LX1',
            manufacturer: 'Huawei',
            name: 'AME-LX1',
            size: Size(1080, 2280),
            devicePixelRatio: 2.0),
        ],
        UITargetPlatform.iOS: [
          const TestScreenDevice(
              id: 'i8',
              manufacturer: 'Apple',
              name: 'iPhone 8',
              size: Size(1334, 750),
              devicePixelRatio: 2.0),
        ]
      }),
  );
  return testMain();
}

创建屏幕测试

使用testScreenUI创建UI测试：

void main() {
  group('Home Screen', () {
    testScreenUI('Init state', () async => const HomeScreen(),
      goldenDir: 'init_state');

    testScreenUI('Pushed button 3 times', () async => const HomeScreen(),
      goldenDir: 'pushed_3',
      onTest: (WidgetTester tester) async {
        for (int i = 0; i < 3; i++) {
          await tester.tap(find.byType(FloatingActionButton));
          await tester.pump();
        }
      });
  });
}

示例代码

以下是main.dart的示例代码，展示了如何在一个简单的Flutter应用中使用test_screen：

import 'package:flutter/material.dart';
import 'package:test_screen_sample/screens/home/home_screen.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'test_screen Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(),
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
    );
  }
}

通过以上步骤，您可以开始使用test_screen插件进行UI回归测试。希望这些信息对您有所帮助！如果有任何问题，请随时提问。