Flutter自动化UI测试插件auto_golden_storybook的使用

Flutter自动化UI测试插件auto_golden_storybook的使用

描述

auto_golden_storybook 是一个命令行工具，用于自动为你的黄金图像生成一个 storybook。它会自动在项目中设置一个名为 storybook 的子目录，并将每个在测试目录中找到的PNG图像生成对应的“故事”对象。

目前，该工具只会使用PNG图像，并且只接受顶级目录作为测试目录。

使用

要使用该工具，只需运行以下命令：

dart run auto_golden_storybook:create

配置

你可以在 pubspec.yaml 文件中添加配置，或者通过命令行参数进行配置。例如：

在 pubspec.yaml 中添加配置：

auto_golden_storybook:
  name: "project_storybook"
  test_dir: "test/goldens"

或者通过命令行参数进行配置：

dart run auto_golden_storybook:create --name=project_storybook --test_dir="test/goldens"

默认情况下，创建的web项目将被命名为 “storybook”。它将假设你的测试目录名为 “test”，并会在测试目录的所有子目录中生成所有PNG图像的故事。

你可以修改一些生成的文件以满足自己的需求，如 device_frame.dart 和 golden_image_container.dart。设备框架是Storybook包的一部分，你可以更改它以使用你选择的默认框架。

golden_image_container.dart 是一个包装黄金图像的控件，并缩放掉黄金图像创建的边框。它还将其包裹在一个 ListView 中，以便可以滚动。你可以更改其添加的缩放量以适应自己的黄金图像。

路线图

• 自动根据黄金图像大小选择框架。
• 更多配置选项。
• 更多测试。

贡献

请在Github的issue跟踪器中提出功能建议或报告问题。

许可证

MIT许可证 - 详情请参阅 LICENSE.md

完整示例Demo

下面是一个完整的示例，展示了如何使用 auto_golden_storybook 插件。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

步骤说明

1. 创建一个新的Flutter项目：

   flutter create my_flutter_app
   cd my_flutter_app
   

2. 在 pubspec.yaml 中添加 auto_golden_storybook 依赖：

   dependencies:
     auto_golden_storybook: ^1.0.0
   

3. 安装依赖：

   flutter pub get
   

4. 创建黄金图像并保存到测试目录： 例如，创建一个名为 test/goldens/ 的目录，并将黄金图像（如 image.png）放入其中。

5. 运行 auto_golden_storybook:create 命令：

   dart run auto_golden_storybook:create --name=my_storybook --test_dir="test/goldens"
   

6. 查看生成的故事书： 运行生成的故事书项目：

   cd my_storybook
   flutter run