Frontend with Playwright — SKILL 入口

Validate frontend DOM and CSS interactions using Playwright by applying a read-before-write discipline to verify actual DOM topology, measuring live layout values, and running deterministic checks to catch rendering issues across vanilla HTML, Vue, React, and jQuery.

CSS layout breaks when framework rendering modifies the DOM because assumptions about DOM topology become stale. Using Playwright to verify the actual DOM structure before writing CSS ensures styling rules are grounded in the real rendered topology, preventing framework interference.

The read-before-write workflow for frontend testing is a discipline that verifies the actual DOM topology and live CSS measurements before writing or modifying styling and JavaScript. This approach grounds changes in real structure and reduces guesswork during frontend validation.

Yes, you can use Playwright to test frontend interactions across React and Vue. The skill provides framework-coexistence guidelines and a three-position verification protocol with reference scenarios to validate DOM structure and rendering issues for both modern frameworks and vanilla JS.

The best way to test DOM state changes without inline styles is to separate concerns by keeping styling in CSS and using JavaScript only to toggle state. Playwright then validates these interactions by measuring live DOM evaluations and confirming the CSS-first approach works deterministically.

Yes, Playwright frontend verification works with jQuery and vanilla JavaScript. The skill applies a three-position verification protocol with a reference set to cover common tasks, ensuring deterministic layout and interaction testing across vanilla HTML/CSS/JS and framework-managed DOM.