Flutter屏幕截图插件fbtl_screenshots的使用

Flutter屏幕截图插件fbtl_screenshots的使用

一个用于在使用Firebase Test Lab进行测试时截取屏幕的Flutter插件。

Firebase Test Lab可以在模拟器和真实设备上运行集成测试。此插件帮助你在测试过程中截取屏幕，并将生成的屏幕截图添加到Firebase Test Lab的输出文件中。

请注意，该插件与Firebase或Google无关。

开始使用

首先，使用flutter integration_test package在Firebase Test Lab上运行你的测试。

一旦你的测试在Firebase Test Lab上运行，你可以添加截图支持。首先编辑你的pubspec.yaml文件以添加对fbtl_screenshots的开发依赖：

dev_dependencies:
  fbtl_screenshots: ^0.0.2

然后编辑你的integration_test/example_test.dart文件以调用FBTLScreenshots.takeScreenshot方法：

import 'package:fbtl_screenshots/fbtl_screenshots.dart';

void main() {
  final _screenshots = FBTLScreenshots();
  await _screenshots.connect();

  testWidgets('截图测试', (WidgetTester tester) async {
    // 构建应用。
    app.main();
    // 触发帧。
    await tester.pumpAndSettle();
    // 截取屏幕
    await _screenshots.takeScreenshot('screenshot-1');
  });
}

更多关于Flutter屏幕截图插件fbtl_screenshots的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter屏幕截图插件fbtl_screenshots的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


fbtl_screenshots 是一个用于 Flutter 的屏幕截图插件，主要用于自动化生成应用的屏幕截图。这个插件通常用于在持续集成（CI）环境中生成屏幕截图，以便在应用发布前进行视觉回归测试或为应用商店准备屏幕截图。

以下是使用 fbtl_screenshots 插件的基本步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 fbtl_screenshots 依赖：

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  fbtl_screenshots: ^1.0.0  # 使用最新的版本号

然后运行 flutter pub get 来安装依赖。

2. 配置插件

在项目根目录下创建一个 screenshots.yaml 文件，用于配置屏幕截图的相关参数。以下是一个示例配置文件：

screenshots:
  android:
    - device: Nexus 5X
      locale: en_US
      orientation: portrait
    - device: Pixel 4
      locale: fr_FR
      orientation: landscape
  ios:
    - device: iPhone 13 Pro Max
      locale: en_US
      orientation: portrait
    - device: iPhone SE (2nd generation)
      locale: ja_JP
      orientation: landscape

在这个配置文件中，你可以指定要测试的设备、语言环境（locale）以及屏幕方向。

3. 编写测试代码

在你的 Flutter 项目中创建一个测试文件，例如 screenshots_test.dart，并编写测试代码。以下是一个简单的示例：

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

void main() {
  final screenshots = Screenshots();

  testWidgets('Take screenshot of HomePage', (WidgetTester tester) async {
    // 构建你的 widget
    await tester.pumpWidget(MyApp());

    // 等待应用加载完成
    await tester.pumpAndSettle();

    // 截屏并保存
    await screenshots.screenshot('home_page', tester);
  });
}

4. 运行测试并生成屏幕截图

使用以下命令运行测试并生成屏幕截图：

flutter test --device-id=<device_id> integration_test/screenshots_test.dart
回到顶部