Add id or name property or other means of identification for Flutter Web applications?

Question

Writing a Flutter Web application, I try to leverage a Web-UI-Testing framework based on Selenium. Sadly I fail to identify a HTML-Element representing a certain flutter widget

Answer 1

You currently can not consistently add identification information to Widgets rendering on different devices.

To achieve your goal however you can use Flutter Driver. The flutter_driver Dart package is specifically designed to enable UI testing of Flutter apps and provides an API to the apps on real devices, simulators or emulators. To get started with Flutter Driver testing you need to:

• Get the flutter_driver package
• Set up a test directory
• Create an instrumented app for testing
• Write UI tests using flutter_driver API
• Execute the UI tests in the real device or simulator

To find a Flutter widget you can use SerializableFinder, e.g.:

test('verify the text on home screen', () async {
    SerializableFinder message = find.text("Widget Title");
    await driver.waitFor(message);
    expect(await driver.getText(message), "Widget Title");
});

For more information check out:

• https://blog.codemagic.io/flutter-ui-testing/
• https://medium.com/flutter-community/testing-flutter-ui-with-flutter-driver-c1583681e337
• https://api.flutter.dev/flutter/flutter_driver/flutter_driver-library.html