skills.rest
yunior123
yunior123COMMUNITY
Explore all skills by this author →
WebsiteGitHub

flutter-semantics-playwright

Guides writing Playwright E2E tests against Flutter Web semantics DOM trees.

Updated Mar 9, 2026
Search Tags:#web testing#playwright#e2e testing#flutter#semantics#selectors#aria-label
One-click install
npx skills add https://github.com/yunior123/origna_gta_firebase --skill flutter-semantics-playwright-yunior123
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flutter-semantics-playwright
Source: https://github.com/yunior123/origna_gta_firebase/tree/main/.claude/skills/flutter-semantics-playwright
Command: npx skills add https://github.com/yunior123/origna_gta_firebase --skill flutter-semantics-playwright-yunior123

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Flutter Web renders UI to a canvas, so standard Playwright selectors cannot target widgets. This Skill explains how to use the parallel flt-semantics DOM tree with aria-labels and roles so E2E tests can reliably locate and interact with Flutter elements. ## Core Features & Use Cases - Selector Mapping: Documents how Flutter Semantics labels, tooltips, and roles map to aria-label, role, and aria-checked attributes in the DOM. - Naming Convention: Defines kebab-case label prefixes (btn-, input-, chk-, link-, nav-*) for consistent, testable widget identifiers. - Helper Library Usage: Covers the e2e/flutter-helpers.ts functions such as waitForFlutter, flutterButton, fillFlutterInput, and productCard. - Use Case: When a Playwright test cannot click a Flutter button rendered on canvas, apply the documented Semantics wrapping pattern and target it via page.locator('[aria-label="btn-place-order"]'). ## Quick Start Ask the assistant to write a Playwright test that logs in and places an order using the flutter-helpers selectors and semantics labels.

Frequently Asked Questions about flutter-semantics-playwright

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I test Flutter Web apps with Playwright?▼

Flutter Web renders to canvas, so Playwright targets the parallel flt-semantics DOM tree instead. Enable semantics with SemanticsBinding.instance.ensureSemantics() in main.dart, then select elements by aria-label or role using page.locator or getByRole.

How do Flutter Semantics labels map to DOM attributes?▼

Semantics(label: 'x') produces aria-label="x" on a flt-semantics element. button: true maps to role="button", link: true to role="link", and checked: true to role="checkbox" with aria-checked. IconButton tooltips also auto-generate aria-labels.

Why can't Playwright click Flutter canvas elements?▼

Canvas pixels have no DOM representation, so coordinate-based clicks are unreliable. Always target flt-semantics elements via aria-label selectors, which Flutter generates when semantics is force-enabled in the web build.

Do Flutter widget Keys appear in the DOM for testing?▼

No, Flutter Keys are internal to the framework and never appear in the DOM. Use Semantics labels or InputDecoration labelText instead, which generate aria-label attributes that Playwright can match exactly or partially.

Is the Tab-key hack needed to enable Flutter semantics?▼

No, the Tab-key workaround is unnecessary when semantics is force-enabled via SemanticsBinding.instance.ensureSemantics() in main.dart. This keeps the semantics tree always active for web builds without user interaction.

Related Skills

Explore More Software Engineering Skills→
sgcarstrendssgcarstrends
21

component-naming

Enforce PascalCase domain+role naming for React components.

Official
Basic
awfixers-stuffawfixers-stuff

e2e

Classify Playwright and Vitest end-to-end test failures as flaky, outdated, bug, or unverified.

Official
Advanced
EndavaEndava
160

fix-accessibility

Audit and fix accessibility issues in BEEQ StencilJS components.

Official
Advanced
22Teikk22Teikk

flutter-e2e

Writes and runs Flutter end-to-end journey tests with the integration_test package on real devices.

Community
Advanced