Why can't Selenium or Playwright find buttons in a Flutter web app?

Many Flutter web apps render the UI into a canvas (CanvasKit or skwasm) instead of exposing normal HTML elements. Selenium and Playwright rely on the DOM, so role, text, CSS, and XPath selectors often fail because the controls are painted on canvas, not represented as or tags.

What is the best way to test a Flutter web app?

Use a layered strategy: Flutter integration tests for deterministic widget-level coverage, Playwright for browser-level checks (console, network, deployment), staging-only dev test hooks when you need stable browser automation, and an agent like DevAssure O2 for scriptless E2E on canvas-rendered flows.

Does Flutter integration testing work for web apps?

Yes. Flutter's integration_test package drives the widget tree directly via find.byKey() and find.text(), so it does not depend on the browser DOM. Add stable Key values to important widgets for long-term stability.

Is coordinate-based testing a good option for Flutter web?

Only as a short-term fallback. Clicking fixed x/y positions works when the DOM is just a canvas, but tests break on layout, resolution, zoom, and responsive changes. Prefer integration tests, dev hooks, or agent-based testing for maintainability.

What are Flutter dev test hooks?

Test-only JavaScript APIs exposed from the Flutter app (e.g. window.devTest.login) via dart:js interop. Playwright or Selenium call them through page.evaluate(). Enable only in staging builds with --dart-define=ENABLE_TEST_HOOKS=true — never in production.

How does DevAssure help test canvas-rendered Flutter web apps?

DevAssure O2 uses a hybrid approach: it can unlock the Flutter DOM via Flutter's accessibility tree (flt-semantics-host) for stable element-level automation, and fall back to visual reasoning over the canvas when the DOM is not exposed. Tests are written in natural language — no Playwright scripts or coordinate hacks required.

2 posts tagged with "Canvas Test Automation"

Flutter Web Apps and E2E Testing: What Works When the DOM Is Just Canvas

Santhosh Selladurai

Co-Founder and CTO, DevAssure

Short answer

Flutter web often paints the UI on a canvas, so Selenium and Playwright cannot see buttons or inputs in the DOM. DevAssure O2 unlocks the Flutter DOM via the accessibility tree and uses visual reasoning on the canvas when the DOM is not exposed — enabling scriptless automation where traditional tools fail.

Flutter is popular for building cross-platform applications from a single codebase. The same Dart code can target Android, iOS, desktop, and the web. But when it comes to end-to-end testing Flutter web apps, teams often hit a frustrating problem:

"Why can't Selenium or Playwright see my buttons, text fields, dropdowns, and labels?"

The short answer: many Flutter web apps render the UI into a canvas instead of exposing normal HTML elements. That changes how testing needs to be approached.

This post explains how Flutter web works internally, why the DOM is often not useful for automation, and practical options for testing — including how the DevAssure O2 agent unlocks the Flutter DOM for element-level automation and applies visual reasoning over the canvas when selectors are unavailable. If you are new to canvas automation, start with our guides on canvas test automation and Flutter web automation without image-based hacks.

Canvas Test Automation | DevAssure

Divya Manohar

Co-Founder and CEO, DevAssure

The canvas element is a part of HTML5 that allows for dynamic, scriptable rendering of 2D shapes and bitmap images. The objects inside a canvas are not accessible using the DOM hence element locators like ID, CSS, Xpath, classname etc cannot be used to locate and interact with the objects on canvas. The only way to perform automation on a canvas is to use the coordinates in the view port of the browser to interact with the objects in the canvas.