majiayu000 Playwright Skill
Playwright provides browser automation for E2E testing of the VanDaemon Blazor WebAssembly application. Tests run against both API (port 5000) and Web (port 5001) servers, validating real-time SignalR updates, MudBlazor component interactions, and responsive dashboard layouts.
Quick Start
Run E2E Tests
# Full test suite (starts servers automatically)
./run-e2e-tests.ps1
# Visible browser with slow motion for debugging
./run-e2e-tests.ps1 -Headless $false -SlowMo 500
# Run specific test file
dotnet test tests/VanDaemon.E2E.Tests --filter "FullyQualifiedName~DashboardTests"
Basic Page Test
[Fact]
public async Task Dashboard_LoadsSuccessfully()
{
await Page.GotoAsync("http://localhost:5001");
await Expect(Page).ToHaveTitleAsync("VanDaemon");
await Expect(Page.Locator(".mud-main-content")).ToBeVisibleAsync();
}
Key Concepts
| Concept | Usage | Example |
|---|---|---|
| Page Object | Encapsulates page interactions | var dashboard = new DashboardPage(Page) |
| Locator | Element selection with auto-wait | Page.Locator("[data-testid='tank-level']") |
| Expect | Assertion with retry | await Expect(locator).ToBeVisibleAsync() |
| WaitForSelector | Explicit wait for elements | await Page.WaitForSelectorAsync(".loading", new() { State = WaitForSelectorState.Hidden }) |
Common Patterns
Testing MudBlazor Components
When: Interacting with Material Design components
// Toggle a MudSwitch
var switchControl = Page.Locator("label:has-text('Water Pump')").Locator("..").Locator("input[type='checkbox']");
await switchControl.ClickAsync();
await Expect(switchControl).ToBeCheckedAsync();
// Slider interaction
var dimmer = Page.Locator(".mud-slider input[type='range']");
await dimmer.FillAsync("75");
Waiting for SignalR Updates
When: Testing real-time data from TelemetryHub
// Wait for SignalR to push tank level update
await Page.WaitForFunctionAsync(@"() => {
const level = document.querySelector('[data-testid=""fresh-water-level""]');
return level && parseFloat(level.textContent) > 0;
}", new() { Timeout = 10000 });
Screenshot on Failure
When: Debugging flaky tests
public async Task TakeScreenshotOnFailure(string testName)
{
await Page.ScreenshotAsync(new() {
Path = $"test-results/{testName}-{DateTime.Now:yyyyMMdd-HHmmss}.png",
FullPage = true
});
}
See Also
- patterns
- workflows
Related Skills
- See the blazor skill for Blazor WebAssembly patterns being tested
- See the mudblazor skill for component selectors and interactions
- See the signalr skill for real-time update testing strategies
- See the xunit skill for test framework integration
- See the docker skill for containerized test execution