屏幕截图

一张带有关联状态栏的设备框架截图。

screenshots

要查看在两个应用商店的实时应用中通过Screenshots生成的图片示例,请参见
GitErDone
GitErDone

查看Screenshots的演示

screenshots 来自 Maurice McCabeVimeo

屏幕截图

Screenshots是一个独立的命令行工具和包,用于为Flutter捕获截图。

Screenshots将启动所需的Android模拟器和iOS模拟器(或查找已连接的设备),在每个模拟器/模拟器(或设备)上运行屏幕截图测试,处理图片,然后将其传递给Fastlane以分发到两个应用商店。

它的灵感来源于Fastlane的三个工具:

  1. Snapshots
    这用于使用iOS UI测试在iOS上捕获截图。
  2. Screengrab
    这使用Android Espresso测试在Android上捕获截图。
  3. FrameIt
    这用于将捕获的iOS截图放入设备框架中。

由于这三个Fastlane工具都不能与Flutter一起使用,Screenshots将这些Fastlane工具的关键功能整合到一个工具中。

功能

由于Flutter的集成测试设计为在iOS和Android之间透明工作,因此使用Screenshots捕获图像非常容易。

功能包括:

  1. 与您现有的测试配合使用
    为每个截图添加一行代码。
  2. 在任何设备上运行测试
    使用方便的配置文件选择您要在其上运行的设备。
  3. 一次运行支持两个平台
    Screenshots在一个运行中同时在iOS和Android上运行您的测试。
    (而不是分别运行Snapshots和Screengrab)
  4. 一次运行支持多个区域设置
    如果您的应用支持多个区域设置,Screenshots将在运行每个测试之前可选地设置配置文件中列出的区域设置(请参见下面的限制)。
  5. 一次运行支持框架
    可选地在同一次运行中将图片放置在设备框架中。
    (而不是单独运行FrameIt,后者仅支持iOS)
  6. 一次运行支持干净的状态栏
    Screenshots生成的每一张图片都有干净的状态栏。
    (无需运行单独的阶段来清理状态栏)
  7. 与Fastlane配合使用
    Screenshots会将图片放置在Fastlane期望找到的位置。然后,Fastlane的deliversupply可用于上传到相应的应用商店。

额外的自动化功能

  1. Screenshots在云端运行。
    要观看Screenshots在macOS云端与国际化示例应用一起运行的现场演示,请参阅下方
  2. Screenshots可与任何CI/CD工具配合使用。
    要观看Screenshots生成的图片上传到两个应用商店控制台的现场演示,请参阅Fledge演示:https://github.com/mmcc007/fledge#demo

安装

在macOS上

$ brew update && brew install imagemagick
$ pub global activate screenshots

笔记
如果找不到pub,请使用以下命令将其添加到PATH:

export PATH="$PATH:<path to flutter installation directory>/bin/cache/dart-sdk/bin"

用法

$ screenshots

或者,如果使用非默认的'screenshots.yaml'配置文件:

$ screenshots -c <path to config file>

修改您的测试以适应Screenshots

Screenshots包中提供了一个特殊的函数,测试每次想要捕获截图时都会调用它。
Screenshots将在Screenshots运行期间相应地处理图片。

在您的测试中捕获截图

  1. 在pubspec.yaml的dev_dependencies部分包含Screenshots包。
      screenshots: ^<current version>
    
  2. 在您的测试中
    1. 导入依赖项。
      import 'package:screenshots/config.dart';
      import 'package:screenshots/capture_screen.dart';
      
    2. 在测试开始时创建配置映射。
           final Map config = Config().config;
      
    3. 在整个测试过程中调用捕获截图的函数。
          await screenshot(driver, config, 'myscreenshot1');
      

注意:确保您的截图名称在所有测试中都是唯一的。

注意:要关闭屏幕上的调试横幅,请在您的集成测试的main()中调用:

  WidgetsApp.debugAllowBannerOverride = false; // remove debug banner for screenshots

配置

Screenshots使用配置文件来配置运行。
默认的配置文件名为screenshots.yaml

# A list of screen capture tests
tests:
  - test_driver/main1.dart
  - test_driver/main2.dart

# Note: flutter driver expects a pair of files for testing
# For example:
#   main1.dart is the test app (that calls your app)
#   main1_test.dart is the matching test that flutter driver 
#   expects to find.

# Interim location of screenshots from tests
staging: /tmp/screenshots

# A list of locales supported by the app
locales:
  - de-DE
  - en-US

# A map of devices to emulate
devices:
  ios:
    iPhone XS Max:
      frame: false
    iPad Pro (12.9-inch) (3rd generation):
  android:
    Nexus 6P:

# Frame screenshots
frame: true

注意:在您的测试机器上必须安装与配置文件中设备对应的模拟器或仿真器。

设备参数

可以通过在screenshots.yaml中指定每个设备的参数来单独配置设备。(设备名称末尾的:表示,在yaml中,可以 optionally 跟随一个参数映射。)

参数 必需 描述
frame true/false 可选 控制是否将设备上生成的截图放入框架中。它会覆盖全局的frame设置(请参见上面的screenshots.yaml示例)。

与Fastlane集成

由于Screenshots旨在与Fastlane一起使用,在Screenshots完成后,图片可以在您的项目中的以下位置找到:

android/fastlane/metadata/android
ios/fastlane/screenshots

图片格式适合通过deliver上传。
以及supply

提示:使用Screenshots与Fastlane的一种方法是先调用Screenshots,然后再调用Fastlane(或者选择从Fastlane调用)。然后,Fastlane(无论是iOS还是Android)将在适当的位置找到图片。

(有关使用Fastlane将截图上传到两个应用商店控制台的现场演示,请参阅Fledge演示:https://github.com/mmcc007/fledge#demo

更改设备

要更改测试运行的设备,只需更改screenshots.yaml中的设备列表。

确保您选择的设备具有支持的屏幕和相应的模拟器/仿真器。

注意:实际上,多个设备共享相同的屏幕尺寸。
因此,设备按支持的屏幕尺寸组织在一个名为screens.yaml的文件中。

对于每个选定的设备

  1. 确认设备存在于screens.yaml中。
  2. 将设备添加到screenshots.yaml的设备列表中。
  3. 为设备安装模拟器或仿真器。

Screenshots将在运行前检查您的配置。

升级

要升级,只需重新发出安装命令:

$ pub global activate screenshots

注意:Screenshots的版本应与命令行和您的pubspec.yaml中的版本相同。

  1. 如果升级命令行的Screenshots版本,也要升级
    您pubspec.yaml中的Screenshots版本。
  2. 如果升级您pubspec.yaml中的Screenshots版本,也要升级命令行版本。

要检查当前安装的Screenshots版本:

pub global list

GitHub

https://github.com/mmcc007/screenshots