Flutter UI测试：如何点击RichText内指定TextSpan并区分点击

在Flutter里要测试RichText中特定TextSpan的点击行为，主要有两种实用方案，具体如下：

方案一：通过文本位置计算点击坐标（无需修改UI代码） #

利用RichText的渲染对象定位目标文本的位置，再计算点击坐标，步骤如下：

1. 通过组件key找到目标RichText；
2. 获取其渲染对象RenderRichText，计算目标文本在整体文本中的偏移范围；
3. 根据文本范围获取对应的区域矩形，取中心坐标执行点击操作。

对应的测试代码示例：

testWidgets('点击RichText中的斜体文本', (tester) async {
  await tester.pumpWidget(你的测试根Widget); // 替换为实际测试组件

  // 定位目标RichText组件
  final richTextFinder = find.byKey(const Key("anyKey"));
  expect(richTextFinder, findsOneWidget);

  // 获取渲染对象
  final renderRichText = tester.renderObject<RenderRichText>(richTextFinder);
  
  // 定义目标文本并计算其在整体文本中的位置
  const targetText = "Text span in italic";
  final fullText = renderRichText.text.toPlainText();
  final startOffset = fullText.indexOf(targetText);
  final endOffset = startOffset + targetText.length;
  
  // 获取目标文本对应的区域矩形
  final textSelection = TextSelection(baseOffset: startOffset, extentOffset: endOffset);
  final targetRect = renderRichText.getBoxForSelection(textSelection);
  
  // 点击区域中心
  await tester.tapAt(targetRect.center);
  await tester.pumpAndSettle();

  // 此处添加断言，验证点击后的预期行为（例如检查actionOne是否被触发）
});

方案二：给目标TextSpan添加语义标签（需调整UI代码） #

通过给目标TextSpan添加语义标签，让测试代码能直接定位到可点击区域，更简洁直观：

第一步：修改UI代码，添加语义标签 #

TextSpan(
  text: "Text span in italic",
  recognizer: TapGestureRecognizer()
    ..onTap = () {
      ref.read(sampleActionProvider).actionOne();
    },
  semanticsLabel: "clickable_italic_text", // 自定义语义标签
)

第二步：编写测试代码 #

testWidgets('点击RichText中的斜体文本', (tester) async {
  await tester.pumpWidget(你的测试根Widget);

  // 通过语义标签直接定位目标区域
  final targetFinder = find.bySemanticsLabel("clickable_italic_text");
  expect(targetFinder, findsOneWidget);

  await tester.tap(targetFinder);
  await tester.pumpAndSettle();

  // 添加断言验证点击后的行为
});

方案对比 #

• 方案一：无需改动现有UI代码，适合快速测试已完成的组件，但需要处理文本位置计算逻辑；
• 方案二：测试代码更简洁易维护，但需要调整UI代码添加语义标记，适合新开发的组件或允许修改UI的场景。

内容的提问来源于stack exchange，提问作者kosiara - Bartosz Kosarzycki