截图

一个用于捕获 Flutter 屏幕截图的命令行实用程序和包。

screenshots

屏幕截图，带有叠加的状态栏和附加的导航栏，放置在设备框架中。

要查看在实时应用上使用screenshots生成的图片示例，请参阅
GitErDone

screenshots实际演示
screenshots demo

要了解screenshots的介绍，请参阅文章。

有关使用CI/CD工具自动化screenshots的信息，请参阅
fledge.

截图

screenshots是一个独立的命令行实用程序和软件包，用于捕获屏幕截图
Flutter。它将启动所需的Android模拟器和iOS模拟器，运行您的屏幕
捕获测试，在每个模拟器/模拟器上为应用支持的每个区域设置运行测试，处理图像，并将其提供给Fastlane
以交付到两个应用商店。

它的灵感来自Fastlane的三个产品

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

screenshots结合了所有三个Fastlane产品的关键功能。

  1. 从任何iOS模拟器或Android模拟器捕获屏幕截图并处理图像。
  2. 在iOS或Android设备框架中添加设备边框。
  3. 相同的Flutter集成测试可用于所有模拟器/模拟设备。
    无需使用iOS UI测试或Espresso。
  4. 与Fastlane的deliver集成
    以及supply以上传到相应的商店。

用法

$ screenshots

或者，如果使用默认的“screenshots.yaml”以外的配置文件

$ screenshots -c <path to config file>

修改screenshots的测试

使用此软件包捕获屏幕截图非常简单。

screenshots软件包中提供了一个特殊函数
由测试调用，每次您想要捕获屏幕截图时。
screenshots将
在screenshots运行期间适当地处理图像。

要在测试中捕获屏幕截图

  1. 将screenshots软件包包含在pubspec.yaml的dev_dependencies部分
      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

Travis上的screenshots

要查看Travis上的示例应用如何运行screenshots，请参阅
https://travis-ci.com/mmcc007/screenshots

要下载Travis运行期间由screenshots生成的图像，请参阅
https://github.com/mmcc007/screenshots/releases/

配置

要运行screenshots，您需要设置一个配置文件screenshots.yaml

# Screen capture tests
tests:
  - test_driver/test1.dart
  - test_driver/test2.dart

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

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

# A list of devices to emulate
devices:
  ios:
    - iPhone X
#    - iPhone 7 Plus
    - iPad Pro (12.9-inch) (2nd generation)
#   "iPhone 6",
#   "iPhone 6 Plus",
#   "iPhone 5",
#   "iPhone 4s",
#   "iPad Retina",
#   "iPad Pro"
  android:
    - Nexus 6P
#    - Nexus 5X

# Frame screenshots
frame: true

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

更改配置

如果您想更改运行的设备列表以获取不同的屏幕截图，请确保您
选择的设备具有支持的屏幕和相应的模拟器/模拟设备。

在ios和android设备类别中，多个设备共享相同的屏幕尺寸。
因此，设备按支持的屏幕组织在一个名为screens.yaml的文件中。

要修改配置文件以包含您选择的设备以进行仿真/模拟

  1. 在最新版本中找到每个选定的设备
    screens.yaml.
    使用最新的screens.yaml，而不是下面的示例。
  2. 将screenshots.yaml中的设备列表修改为您选择的设备。
    确认每个选定的设备名称与screens.yaml中使用的名称匹配
  3. 为每个选定的设备安装模拟器/模拟设备。
    确认screenshots.yaml中使用的每个选定的设备都有一个模拟器/模拟设备
    具有匹配的名称。

screenshots将在运行前验证配置文件。

示例 screens.yaml

ios:
  5.5inch:
    size: 1242x2208
    resize: 75%
    resources:
      statusbar: resources/ios/1242/statusbar_black.png
      frame: resources/ios/phones/iPhone_7_Plus_Silver.png
    offset: -0-0
    devices:
      - iPhone 7 Plus
  12.9inch:
    size: 2048x2732
    resize: 75%
    resources:
      frame: resources/ios/phones/iPad_Pro_Silver.png
    offset: -0-0
    devices:
      - iPad Pro (12.9-inch) (2nd generation)
android:
  5.2inch:
    size: 1080x1920
    resize: 80%
    resources:
      statusbar: resources/android/1080/statusbar.png
      navbar: resources/android/1080/navbar.png
      frame: resources/android/phones/Nexus_5X.png
     offset: -4-9
    devices:
      - Nexus 5X
    destName: phone

如果您想使用 screens.yaml 中未包含的设备
请创建一个issue。包含
设备名称，最好是屏幕尺寸（以像素为单位）
（例如，Nexus 5X：1080x1920）。

安装

在命令行上安装screenshots

$ pub global activate screenshots

要升级，只需重新发出命令

$ pub global activate screenshots

注意：命令行和软件包的screenshots版本应相同

  1. 如果升级screenshots的命令行版本，最好也升级
    pubspec.yaml中的screenshots版本。
  2. 如果升级pubspec.yaml中的screenshots，您也应该升级命令行版本。

依赖项

screenshots依赖于ImageMagick。

由于Apple和Google商店都需要屏幕截图，因此测试应在Mac上进行
（除非您仅为android测试）。

brew update && brew install imagemagick

与Fastlane集成

由于screenshots旨在与Fastlane一起使用，在screenshots完成后，
图像可以在

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

GitHub

https://github.com/mmcc007/screenshots