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 by its id or name attribute. The widget key is not present in the HTML document.

I manage to use Text widget contents to find an widget's text portion and can find its parent element representing the widget containing the text but this fails for images, canvas etc.

Is there any mechanism I can use to add id/name (or any other means of identification) to the HTML tag soup?

Using JavaScript, is there a way to traverse the internal logical widget tree and from there conclude the representing HTML element (for example by its location and size)?

Solution 1

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

Solution 2

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

Comments

[Martin Kersten]

I would rather use image 'recognition' like I use for the mobile app testing. The tool stack we use to describe our web tests / E+E does not work well with flutter testing capabilities (or we still miss a point).