Flutter屏幕截图插件screenshots的使用

Flutter屏幕截图插件screenshots的使用

简介

screenshots 是一个独立的命令行工具和包，用于为 Flutter 应用捕获屏幕截图。它结合了 Fastlane 的三个工具（Snapshots、Screengrab 和 FrameIt）的功能，支持跨平台（iOS 和 Android）的自动化屏幕截图生成，并且可以将截图放入设备框架中。

特性

• 兼容现有测试：只需在测试中添加一行代码即可捕获屏幕截图。
• 多设备支持：可以选择运行的设备（真实设备或模拟器），并自动处理。
• 多语言支持：如果应用支持多种语言，可以配置不同语言的截图。
• 框架支持：可选地将截图放入设备框架中。
• 状态栏清理：每张生成的截图都会有一个干净的状态栏。
• 与 Fastlane 集成：可以直接将截图上传到应用商店。
• 跨平台一次运行：支持同时捕获 iOS 和 Android 平台的截图。

安装

在 macOS 上：

brew update && brew install imagemagick
pub global activate screenshots

在 Linux 上：

# Debian, Ubuntu 或 Linux Mint
sudo apt-get install imagemagick
# Fedora, CentOS 或 RHEL
sudo yum install ImageMagick
# OpenSUSE
sudo zypper install imagemagick

pub global activate screenshots

在 Windows 上：

choco install imagemagick.app
pub global activate screenshots

如果系统找不到 pub 命令，请将其路径添加到环境变量中：

• macOS/Linux：

  export PATH="<flutter安装目录>/bin/cache/dart-sdk/bin:$PATH"

• Windows：

  set PATH=<flutter安装目录>\flutter\bin\cache\dart-sdk\bin;%APPDATA%\Pub\Cache\bin;%PATH%

注意：在 Windows 或 Linux 上只能运行 Android 设备/模拟器。如果需要运行 macOS，可以在支持 macOS 的 CI 工具上执行。

使用方法

运行 screenshots 命令：

screenshots

如果需要指定配置文件路径：

screenshots -c <配置文件路径>

其他选项：

usage: screenshots [-h] [-c <config file>] [-m <normal|recording|comparison|archive>] [-f <flavor>] [-b <true|false>] [-v]

-c, --config=<screenshots.yaml>                     配置文件路径，默认为 "screenshots.yaml"
-m, --mode=<normal|recording|comparison|archive>    模式选择：
                                                      - recording: 保存截图以供后续比较
                                                      - comparison: 将新截图与已记录的进行比较
                                                      - archive: 存档截图，无法通过 Fastlane 上传
                                                      默认模式为 normal
-f, --flavor=<flavor name>                          指定风味名称
-b, --build=<true|false>                            是否强制重新构建和安装应用
-v, --verbose                                       显示详细日志
-h, --help                                          显示帮助信息

修改测试以适配 Screenshots

为了捕获截图，需要在测试中调用 screenshots 提供的特殊函数。

1. 在 pubspec.yaml 文件的 dev_dependencies 中添加 screenshots：

   screenshots: ^<当前版本号>

2. 在测试代码中：

   • 导入 screenshots 包：

     import 'package:screenshots/screenshots.dart';

   • 创建 Config 对象：

     final config = Config();

   • 调用 screenshot 方法来捕获截图：

     await screenshot(driver, config, 'myscreenshot1');

确保截图名称在整个测试中唯一。

示例代码

以下是一个完整的示例代码，展示了如何使用 screenshots 插件捕获屏幕截图：

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_driver/flutter_driver.dart';
import 'package:screenshots/screenshots.dart';

void main() {
  // 初始化 Flutter Driver
  FlutterDriver driver;

  setUpAll(() async {
    driver = await FlutterDriver.connect();
  });

  tearDownAll(() async {
    if (driver != null) {
      await driver.close();
    }
  });

  test('Capture screenshot', () async {
    // 创建 Config 对象
    final config = Config();

    // 捕获截图
    await screenshot(driver, config, 'example_screenshot');
  });
}

配置文件

screenshots.yaml 是 screenshots 的配置文件，定义了测试文件、设备列表等信息：

# 测试文件列表
tests:
  - test_driver/main1.dart
  - test_driver/main2.dart

# 截图临时存储位置
staging: /tmp/screenshots

# 支持的语言列表
locales:
  - en-US
  - de-DE

# 设备配置
devices:
  ios:
    iPhone XS Max:
      frame: false
    iPad Pro (12.9-inch) (3rd generation):
      orientation: LandscapeRight
  android:
    Nexus 6P:

# 是否启用设备框架
frame: true

记录/对比模式

要监控界面的变化，可以使用记录/对比模式：

1. 在 screenshots.yaml 中添加记录目录：

   recording: /tmp/screenshots_record

2. 运行记录命令：

   screenshots -m recording

3. 后续运行对比命令：

   screenshots -m comparison

归档模式

归档模式用于本地生成截图，例如生成 UI 变化的报告：

1. 在 screenshots.yaml 中添加归档目录：

   archive: /tmp/screenshots_archive

2. 运行归档命令：

   screenshots -m archive