如何通过Flutter集成测试操作Stripe CardField组件？

问题概述 #

在Flutter应用中使用Stripe CardField组件时，集成测试阶段无法通过常规的find.byType、find.byKey等方法获取可执行enterText的Finder。拆解组件结构后仅能定位到AndroidViewSurface，但该组件不支持文本输入操作；尝试点击偏移、发送按键事件等方法也无法成功输入卡号。

复现步骤：

1. 视图中添加CardField：

CardField(
  onCardChanged: (card) {
    setState(() {});
  },
),

2. 测试代码执行输入（会崩溃或无效）：

final cardfieldSurface = find.byType(AndroidViewSurface).first;
await tester.enterText(cardfieldSurface, "4242");
await Future.delayed(const Duration(seconds: 10));

可行解决方案 #

方案1：测试环境替换为模拟CardField #

由于真实CardField是原生视图，Flutter测试框架无法直接交互，最稳定的方式是在测试环境下替换为自定义的Flutter TextField组件：

1. 编写模拟组件：

class MockCardField extends StatelessWidget {
  final ValueChanged<CardFieldInputDetails?> onCardChanged;
  static const mockKey = Key('mock_card_field');

  const MockCardField({super.key, required this.onCardChanged});

  @override
  Widget build(BuildContext context) {
    return TextField(
      key: mockKey,
      onChanged: (value) {
        onCardChanged(CardFieldInputDetails(
          number: value,
          expiryMonth: '',
          expiryYear: '',
          cvc: '',
        ));
      },
      decoration: const InputDecoration(hintText: '请输入卡号'),
    );
  }
}

2. 条件渲染替换真实组件：

Widget buildPaymentField() {
  if (kDebugMode && kTestMode) { // 仅测试环境启用
    return MockCardField(onCardChanged: (card) {
      setState(() {});
    });
  } else {
    return CardField(
      onCardChanged: (card) {
        setState(() {});
      },
    );
  }
}

3. 测试中直接操作模拟组件：

final mockCardField = find.byKey(MockCardField.mockKey);
await tester.enterText(mockCardField, '4242424242424242');
await tester.pumpAndSettle();

方案2：通过平台通道调用原生输入逻辑 #

若必须使用真实CardField，可通过Flutter平台通道让原生端直接操作输入框：

1. Flutter测试代码中发送调用指令：

const cardTestChannel = MethodChannel('your_app/cardfield_test');

await cardTestChannel.invokeMethod(
  'enterCardNumber',
  {'cardNumber': '4242424242424242'},
);
await tester.pumpAndSettle();

2. Android原生端实现方法处理：

// 在测试Activity或FlutterEngine配置中添加通道处理
MethodChannel(flutterEngine.dartExecutor.binaryMessenger, "your_app/cardfield_test")
    .setMethodCallHandler { call, result ->
        when (call.method) {
            "enterCardNumber" -> {
                val cardNumber = call.argument<String>("cardNumber")
                // 找到CardField对应的原生视图
                val cardInputView = findViewById<com.stripe.android.view.CardInputView>(R.id.stripe_card_field)
                cardInputView.setCardNumber(cardNumber)
                result.success(null)
            }
            else -> result.notImplemented()
        }
    }

方案3：使用Flutter Driver进行原生交互（针对集成测试） #

若采用Flutter Driver而非Widget测试，可尝试以下步骤：

// 先点击CardField获取焦点
await driver.tap(find.byType('AndroidViewSurface'));
await driver.waitFor(find.text('Card number')); // 等待焦点激活
// 直接发送文本
await driver.enterText('4242424242424242');
await driver.pumpAndSettle();

注：该方法依赖视图类型和焦点状态，稳定性略逊于模拟组件方案。

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