playwright-blazor

Name: playwright-blazor
Author: Aaronontheweb

1.1kstars98forks

How to install playwright-blazor?

aaronontheweb/dotnet-skills/playwright-blazor

$npx -y skills add Aaronontheweb/dotnet-skills --skill playwright-blazor

Installs into the current project.

Summary

Write UI tests for Blazor applications (Server or WebAssembly) using Playwright. Covers navigation, interaction, authentication, selectors, and common Blazor-specific patterns.

Files · 1

View on GitHub

SKILL.md

1	# Testing Blazor Applications with Playwright
2
3	## When to Use This Skill
4
5	Use this skill when:
6	- Writing end-to-end UI tests for Blazor Server or WebAssembly applications
7	- Testing interactive components, forms, and user workflows
8	- Verifying authentication and authorization flows
9	- Testing SignalR-based real-time updates in Blazor Server
10	- Capturing screenshots for visual regression testing
11	- Testing responsive designs and mobile emulation
12	- Debugging UI issues with browser developer tools
13
14	## Core Principles
15
16	1. Wait for Rendering - Blazor renders asynchronously; use proper wait strategies
17	2. Test Attributes - Use `data-test` or `data-testid` attributes for stable selectors
18	3. Headless by Default - Run tests headless in CI, headed for local debugging
19	4. Handle Error UI - Always check for `#blazor-error-ui` to catch unhandled exceptions
20	5. Avoid Network Wait States - Blazor navigation doesn't trigger network loads; wait for DOM changes
21	6. Pin Browser Channels - Use specific browser channels (msedge, chrome) for reproducibility
22
23	## Required NuGet Packages
24
25	```xml
26	<ItemGroup>
27	<PackageReference Include="Microsoft.Playwright" Version="*" />
28	<PackageReference Include="Microsoft.Playwright.MSTest" Version="*" />
29	<!-- OR for xUnit -->
30	<PackageReference Include="xunit" Version="*" />
31	<PackageReference Include="xunit.runner.visualstudio" Version="*" />
32	</ItemGroup>
33	```
34
35	## Installation
36
37	Before running tests, install Playwright browsers:
38
39	```bash
40	pwsh -Command "playwright install --with-deps"
41	```
42
43	## Pattern 1: Basic Playwright Setup
44
45	```csharp
46	using Microsoft.Playwright;
47
48	public class PlaywrightFixture : IAsyncLifetime
49	{
50	private IPlaywright? _playwright;
51	private IBrowser? _browser;
52
53	public IBrowser Browser => _browser
54	?? throw new InvalidOperationException("Browser not initialized");
55
56	public async Task InitializeAsync()
57	{
58	_playwright = await Playwright.CreateAsync();
59
60	_browser = await _playwright.Chromium.LaunchAsync(new()
61	{
62	Headless = true,
63	// For CI/debugging, you might want:
64	// Headless = Environment.GetEnvironmentVariable("CI") != null,
65	// SlowMo = 100 // Slow down actions for debugging
66	});
67	}
68
69	public async Task DisposeAsync()
70	{
71	if (_browser is not null)
72	await _browser.DisposeAsync();
73
74	_playwright?.Dispose();
75	}
76	}
77	```
78
79	## Pattern 2: Navigation in Blazor Apps
80
81	### Initial Page Load (Classic Navigation)
82
83	```csharp
84	[Fact]
85	public async Task InitialPageLoad()
86	{
87	var page = await _fixture.Browser.NewPageAsync();
88
89	// First load is classic HTTP navigation
90	await page.GotoAsync("https://localhost:5001");
91
92	// Wait for Blazor to initialize
93	await page.WaitForSelectorAsync("h1:has-text('Welcome')");
94
95	Assert.True(await page.IsVisibleAsync("h1:has-text('Welcome')"));
96	}
97	```
98
99	### In-App Navigation (No Page Reload)
100
101	Blazor uses client-side routing, so subsequent navigations don't trigger page reloads:
102
103	```csharp
104	[Fact]
105	public async Task InternalNavigation()
106	{
107	var page = await _fixture.Browser.NewPageAsync();
108	await page.GotoAsync("https://localhost:5001");
109
110	// Method 1: Click a navigation link
111	await page.GetByRole(AriaRole.Link, new() { Name = "Counter" })
112	.ClickAsync();
113
114	// Wait for the new page content (NOT network idle!)
115	await page.WaitForSelectorAsync("h1:has-text('Counter')");
116
117	// Method 2: Programmatic navigation (Blazor 8+)
118	await page.EvaluateAsync("window.Blazor.navigateTo('/fetchdata')");
119	await page.WaitForSelectorAsync("h1:has-text('Weather')");
120
121	// Method 3: Direct URL navigation (causes full reload)
122	await page.GotoAsync("https://localhost:5001/counter");
123	await page.WaitForSelectorAsync("h1:has-text('Counter')");
124	}
125	```
126
127	### Wait Strategies for Blazor
128
129	```csharp
130	// ❌ DON'T: Wait for network idle (Blazor doesn't reload pages)
131	await page.WaitForLoadStateAsync(LoadState.NetworkIdle);
132
133	// ✅ DO: Wait for specific DOM elements
134	await page.WaitForSelectorAsync("h1:has-text('My Page')");
135
136	// ✅ DO: Wait for element visibility
137	await page.Locator("[data-test='content']").WaitForAsync();
138
139	// ✅ DO: Wait for URL change
140	await page.WaitForURLAsync("**/counter");
141	```
142
143	## Pattern 3: Stable Selectors with Test Attributes
144
145	### In Your Blazor Components
146
147	```razor
148	<!-- Add data-test attributes for stable selectors -->
149	<button data-test="submit-button" @onclick="HandleSubmit">
150	Submit
151	</button>
152
153	<input data-test="username-input" @bind="Username" />
154
155	<div data-test="result-container">
156	@Result
157	</div>
158	```
159
160	### In Your Tests
161
162	```csharp
163	[Fact]
164	public async Task FormSubmission()
165	{
166	var page = await _fixture.Browser.NewPageAsync();
167	awai

People who liked this also viewed

6 picks

Type

playwright-blazor

1.1kstars98forks

View on GitHub

How to install playwright-blazor?

aaronontheweb/dotnet-skills/playwright-blazor

$npx -y skills add Aaronontheweb/dotnet-skills --skill playwright-blazor

Installs into the current project.

Summary

Write UI tests for Blazor applications (Server or WebAssembly) using Playwright. Covers navigation, interaction, authentication, selectors, and common Blazor-specific patterns.

Files · 1

View on GitHub

SKILL.md

1	# Testing Blazor Applications with Playwright
2
3	## When to Use This Skill
4
5	Use this skill when:
6	- Writing end-to-end UI tests for Blazor Server or WebAssembly applications
7	- Testing interactive components, forms, and user workflows
8	- Verifying authentication and authorization flows
9	- Testing SignalR-based real-time updates in Blazor Server
10	- Capturing screenshots for visual regression testing
11	- Testing responsive designs and mobile emulation
12	- Debugging UI issues with browser developer tools
13
14	## Core Principles
15
16	1. Wait for Rendering - Blazor renders asynchronously; use proper wait strategies
17	2. Test Attributes - Use `data-test` or `data-testid` attributes for stable selectors
18	3. Headless by Default - Run tests headless in CI, headed for local debugging
19	4. Handle Error UI - Always check for `#blazor-error-ui` to catch unhandled exceptions
20	5. Avoid Network Wait States - Blazor navigation doesn't trigger network loads; wait for DOM changes
21	6. Pin Browser Channels - Use specific browser channels (msedge, chrome) for reproducibility
22
23	## Required NuGet Packages
24
25	```xml
26	<ItemGroup>
27	<PackageReference Include="Microsoft.Playwright" Version="*" />
28	<PackageReference Include="Microsoft.Playwright.MSTest" Version="*" />
29	<!-- OR for xUnit -->
30	<PackageReference Include="xunit" Version="*" />
31	<PackageReference Include="xunit.runner.visualstudio" Version="*" />
32	</ItemGroup>
33	```
34
35	## Installation
36
37	Before running tests, install Playwright browsers:
38
39	```bash
40	pwsh -Command "playwright install --with-deps"
41	```
42
43	## Pattern 1: Basic Playwright Setup
44
45	```csharp
46	using Microsoft.Playwright;
47
48	public class PlaywrightFixture : IAsyncLifetime
49	{
50	private IPlaywright? _playwright;
51	private IBrowser? _browser;
52
53	public IBrowser Browser => _browser
54	?? throw new InvalidOperationException("Browser not initialized");
55
56	public async Task InitializeAsync()
57	{
58	_playwright = await Playwright.CreateAsync();
59
60	_browser = await _playwright.Chromium.LaunchAsync(new()
61	{
62	Headless = true,
63	// For CI/debugging, you might want:
64	// Headless = Environment.GetEnvironmentVariable("CI") != null,
65	// SlowMo = 100 // Slow down actions for debugging
66	});
67	}
68
69	public async Task DisposeAsync()
70	{
71	if (_browser is not null)
72	await _browser.DisposeAsync();
73
74	_playwright?.Dispose();
75	}
76	}
77	```
78
79	## Pattern 2: Navigation in Blazor Apps
80
81	### Initial Page Load (Classic Navigation)
82
83	```csharp
84	[Fact]
85	public async Task InitialPageLoad()
86	{
87	var page = await _fixture.Browser.NewPageAsync();
88
89	// First load is classic HTTP navigation
90	await page.GotoAsync("https://localhost:5001");
91
92	// Wait for Blazor to initialize
93	await page.WaitForSelectorAsync("h1:has-text('Welcome')");
94
95	Assert.True(await page.IsVisibleAsync("h1:has-text('Welcome')"));
96	}
97	```
98
99	### In-App Navigation (No Page Reload)
100
101	Blazor uses client-side routing, so subsequent navigations don't trigger page reloads:
102
103	```csharp
104	[Fact]
105	public async Task InternalNavigation()
106	{
107	var page = await _fixture.Browser.NewPageAsync();
108	await page.GotoAsync("https://localhost:5001");
109
110	// Method 1: Click a navigation link
111	await page.GetByRole(AriaRole.Link, new() { Name = "Counter" })
112	.ClickAsync();
113
114	// Wait for the new page content (NOT network idle!)
115	await page.WaitForSelectorAsync("h1:has-text('Counter')");
116
117	// Method 2: Programmatic navigation (Blazor 8+)
118	await page.EvaluateAsync("window.Blazor.navigateTo('/fetchdata')");
119	await page.WaitForSelectorAsync("h1:has-text('Weather')");
120
121	// Method 3: Direct URL navigation (causes full reload)
122	await page.GotoAsync("https://localhost:5001/counter");
123	await page.WaitForSelectorAsync("h1:has-text('Counter')");
124	}
125	```
126
127	### Wait Strategies for Blazor
128
129	```csharp
130	// ❌ DON'T: Wait for network idle (Blazor doesn't reload pages)
131	await page.WaitForLoadStateAsync(LoadState.NetworkIdle);
132
133	// ✅ DO: Wait for specific DOM elements
134	await page.WaitForSelectorAsync("h1:has-text('My Page')");
135
136	// ✅ DO: Wait for element visibility
137	await page.Locator("[data-test='content']").WaitForAsync();
138
139	// ✅ DO: Wait for URL change
140	await page.WaitForURLAsync("**/counter");
141	```
142
143	## Pattern 3: Stable Selectors with Test Attributes
144
145	### In Your Blazor Components
146
147	```razor
148	<!-- Add data-test attributes for stable selectors -->
149	<button data-test="submit-button" @onclick="HandleSubmit">
150	Submit
151	</button>
152
153	<input data-test="username-input" @bind="Username" />
154
155	<div data-test="result-container">
156	@Result
157	</div>
158	```
159
160	### In Your Tests
161
162	```csharp
163	[Fact]
164	public async Task FormSubmission()
165	{
166	var page = await _fixture.Browser.NewPageAsync();
167	awai

People who liked this also viewed

6 picks

Type