Flutter用户中心定位插件flutter_finder_usercentric的使用

Flutter用户中心定位插件flutter_finder_usercentric的使用

flutter_finder_usercentric 是一个用于在Flutter应用中通过语义角色（如按钮、文本框等）和语义标签来查找元素的插件。它可以帮助开发者更方便地进行UI测试，确保应用的可访问性和用户体验。

如何使用？

下面是一个完整的示例Demo，展示了如何使用 flutter_finder_usercentric 插件来查找不同类型的UI元素，并进行相应的测试。

1. 创建一个简单的Flutter应用

首先，我们创建一个包含多种UI组件的应用，包括 TextField、Slider、FloatingActionButton 和 ElevatedButton 等。

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

class TestApp extends StatelessWidget {
  TestApp({super.key});
  final TextEditingController controller = TextEditingController();
  final double _currentSliderValue = 20;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test App',
      home: Scaffold(
        body: Column(
          children: [
            // 简单的文本框
            TextField(
              key: const Key('SimpleTextFieldKey'),
              controller: controller,
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                hintText: 'Simple TextField',
              ),
            ),
            // 另一个简单的文本框
            TextField(
              key: const Key('AnotherSimpleTextFieldKey'),
              controller: controller,
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                hintText: 'Another Simple TextField',
              ),
            ),
            // 合并语义的滑块
            MergeSemantics(
              key: const Key("SimpleSliderKey"),
              child: Row(
                children: [
                  const Text("Simple slider"),
                  Slider(
                    value: _currentSliderValue,
                    max: 100,
                    divisions: 5,
                    label: _currentSliderValue.round().toString(),
                    onChanged: (double value) {},
                  )
                ],
              ),
            ),
            // 带有提示信息的浮动按钮
            FloatingActionButton(
              key: const Key('SimpleFloatingActionButtonTooltipKey'),
              tooltip: 'SimpleFloatingActionButtonTooltip',
              onPressed: () {},
            ),
            // 简单的 ElevatedButton
            ElevatedButton(
              onPressed: () {},
              key: const Key('SimpleElevatedButtonKey'),
              child: const Text('SimpleElevatedButtonText'),
            ),
            // 带有提示信息的 ElevatedButton
            Tooltip(
              message: "ElevatedButtonWithTooltip",
              child: ElevatedButton(
                onPressed: () {},
                key: const Key('ElevatedButtonWithTooltipKey'),
                child: const Text('ElevatedButtonWithTooltipText'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

2. 编写测试代码

接下来，我们编写测试代码，使用 flutter_finder_usercentric 插件来查找和验证这些UI元素。

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:flutter_finder_usercentric/finder.dart';

void main() {
  testWidgets('通过可访问名称查找元素', (tester) async {
    await tester.pumpWidget(TestApp());

    // 查找带有特定文本的 ElevatedButton
    var finderByAccessibleName = find.byAccessibleName("SimpleElevatedButtonText");
    expect(finderByAccessibleName, findsOneWidget);
    expectKey(finderByAccessibleName, "ElevatedButton", "SimpleElevatedButtonKey");

    // 查找带有特定提示信息的 ElevatedButton
    var tooltipFinder = find.byAccessibleName("ElevatedButtonWithTooltip");
    expect(tooltipFinder, findsOneWidget);
    expect((tester.widget(tooltipFinder) as Tooltip).message, "ElevatedButtonWithTooltip");
  });

  testWidgets('通过可访问角色和名称查找元素', (tester) async {
    await tester.pumpWidget(TestApp());

    // 查找带有特定文本的 ElevatedButton
    var finderByAccessibleRoleAndName = find.byAccessibleRoleAndName(
      tester, 
      AccessibleRole.button, 
      "SimpleElevatedButtonText"
    );
    expect(finderByAccessibleRoleAndName, findsOneWidget);
    expectKey(finderByAccessibleRoleAndName, "ElevatedButton", "SimpleElevatedButtonKey");

    // 查找带有特定文本的 TextField
    var textFieldFinder = find.byAccessibleRoleAndName(
      tester, 
      AccessibleRole.textField, 
      "Simple TextField"
    );
    expect(textFieldFinder, findsOneWidget);
    expectKey(textFieldFinder, "TextField", "SimpleTextFieldKey");

    // 查找带有特定文本的 Slider
    var sliderFinder = find.byAccessibleRoleAndName(
      tester, 
      AccessibleRole.slider, 
      "Simple slider"
    );
    expect(sliderFinder, findsOneWidget);
    expect(sliderFinder.found.first.widget.key, const Key("SimpleSliderKey"));

    // 查找带有特定提示信息的 FloatingActionButton
    var floatingActionButtonFinder = find.byAccessibleRoleAndName(
      tester, 
      AccessibleRole.button, 
      "SimpleFloatingActionButtonTooltip"
    );
    expect(floatingActionButtonFinder, findsOneWidget);
    expect((tester.widget(floatingActionButtonFinder) as Tooltip).message, "SimpleFloatingActionButtonTooltip");
  });

  testWidgets('查找不存在的元素', (tester) async {
    await tester.pumpWidget(TestApp());

    // 查找不存在的元素
    var nonExistingFinder = find.byAccessibleName("NonExisting");
    expect(nonExistingFinder, findsNothing);

    // 查找不存在的 TextField
    var nonExistingTextFieldFinder = find.byAccessibleRoleAndName(
      tester, 
      AccessibleRole.textField, 
      "NonExisting"
    );
    expect(nonExistingTextFieldFinder, findsNothing);

    // 查找不存在的 Button
    var nonExistingButtonFinder = find.byAccessibleRoleAndName(
      tester, 
      AccessibleRole.button, 
      "NonExisting"
    );
    expect(nonExistingButtonFinder, findsNothing);
  });
}

// 辅助函数：检查元素的类型和键是否匹配
void expectKey(Finder finder, String type, String key) {
  expect(
    find.ancestor(
      of: finder,
      matching: find.byWidgetPredicate((widget) =>
          widget.runtimeType.toString() == type && widget.key == Key(key)),
    ),
    findsOneWidget,
  );
}