Flutter屏幕截图插件test_screenshot的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter屏幕截图插件test_screenshot的使用

使用方法

在你的Flutter单元测试中，可以通过以下步骤来获取屏幕截图：

  1. 将你的Widget树包裹在一个Screenshotter widget中。
  2. 调用tester.screenshot()方法。

示例代码

testWidgets('should create a screenshot', (tester) async {
  await tester.pumpWidget(
    Screenshotter(
      child: MaterialApp(
        home: Scaffold(body: Center(child: Icon(Icons.home))),
      ),
    ),
  );

  await tester.screenshot(path: 'screenshot.png');
}

字体、图标和图片

默认情况下，Flutter会在单元测试中使用其自己的字体，并且不允许渲染网络图片。

要允许字体和网络图片，可以使用screenshotWithImages()方法。

testWidgets('should create a screenshot with fonts and images',
  (tester) async {

  await tester.screenshotWithImages(() async {
    await tester.pumpWidget(
      Screenshotter(
        child: MaterialApp(
          home: Scaffold(
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Below is an icon'),
                  Icon(Icons.home),
                  Image.network(
                    'https://images.pexels.com/photos/1805164/pexels-photo-1805164.jpeg',
                    height: 300,
                    width: 300,
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
    // do things...
  }, path: 'file_with_image.png');

}

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter项目中使用test_screenshot插件来进行屏幕截图的示例代码。test_screenshot插件通常用于自动化测试中对UI进行截图，以便进行视觉回归测试。

首先，确保你的Flutter项目已经添加了test_screenshot依赖。在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  test_screenshot: ^x.y.z  # 请替换为最新版本号

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

接下来，你需要设置测试代码。假设你有一个简单的Flutter应用，并且你想对首页进行截图。以下是一个完整的示例：

  1. 创建一个Flutter应用（如果你还没有的话）。

  2. 更新main.dart（这是你的应用入口文件）：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
    );
  }
}
  1. 添加截图测试：

在你的test目录下创建一个新的测试文件，例如screenshot_test.dart：

import 'package:flutter_test/flutter_test.dart';
import 'package:test_screenshot/test_screenshot.dart';
import 'package:your_app_name/main.dart';  // 替换为你的主应用文件路径

void main() {
  testWidgets('screenshot test', (WidgetTester tester) async {
    // 启用截图功能
    await matchGoldenFile(
      'golden_screenshot.png',  // 保存截图的文件名
      Finder(
        descendFrom: find.byType(MyApp),  // 找到你的根组件
        text: 'Hello, World!',  // 或者使用其他Finder来精确定位
      ),
      customPainterMatchers: [],  // 如果你的UI包含自定义Painter，可以在这里配置匹配器
    );
  });
}

在这个示例中，matchGoldenFile函数会捕获给定Finder找到的Widget的截图，并将其与存储在test/golden_files目录下的预期截图进行比较。如果截图不匹配，测试将失败。

  1. 运行截图测试：

在运行截图测试之前，你需要先生成一个“golden”截图文件作为基准。你可以使用以下命令：

flutter test --update-goldens test/screenshot_test.dart

这将运行测试并生成或更新test/golden_files目录下的截图文件。

之后，你可以运行测试来检查UI是否有变化：

flutter test test/screenshot_test.dart

如果UI与基准截图不同，测试将失败，提示你检查UI更改。

通过上述步骤，你就可以在Flutter项目中使用test_screenshot插件进行屏幕截图测试了。希望这个示例对你有帮助！

回到顶部