メニュー
Automates browser testing and E2E test scenarios with Playwright. Use when: writing end-to-end tests, testing Blazor WASM UI, validating SignalR real-time updates, testing responsive layouts, or automating browser interactions.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Builds REST APIs, SignalR hubs, and ASP.NET Core Web API applications. Use when: Creating controllers, configuring middleware, setting up dependency injection, implementing background services, or working with the API layer.
Develops Blazor WebAssembly single-page applications with component-based UI. Use when: Creating/modifying .razor components, managing component state, handling SignalR subscriptions, or working with MudBlazor UI components.
Writes C# code following VanDaemon conventions and clean architecture patterns Use when: Creating services, entities, controllers, or plugins in the VanDaemon codebase
Configures containerization with Docker and Docker Compose for VanDaemon. Use when: building containers, configuring docker-compose, deploying to Docker environments, troubleshooting container networking, or setting up multi-container applications.
Configures .NET 10 projects, builds, and manages C# runtime. Use when: building/running the solution, adding projects, managing NuGet packages, configuring Docker containers, or troubleshooting build issues.
Writes fluent, readable test assertions and validations using FluentAssertions library. Use when: Writing unit tests, validating service responses, asserting domain entity states, testing collections and async operations.
| name | playwright |
| description | Automates browser testing and E2E test scenarios with Playwright. Use when: writing end-to-end tests, testing Blazor WASM UI, validating SignalR real-time updates, testing responsive layouts, or automating browser interactions. |
| allowed-tools | Read, Edit, Write, Glob, Grep, Bash |
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.
# 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"
[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();
}
| 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 }) |
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");
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 });
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
});
}