Flutter集成测试实操：表单UI测试案例与执行方法

First things first: to use find.byValueKey in your tests, you need to assign unique Key widgets to your TextFormField components. Right now, your form doesn't have these keys, so let's fix that first.

Step 1: Add Unique Keys to Your Form Widgets #

Update your form code to include the keys that match the ones you're using in your test:

mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
  new Text(
    'You have pushed the button this many times:',
  ),
  new TextFormField(
    key: Key('usernametextfield'), // Add this unique key
    decoration: new InputDecoration(
      labelText: 'Enter your username'
    ),
  ),
  new TextFormField(
    key: Key('phone'), // Add this unique key
    decoration: new InputDecoration(
      labelText: 'Enter your phone number'
    ),
    keyboardType: TextInputType.number,
  ),
  new Text(
    '$_counter',
    style: Theme.of(context).textTheme.display1,
  ),
],

Step 2: Complete the Test Input Steps #

Now you can fill in the missing parts of your test. All interactions with the driver are asynchronous, so make sure to use await for each operation:

import 'package:flutter_driver/flutter_driver.dart';
import 'package:test/test.dart';

void main() {
  FlutterDriver driver;

  setUpAll(() async {
    driver = await FlutterDriver.connect();
  });

  tearDownAll(() async {
    if(driver != null){
      driver.close();
    }
  });

  test('fill form fields and verify input', () async {
    final SerializableFinder username = find.byValueKey('usernametextfield');
    expect(username, isNotNull);
    
    // Insert value into username field
    await driver.tap(username); // Focus the text field
    await driver.enterText('test_user_123'); // Input your test username
    // Verify the text was entered correctly
    expect(await driver.getText(username), 'test_user_123');

    final SerializableFinder phonenumber = find.byValueKey('phone');
    expect(phonenumber, isNotNull);
    
    // Insert value into phone number field
    await driver.tap(phonenumber); // Focus the numeric field
    await driver.enterText('5551234567'); // Input your test phone number
    // Verify the text was entered correctly
    expect(await driver.getText(phonenumber), '5551234567');
  });
}

Step 3: Set Up the Integration Test Entry Point #

Flutter requires a separate entry point to run your app in profile mode for integration tests. Create a test_driver directory in your project root, then add a file named app.dart with this code:

import 'package:flutter_driver/driver_extension.dart';
import 'package:your_app_package_name/main.dart' as app;

void main() {
  enableFlutterDriverExtension();
  app.main();
}

Replace your_app_package_name with the actual package name from your pubspec.yaml file.

Step 4: Ensure Dependencies Are Added #

Double-check that your pubspec.yaml includes the necessary dev dependencies:

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_driver:
    sdk: flutter
  test: any

Run flutter pub get in your terminal to install these dependencies if you haven't already.

Step 5: Run the Test #

1. Make sure you have an emulator running or a physical device connected to your computer.
2. Open your terminal and run this command:

flutter drive --target=test_driver/app.dart

This will build your app in profile mode, deploy it to the device, and execute your test suite. You'll see the test results in the terminal once it's complete.

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