Loading...
Loading...
Develops end-to-end UI tests with Playwright for Blazor applications. Use when: Writing E2E tests, testing Blazor WASM pages, validating UI flows, checking responsive design, detecting JavaScript errors, or testing MudBlazor components.
npx skill4agent add stuartf303/sorcha playwright[Parallelizable(ParallelScope.Self)]
[TestFixture]
public class BlazorUITests : PageTest
{
private DistributedApplication? _app;
private string? _blazorUrl;
[OneTimeSetUp]
public async Task OneTimeSetUp()
{
var appHost = await DistributedApplicationTestingBuilder
.CreateAsync<Projects.Sorcha_AppHost>();
_app = await appHost.BuildAsync();
await _app.StartAsync();
_blazorUrl = _app.GetEndpoint("blazor-client").ToString();
}
[Test]
public async Task HomePage_LoadsSuccessfully()
{
await Page.GotoAsync(_blazorUrl!);
await Page.WaitForLoadStateAsync();
await Expect(Page).ToHaveTitleAsync(new Regex("Sorcha|Blueprint"));
}
}// Role-based (preferred)
await Page.GetByRole(AriaRole.Button, new() { Name = "Submit" }).ClickAsync();
// Text-based
Page.Locator("a:has-text('Designer')")
// MudBlazor components
Page.Locator(".mud-button")
Page.Locator(".mud-table")
// Test IDs (most stable)
Page.Locator("[data-testid='my-element']")| Concept | Usage | Example |
|---|---|---|
| PageTest | Base class providing Page object | |
| Locator | Lazy element reference | |
| Expect | Assertion API | |
| Aspire Testing | Full stack integration | |
| Auto-wait | Built-in waiting | Actions wait for actionability |
[Test]
public async Task NoJavaScriptErrors()
{
var errors = new List<string>();
Page.Console += (_, msg) =>
{
if (msg.Type == "error") errors.Add(msg.Text);
};
await Page.GotoAsync(_blazorUrl!);
await Page.WaitForLoadStateAsync();
var criticalErrors = errors.Where(e =>
!e.Contains("WASM") && !e.Contains("Blazor")).ToList();
Assert.That(criticalErrors, Is.Empty);
}[Test]
public async Task ResponsiveDesign_Works()
{
await Page.SetViewportSizeAsync(375, 667); // Mobile
await Page.GotoAsync(_blazorUrl!);
Assert.That(await Page.TextContentAsync("body"), Is.Not.Empty);
await Page.SetViewportSizeAsync(1920, 1080); // Desktop
await Page.ReloadAsync();
Assert.That(await Page.TextContentAsync("body"), Is.Not.Empty);
}Fetch latest Playwright .NET documentation with Context7.
mcp__context7__resolve-library-id/websites/playwright_dev_dotnetmcp__context7__query-docs/websites/playwright_dev_dotnet