Flutter 集成测试 - 截屏功能

Question

嘿，使用integration_test库（https://pub.dev/packages/integration_test）进行 UI 测试时，有没有可能截屏？

在flutter_driver中，有内置的方法可以进行截图。但在这个库中我找不到相关的方法。

- Hubert Arciszewski

Answer 1

我在 GitHub 上发现了一个未解决的问题 - https://github.com/flutter/flutter/issues/51890，他们正在开发相关功能。

- Hubert Arciszewski

Answer 2

Flutter的集成测试示例具备执行截图的骨架

首先创建集成测试驱动程序

//test_driver/foo_test.dart
import 'dart:io';
import 'package:flutter_driver/flutter_driver.dart';
import 'package:integration_test/integration_test_driver_extended.dart';

Future<void> main() async {
  final FlutterDriver driver = await FlutterDriver.connect();
  await integrationDriver(
    driver: driver,
    onScreenshot: (String screenshotName, List<int> screenshotBytes) async {
      final File image =
          await File(screenshotName).create(recursive: true);
      image.writeAsBytesSync(screenshotBytes);
      return true;
    },
  );
}

然后在你的测试中

//integration_test/bar_test.dart
void main() {
  final binding = IntegrationTestWidgetsFlutterBinding.ensureInitialized()
      as IntegrationTestWidgetsFlutterBinding;

  testWidgets('screenshot', (WidgetTester tester) async {
    await tester.pumpWidget(MyApp());
    await tester.pumpAndSettle();
    await binding.convertFlutterSurfaceToImage();
    await tester.pumpAndSettle();
    await binding.takeScreenshot('screenshots/screenshot.png');
  }
}

那么

flutter drive --driver=test_driver/foo_test.dart --target integration_test/bar_test.dart 

注意：

• 截图是png格式的
• 您无法直接从测试中保存，需要进行调整（解释驱动程序的必要性）

- UmNyobe

Answer 3

从Flutter 2.5.0版本开始，您可以通过非常简单的方式进行截屏。以下是如何操作的说明：https://dev.to/mjablecnik/take-screenshot-during-flutter-integration-tests-435k

- mjablecnik