Flutter未知功能插件flutster的潜在使用（注：由于介绍为undefined，以下基于插件名称进行合理推测）

Flutter功能扩展插件flutster的探索使用

描述

Flutster 是一个用于Flutter应用集成测试自动化的插件，它通过记录用户事件并比较小部件截图来实现自动化测试。以下是关于 Flutster 插件的一些详细信息和示例代码。

目录

• 目的
• 用例
• 可以跟踪的内容
• 支持的平台
• 依赖
• 如何使用
• 文档
• 问题反馈
• 贡献
• CI/CD

Purpose

Flutster 的主要目的是在Flutter应用程序中进行集成测试，通过记录用户事件并比较小部件截图来检测UI错误，如布局问题、意外行为等。

Use cases:

• 记录用户事件，如点击和触摸小部件
• 跟踪小部件行为并检测UI问题来源
• 使用多种算法比较小部件与截图之间的差异
• 模拟Flutter应用程序的自动化测试
• 存储应用程序的录制文件

What you can track

Taps:

• 点击发生的时间
• 点击的位置
• 点击的持续时间
• 跟踪事件的小部件

Keys:

• 按键按下时间
• 按下的字符
• 按键的持续时间
• 跟踪事件的小部件

Screenshots:

• 截图拍摄时间
• 用于比较截图的函数
• 跟踪事件的小部件

Platforms

Flutster 仅在Android平台上进行了测试。

Dependency

在pubspec.yaml中添加依赖：

dependencies:
  flutster:

导入包：

import 'package:flutster/flutster.dart';

How to use

方法一：

将每个要测试页面中的Scaffold替换或包裹为FlutsterScaffold。例如：

return FlutsterScaffold(
  name: "myUniqueWidgetName",
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: ...,
);

方法二：

创建FlutsterTestRecorder并引用要测试的小部件。

FlutsterTestRecorder(
  name: "myUniqueWidgetName",
  child: myWidget,
)

一旦Flutster插件集成到你的Android应用程序中，可以在Android模拟器或物理设备上运行该应用程序，并使用scrcpy辅助工具进行操作。使用Flutster菜单记录小部件，与应用程序交互以记录用户事件，存储和回放录制内容以进行测试。

Documentation

Flutster 文档可在这里找到。

Feature requests/comments/questions/bugs

如果你有任何功能请求、评论、问题或Bug报告，请提交至GitHub Issues。

Contributions

欢迎贡献代码！请确保你的pull request满足以下条件：

• 不破坏编译
• 提供相关文档更新
• 增加了价值
• 不完全改变现有代码
• 可读性好

CI/CD

持续集成/部署状态:

示例代码

以下是一个简单的例子，展示了如何使用Flutster进行集成测试：

import 'package:flutster/flutster.dart';
import 'package:flutter/material.dart';

import 'flutster_navigator.dart';

void main() {
  const flutsterKey = String.fromEnvironment("flutsterKey");
  const flutsterUser = String.fromEnvironment("flutsterUser");
  const flutsterUrl = String.fromEnvironment("flutsterUrl");
  if (flutsterKey.isNotEmpty &&
      flutsterUser.isNotEmpty &&
      flutsterUrl.isNotEmpty) {
    FlutsterTestRecord.defaultRecord.apiUrl = flutsterUrl;
    FlutsterTestRecord.defaultRecord.apiUser = flutsterUser;
    FlutsterTestRecord.defaultRecord.apiKey = flutsterKey;
  } else {
    FlutsterTestRecord.defaultRecord.apiUrl = "https://flutster.com";
    FlutsterTestRecord.defaultRecord.apiUser = "YOUR FLUTSTER USER";
    FlutsterTestRecord.defaultRecord.apiKey = "YOUR FLUTSTER API KEY";
  }
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutster Recorder Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const SafeArea(
        child: MyHomePage(title: 'Flutster Recorder Example 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> {
  bool color = false;

  @override
  Widget build(BuildContext context) {
    return FlutsterScaffold(
      name: "exampleFlutsterTestRecorder",
      appBar: AppBar(
        title: Row(
          children: [
            Expanded(
                child: Text(widget.title, overflow: TextOverflow.ellipsis)),
            IconButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => const FlutsterNavigator()),
                  );
                },
                icon: const Icon(Icons.web))
          ],
        ),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          children: [
            Card(
              color: color ? Colors.yellow : Colors.white,
              child: IconButton(
                icon: const Icon(Icons.add_reaction),
                onPressed: () {
                  setState(() {
                    color = !color;
                  });
                },
              ),
            ),
            TextFormField(
              initialValue: "test",
              onChanged: (value) {},
            ),
            // 更多的TextFormField...
          ],
        ),
      ),
    );
  }
}

此代码段演示了如何配置和使用Flutster进行集成测试，包括设置API密钥、初始化应用程序以及创建可测试的小部件。