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