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 
    });
}

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

playwright