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)?

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)?

• javascript
• html
• selenium
• flutter
• flutter-web

• Hi @Martin, what exactly are you trying to achieve? Are you trying to use Selenium and cannot reference the item? Or are you modifying the DOM structure / HTML? Any chance you can share some example HTML of what is and what should be? Also, examples of what exactly you are hoping to do? Thank you. – Lefty G Balogh Commented Feb 3, 2020 at 13:37
• 1 I would like to identify individual HTML elements and the widgets they represent. I want to (easily) end to end test the HTML output of a Flutter Web app the way we are used to do. It is a large part of the requirement for us to switch to Flutter Web. – Martin Kersten Commented Feb 3, 2020 at 17:21
• Maybe you should give a try with Puppeteer or Cypress. I've had some hard times using Selenium web driver in the past. – Christos Lytras Commented Feb 3, 2020 at 19:35
• 1 I checked out the way tests are written under both testing frameworks. Using those I would suffer the same problem. Flutter does not add anything to the HTML to make identifying certain Widgets reliablely possible. – Martin Kersten Commented Feb 4, 2020 at 8:57
• 1 @LeftyGBalogh You are not wrong. Xpath approach will work with selenium as well, but imagine flutter team introducing a new element in between and the whole test suite will require an update unless a wildcard logic is used within the xpath. – Abhilash Chandran Commented Feb 4, 2020 at 14:37

2 Answers 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

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./flutter-munity/testing-flutter-ui-with-flutter-driver-c1583681e337
• https://api.flutter.dev/flutter/flutter_driver/flutter_driver-library.html