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

Answer 2

I do not think it is right way to use any Selenium kind of testing framework for Flutter Web.

Reason for that is that you (as web developer) have no control on how generated DOM looks like. Which means you can not use XPath and other means to select elements.

I suppose the only way of testing Flutter apps (including Flutter Web) is using Flutter Driver: https://api.flutter.dev/flutter/flutter_driver/flutter_driver-library.html