Flutter Web Testing
with O2

Built for Flutter's canvas-based architecture. O2 intelligently discovers and interacts with UI elements using Flutter semantics and visual reasoning—without writing automation scripts.

IDEExtension

Install the DevAssure O2 extension in your editor of choice — VS Code, Cursor, or Anti Gravity.

Also works with
Why Flutter web is different

When the DOM is just canvas.

Traditional web apps expose every button and field as an addressable HTML element. Flutter web paints its entire interface onto a single canvas instead, leaving automation tools without reliable elements to select or interact with.

React / Vue / Angular

The DOM you expect

Buttons and inputs live in the HTML DOM. getByRole, getByText, and XPath all work reliably.

Flutter Web · CanvasKit

The DOM you get

The entire visual UI is painted into a <canvas>. CSS and XPath selectors return nothing. Your login button is invisible to automation.

DevAssure O2

O2 - The hidden layer

DevAssure O2 doesnot read the DOM. It uses visual reasoning for element-level interaction in the canvas.

How O2 works on Flutter web

One agent. Zero scripts.

When traditional DOM structures are hidden, the O2 agent uses adaptive visual reasoning to identify the UI elements rendered.

Flutter web appCanvasKit rendered in a real browser
DevAssure O2Discovers Flutter UI elements, understands user interactions, and automates end-to-end testing.
Mode

Visual canvas reasoning

When the DOM is not exposed, O2 identifies UI elements by visual appearance — "the email field below the logo" or "the Login button". Not coordinate clicking. Adaptive reasoning.

Always

Scriptless E2E Test authoring

Tests are plain-English YAML. No selectors, no coordinate maps, no Dart test code. Write what a user would do — O2 figures out how.

What O2 validates

More than just “did it click the button.”

Business flow validation

Login, navigation, form submission, and dashboard verification — the full user journey, not just individual element checks.

Login flowpass
Dashboard renderpass
Form submissionpass
Session: 3 flows tested

Console & network checks

Every run captures console errors and validates network responses — catching deployment issues.

Console errorspass
Auth API · 200 OKpass
flt-glass-pane detectedpass
Network: all healthy

Screenshot & visual record

Session screenshots attach to every test result — a visual record of what the agent saw and interacted with in the canvas.

screenshot-login.pngsync
screenshot-dashboard.pngsync
Attached to run #241
Canvas state captured

Stop fighting your Flutter renderer. Start shipping.

FAQs

Frequently asked questions

Everything you need to know about DevAssure, PR testing, and CI integration.

Most production Flutter web apps use the CanvasKit or skwasm renderer, which paints the entire UI into a <canvas> element. Buttons, inputs, and labels don't exist as HTML elements — they're pixels on a canvas. Standard CSS, XPath, and role selectors return nothing.

O2 falls back to visual canvas reasoning. It captures screenshots and identifies UI elements by their visual appearance — understanding 'the email field below the logo' or 'the blue Login button' — and interacts with them the way a user would. This is adaptive visual reasoning, not brittle coordinate clicking.

Yes. Build your Flutter web app, serve it locally, and point O2 at the URL. The same test goals and YAML files that work interactively work in any CI pipeline — GitHub Actions, GitLab CI, Jenkins, and others.

Flutter exposes a hidden accessibility tree via the <flt-semantics-host> element that maps widgets to labels, roles, and interaction targets. DevAssure O2 reads this tree directly — allowing element-level interactions by semantic properties, without writing custom test hooks.

No. O2 works as a black-box agent against any deployed Flutter web app, whether you own the source or not. Adding Semantics widgets or widget keys improves reliability but isn't required.

Both serve different roles. Flutter integration tests give you deterministic widget-level coverage owned by the dev team. DevAssure O2 gives you scriptless E2E, PR validation, and black-box coverage of canvas-rendered flows. The recommended approach is to use both in a layered stack.