How to use flutter integration testing to complete the Swipe CardField widget
06:42 21 Jun 2023

I have a Stripe CardField widget in my app. I am using flutter integration tests and would normally use something like find.byType, or find.byKey, etc, etc, but with CardField, none of the find options seems to work to return a finder which I can then use 'enterText' on.

I have already tried the great idea here https://docs.flutter.dev/cookbook/testing/widget/finders, by running the test with a breakpoint, then tapping the CardField element, and the Terminal shows a list of about 6 different 'byType' options to try. None of them allow the 'enterText' without crashing the test.

I have also deepdived into the CardField widget to try and find a child TextField or TextFormField, but I always seem to land on a 'AndroidViewSurface' which doesn't work for enterText.

To replicate, add a CardField to a view;

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

And then run a test;

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

I have now also tried a few other things...

await tester.tapAt(const Offset(90, 170));
await tester.pumpAndSettle();

This actually successfully gets focus onto the Card Number field if you are very precise about tapping in the CardField widget but not exactly in the Card Number 'TextField'. So I tried the same approach to tap on the numbers on the numberpad but no luck, the 'target' image appears showing taps higher than the keyboard when Y offset is low, but when the Y offset is where the numberpad is, the 'target' image doesn't show, so I assume the taps are happening 'underneath' the numberpad.

I have also tried variations of;

tester.sendKeyEvent(LogicalKeyboardKey.numpad2,
  platform: Platform.operatingSystem, character: "2");

But no text appears in the Card Number field.

flutter stripe-payments integration-testing