作者 / Pierre-Louis Guide, Software Engineer for Material Flutter
Unit testing can ensure that all parts of the application work properly, but how to ensure that the entire application works properly? This requires integration testing.
Flutter driver
If you have never performed integration tests in Flutter (or other technology platforms), don't worry! In Flutter, you can easily add integration tests to your application. The following articles are very useful and can provide you with guidance.
Introduction to Integration Testing: What exactly is integration testing? How to set it up?
https://flutter.cn/docs/cookbook/testing/integration/introduction
Handling scrolling: How to deal with common scrolling patterns?
https://flutter.cn/docs/cookbook/testing/integration/scrolling
If your development work progresses to this point, you can ensure that: your application can run normally without crashing; you can access a given application screen; perform specific operations to get specific results, and so on. You can create specific tests according to your needs. You can create a test to open every screen of the application, or you can create some tests to complete a given user process.
However, we can go further and achieve performance testing through flutter_driver.
Performance analysis
Just use flutterDriver.traceAction to encapsulate the test, and you can record the performance of your application while running the test. The output data (JSON format) can be used in continuous integration (CI) testing to ensure that certain indicators are within the threshold range. In addition, this data can also be used to debug performance issues. For detailed instructions on how to perform performance analysis, please refer to the related article on integration testing.
Article: Performance Analysis
https://flutter.cn/docs/cookbook/testing/integration/profiling
Flutter Gallery provides an integration test for reference, which can traverse all demos and capture some of the demo performance indicators.
Integration test: Flutter Gallery
https://github.com/flutter/gallery/tree/master/test_driver
Screen shot test
Screen capture test refers to capturing a screenshot of the output, and then comparing the result with the expected image. Use flutterDriver.screenshot to easily add a screenshot test to your application. To learn more and see real code examples, please refer to the Medium article "Using Flutter Driver to Test the Flutter Interface" published by community member Darshan Kawar.
Use Flutter Driver to test the Flutter interface
https://medium.com/flutter-community/testing-flutter-ui-with-flutter-driver-c1583681e337
This method can be easily integrated into your continuous integration test setup to prevent interface rollbacks. Flutter Gallery provides several screenshot tests and a GitHub workflow configuration, which can be used to automatically test the new PR.
await pumpWidgetWithImages(
tester,
const GalleryApp(initialRoute: demoBannerRoute),
homeAssets,
);
await tester.pumpAndSettle();
await expectLater(
find.byType(GalleryApp),
matchesGoldenFile('goldens/demo_desktop_dark.png'),
);
△ Test used to check whether the rendering of a given route meets expectations
Screen shot test: Flutter Gallery
https://github.com/flutter/gallery/tree/master/golden_test
Workflow configuration
https://github.com/flutter/gallery/blob/master/.github/workflows/golden.yml
a11y test
The a11y (accessibility, accessibility) test is a usability test to ensure that the application can be used by people with functional impairments (for example, visual impairment, hearing impairment, movement impairment, etc.). You can use flutterDriver.getSemanticsId to verify semantic tags, for example, to ensure that all images have semantic tags.
final imageLabel = find.bySemanticsLabel('Company logo');
int id = await flutterDriver.getSemanticsId(imageLabel);
expect(id, isNotNull);
△ Test to ensure that images have semantic labels
To learn more about accessibility testing, please refer to another wonderful article published by Darshan Kawar: "Develop and Test Accessible Applications with Flutter".
Develop and test accessible applications with Flutter
https://medium.com/flutter-community/developing-and-testing-accessible-app-in-flutter-1dc1d33c7eea
i18n test
The i18n (internationalization) test ensures that the application can be used in various languages and regions without any changes.
According to the localization code you set, you can use the localization delegate method to change the locale.
ExampleAppLocalizationsDelegate.load(Locale(‘fr’));
Or, when using MaterialApp, you only need to cover the locale of the application to run it in a different locale.
void main() {
runApp(const ExampleApp());
}
class ExampleApp extends StatelessWidget {
const ExampleApp({
Key key,
this.locale,
}) : super(key: key);
final Locale locale;
@override
Widget build(BuildContext context) {
return MaterialApp(
locale: locale,
...
);
}
}
Set the locale in the driver file that starts the application.
void main() {
runApp(const ExampleApp(locale: Locale('fr')));
}
Special Note
Want to know if an element is on the page?
/// Returns a [Future] that resolves to true if the widget specified by [finder]
/// is present, false otherwise.
Future<bool> isPresent(SerializableFinder finder, FlutterDriver driver,
{Duration timeout = const Duration(seconds: 1)}) async {
try {
await flutterDriver.waitFor(finder, timeout: timeout);
return true;
} catch (exception) {
return false;
}
}
This embodiment of △: Darshan (https://stackoverflow.com/a/56660080)
You can set the timeout period according to your application.
Concluding remarks
Now, you should have a good understanding of what flutter_driver can do. You can combine multiple methods according to your needs; for example, use different locales to perform screen capture tests. If we have missed anything, please let us know in the comments! Please refer to the flutter_driver API documentation for further details.
flutter_driver
https://api.flutter.cn/flutter/flutter_driver/flutter_driver-library.html
Recommended reading
Click the screen at the end | read read the original article | access Flutter Chinese developer community resources