sorcha-ui_skill

Overview

This skill builds Sorcha.UI Blazor WebAssembly pages and pairs each UI change with Playwright end-to-end tests that run against the Docker test infrastructure. It enforces test-driven UI development by creating Page Objects, writing Playwright tests first, and adding data-testid attributes to Razor components for resilient selectors. Test runs automatically validate console errors, network failures, MudBlazor CSS health, and capture screenshots on failure.

How this skill works

You create a Page Object that encapsulates selectors and actions for a page, then write Playwright NUnit tests under the Docker test suite. Tests run against services started with docker-compose and use shared test bases that capture console errors, network 5xxs, and component health. Blazor pages are implemented with MudBlazor components and data-testid attributes so tests can reliably locate and assert UI state.

When to use it

• Building a new Sorcha.UI page in Blazor WASM
• Replacing or refactoring template pages with tests-first approach
• Adding UI features that require visual or behavioral verification
• Validating UI changes against the full Docker stack (UI + API)
• Running fast smoke checks for CI gates before merging

Best practices

• Write Playwright tests before implementing the Razor page (test-first) to define expected behavior
• Use data-testid as the primary selector strategy; fallback to MudBlazor class selectors only when necessary
• Keep PageObjects focused: expose locators and simple actions, not complex assertions
• Reuse AuthenticatedDockerTestBase to persist login state across tests and speed up suites
• Ensure Docker is running (docker-compose up -d) and use the provided TestConstants for URLs and credentials

Example use cases

• Add a Wallets list page: PageObject, Docker tests, Razor page with MudBlazor cards and create button
• Replace a template page: add data-testid attributes and update PageObject selectors, then run Docker tests
• Implement and validate a modal form flow with Playwright filling inputs and asserting validation messages
• Run the Smoke category in CI to assert pages load without JS errors before release
• Diagnose a flaky UI: capture screenshots and console logs from Docker test failures for debugging