How to Test Flutter Apps Using Accessibility Mode?

Testing Flutter applications with traditional automation tools can be challenging because Flutter uses canvas-based rendering. This makes it difficult to directly inspect or interact with elements like buttons and text during test recording or execution.

However, Flutter offers built-in accessibility support through a semantic tree, a separate structure used by screen readers to describe UI elements. This semantic tree enables automation tools to identify and interact with UI elements using attributes such as aria-label. This article discusses how to test flutter apps using accessibility mode.

Steps to Test Flutter Apps Using Accessibility Mode

1. Right-click anywhere on the Flutter app screen.
2. Select Inspect from the context menu.
3. In the Elements tab, look for a hidden element that looks like this:
4. Click on the hidden element so it becomes selected in the DOM.
5. Open the Console tab in DevTools.
6. Run the following command in the console to activate accessibility mode:

$0.click();

7. Check the Elements tab again. A whole new tree of elements will be added to the DOM. You should now see elements like:
8. Use these aria-label values to locate elements in your automation tests.
9. Start recording your test using your preferred automation tool.
10. Interact with the elements using their aria-label attributes.

11. Run your test. It should now successfully interact with the Flutter UI using accessibility-based locators.