Submit TextField in Flutter integration test

Question

I have a simple text field that does something when the user submits the value in the text field:

TextField(
        textInputAction: TextInputAction.search,
        onSubmitted: onSearchEmail,
      )

Simple enough... I'm trying to write an integration test that checks the action is performed when the user submits the text field - however i can't work out how to simulate the user pressing the 'search' button on the keyboard (android) or whatever the equivalent in iOS is...

I naively tried driver.enterText("a@b.c\r\n"); to no avail.

My integration test:

test('entering email performs a search', () async {
  driver.tap(find.byValueKey('search-email-search-box'));
  driver.enterText("a@b.c\r\n"); // <- doesn't work
  await driver.waitFor(find.text("some text));
});

I don't really want a button on the screen that the user has to press, the keyboard button works fine.

Edit: Just to clarify - the text IS entered into the field so that bit works, its just the submission that doesn't.

Can you show how are you finding `searchEmailSearchBoxFinder` ? — Darshan, Mar 11 '19 at 14:43
No, its just not performing the search. Manually, when i enter text and press the search button on the keyboard, it triggers the `onSubmitted` method on the `TextField`. — OliverDeLange, Mar 11 '19 at 16:47
I have exactly the same problem. Here's the Github issue I've created for the problem: https://github.com/flutter/flutter/issues/29450 — CiriousJoker, Mar 15 '19 at 20:45
I was able to submit the textfield using this https://stackoverflow.com/questions/54538603/how-to-mimic-a-pressing-enter-on-a-textfield-in-flutter-tests — Evaldo Bratti, May 14 '19 at 14:17

score 4 · Answer 1 · answered Aug 23 '21 at 18:21

Flutter Driver still doesn't have a function to trigger onFieldSubmitted. I followed the workaround mentioned here to trigger a TextInputAction. The workaround is applicable with integration_test - the current recommended method to write integration tests in Flutter.

Let the target test script be:

i.e. located in /integration_test/foo_test.dart

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:integration_test/integration_test.dart';
import 'package:sample55101120/main.dart' as app;

void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  testWidgets("TextFormField Test", (WidgetTester tester) async {
    // Build the app and trigger a frame.
    await tester.pumpWidget(app.MyApp());

    /// Find TextFormField widget by Key and enter text
    await tester.enterText(find.byKey(Key('search-email-search-box')), 'a@b.c');
    await tester.testTextInput.receiveAction(TextInputAction.done);
    await tester.pump();

    expect(find.text('a@b.c'), findsOneWidget);
  });
}

Let test_driver/integration_test.dart be

import 'package:integration_test/integration_test_driver.dart';

Future<void> main() => integrationDriver();

As for the sample app that I've used:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void onSearchEmail(String value){
    debugPrint('onSearchEmail $value');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextFormField(
              key: Key('search-email-search-box'),
              textInputAction: TextInputAction.search,
              onFieldSubmitted: (String value) => onSearchEmail(value),
            ),
          ],
        ),
      ),
    );
  }
}

To run this sample:

flutter drive --target=integration_test/foo_test.dart --driver=test_driver/integration_test.dart

Omatt thanks worked like a charm..!! – Rajesh Patil Nov 08 '21 at 07:26 — Rajesh Patil, Nov 08 '21 at 07:26

Submit TextField in Flutter integration test

1 Answers1