Flutter Driver中如何点击富文本内的TextSpan组件？

Flutter Driver 仅支持定位 Widget 树中的节点，TextSpan 是 Text.rich 内部的文本渲染片段，不属于 Widget 类型，因此没有原生的直接定位API，可通过以下两种方案实现点击：

方案1：不改动业务代码，通过坐标偏移点击（适合测试侧临时实现） #

步骤1：给富文本父组件添加唯一 Key #

修改业务层 Text.rich 代码，添加测试用唯一标识：

Padding(
      padding: const EdgeInsets.only(top: 16.0, bottom: 24.0),
      child: Text.rich(
        // 添加唯一key，供Driver定位父组件
        key: const Key('refillRichText'),
        TextSpan(
          text: s.refill_description,
          style: primaryTextTheme.textSmall,
          children: [
            if (user.paymentDetails?.type == LegalEntityType.private)
              TextSpan(
                text: s.withdraw_label,
                style: primaryTextTheme.textSmall.copyWith(color: FlAppStyles.linkTextColor),
                recognizer: TapGestureRecognizer()..onTap = () => showRefundScreen(context),
              )
          ],
        ),
      ),
    )

步骤2：Driver 侧通过偏移点击 #

测试代码中先定位父组件，再计算可点击区域的坐标执行点击：

// 定位富文本父组件
final richTextFinder = find.byValueKey('refillRichText');
// 等待组件渲染完成
await driver.waitFor(richTextFinder);
// 获取组件的左上角坐标与尺寸
final richTextTopLeft = await driver.getTopLeft(richTextFinder);
final richTextSize = await driver.getSize(richTextFinder);

// 计算点击偏移：x轴取富文本宽度的80%（确保落在第二个TextSpan区域），y轴取组件高度中点
final tapOffset = Offset(
  richTextTopLeft.dx + richTextSize.width * 0.8,
  richTextTopLeft.dy + richTextSize.height / 2,
);
// 执行点击
await driver.tapAt(tapOffset);

如果需要更高精度，可以根据第一段普通文本的字符数、字体大小计算出第一段文本的宽度，替换上述的比例偏移即可。

方案2：修改业务代码，将可点击片段转为 Widget 节点（优先推荐，长期维护成本更低） #

将可点击的 TextSpan 替换为 WidgetSpan 包裹的 Text 组件，使其成为独立 Widget 节点，可直接添加 Key 供 Driver 定位：

Padding(
      padding: const EdgeInsets.only(top: 16.0, bottom: 24.0),
      child: Text.rich(
        TextSpan(
          text: s.refill_description,
          style: primaryTextTheme.textSmall,
          children: [
            if (user.paymentDetails?.type == LegalEntityType.private)
              // 用WidgetSpan包裹可点击文本，转为Widget节点
              WidgetSpan(
                child: GestureDetector(
                  key: const Key('withdrawLink'),
                  onTap: () => showRefundScreen(context),
                  child: Text(
                    s.withdraw_label,
                    style: primaryTextTheme.textSmall.copyWith(color: FlAppStyles.linkTextColor),
                  ),
                ),
              )
          ],
        ),
      ),
    )

修改后 Driver 侧可直接定位点击，无需计算偏移：

await driver.tap(find.byValueKey('withdrawLink'));

内容的提问来源于stack exchange，提问作者harusama