Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
aaronontheweb avatar

Playwright Blazor Testing

  • 419 installs
  • 1.1k repo stars
  • Updated July 3, 2026
  • aaronontheweb/dotnet-skills

playwright-blazor-testing is a Claude Code skill that guides developers through Playwright end-to-end tests for Blazor UI flows so regressions in components, routing, and browser interactions are caught before release.

About

playwright-blazor-testing is a .NET-focused agent skill from aaronontheweb/dotnet-skills for writing and running Playwright end-to-end tests against Blazor applications. It helps developers validate interactive UI flows—component rendering, client-side routing, form submissions, and browser events—that unit tests often miss in WebAssembly or Server Blazor projects. The skill fits teams shipping Blazor SPAs or hybrid apps who need repeatable browser automation in CI rather than manual click-through checks. Agents invoke it when Blazor pages change, new routes land, or a release candidate needs regression coverage across Chromium-based browsers. It complements xUnit or bUnit coverage by exercising the full rendered stack. Catalog metadata describes Playwright-driven Blazor E2E automation; verify the repo skill file matches this id before relying on bundled scripts or commands.

  • Playwright E2E for Blazor
  • Browser regression coverage
  • Component and routing checks
  • CI-friendly UI automation
  • Release confidence for web UI

Playwright Blazor Testing by the numbers

  • 419 all-time installs (skills.sh)
  • Ranked #643 of 2,153 Testing & QA skills by installs in the Skillselion catalog
  • Data as of Aug 3, 2026 (Skillselion catalog sync)
npx skills add https://github.com/aaronontheweb/dotnet-skills --skill playwright-blazor-testing

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs419
repo stars1.1k
Last updatedJuly 3, 2026
Repositoryaaronontheweb/dotnet-skills

How do you E2E test Blazor UI with Playwright?

Automate end-to-end Playwright tests against Blazor UI flows to catch regressions in components, routing, and browser interactions before release.

Who is it for?

Developers maintaining Blazor web apps who need automated browser regression tests in local runs and CI pipelines.

Skip if: Teams only unit-testing C# logic without a Blazor front end, or projects that do not use Microsoft Blazor and Playwright together.

When should I use this skill?

Blazor UI, routing, or component behavior changes and the team needs Playwright end-to-end coverage before release.

What you get

Playwright test projects, Blazor UI test scenarios, and CI-ready browser regression suites

  • Playwright E2E test scenarios
  • Blazor UI regression suite

Files

SKILL.mdMarkdownGitHub ↗

Slopwatch: LLM Anti-Cheat for .NET

When to Use This Skill

Use this skill constantly. Every time an LLM (including Claude) makes changes to:

  • C# source files (.cs)
  • Project files (.csproj)
  • Props files (Directory.Build.props, Directory.Packages.props)
  • Test files

Run slopwatch to validate the changes don't introduce "slop."

What is Slop?

"Slop" refers to shortcuts LLMs take that make tests pass or builds succeed without actually solving the underlying problem. These are reward hacking behaviors - the LLM optimizes for apparent success rather than real fixes.

Common Slop Patterns

PatternExampleWhy It's Bad
Disabled tests[Fact(Skip="flaky")]Hides failures instead of fixing them
Warning suppression#pragma warning disable CS8618Silences compiler without fixing issue
Empty catch blockscatch (Exception) { }Swallows errors, hides bugs
Arbitrary delaysawait Task.Delay(1000);Masks race conditions, makes tests slow
Project-level suppression<NoWarn>CS1591</NoWarn>Disables warnings project-wide
CPM bypassVersion="1.0.0" inlineUndermines central package management

Never accept these patterns. If an LLM introduces slop, reject the change and require a proper fix.

---

Installation

As a Local Tool (Recommended)

Add to .config/dotnet-tools.json:

{
  "version": 1,
  "isRoot": true,
  "tools": {
    "slopwatch.cmd": {
      "version": "0.2.0",
      "commands": ["slopwatch"],
      "rollForward": false
    }
  }
}

Then restore:

dotnet tool restore

As a Global Tool

dotnet tool install --global Slopwatch.Cmd

---

First-Time Setup: Establish a Baseline

Before using slopwatch on an existing project, create a baseline of current issues:

# Initialize baseline from existing code
slopwatch init

# This creates .slopwatch/baseline.json
git add .slopwatch/baseline.json
git commit -m "Add slopwatch baseline"

Why baseline? Legacy code may have existing issues. The baseline ensures slopwatch only catches new slop being introduced, not pre-existing technical debt.

---

Usage During LLM Sessions

After Every Code Change

Run slopwatch after any LLM-generated code modification:

# Analyze for new issues (uses baseline)
slopwatch analyze

# Use strict mode - fail on warnings too
slopwatch analyze --fail-on warning

When Slopwatch Flags an Issue

Do not ignore it. Instead:

1. Understand why the LLM took the shortcut 2. Request a proper fix - be specific about what's wrong 3. Verify the fix doesn't introduce different slop

# Example: LLM disabled a test
❌ SW001 [Error]: Disabled test detected
   File: tests/MyApp.Tests/OrderTests.cs:45
   Pattern: [Fact(Skip="Test is flaky")]

# Correct response: Ask for actual fix
"This test was disabled instead of fixed. Please investigate why
it's flaky and fix the underlying timing/race condition issue."

Updating the Baseline (Rare)

Only update the baseline when slop is truly justified and documented:

# Add current detections to baseline (use sparingly!)
slopwatch analyze --update-baseline

Justification examples:

  • Third-party library forces a pattern (e.g., must suppress specific warning)
  • Intentional delay for rate limiting (not test flakiness)
  • Generated code that can't be modified

Document why in a code comment when updating baseline.

---

Claude Code Hook Integration

Add slopwatch as a hook to automatically validate every edit. Create or update .claude/settings.json:

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write|Edit|MultiEdit",
        "hooks": [
          {
            "type": "command",
            "command": "slopwatch analyze -d . --hook",
            "timeout": 60000
          }
        ]
      }
    ]
  }
}

The --hook flag:

  • Only analyzes git dirty files (fast, even on large repos)
  • Outputs errors to stderr in readable format
  • Blocks the edit on warnings/errors (exit code 2)
  • Claude sees the error and can fix it immediately

---

CI/CD Integration

Add slopwatch to your CI pipeline as a quality gate:

GitHub Actions

jobs:
  slopwatch:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup .NET
        uses: actions/setup-dotnet@v4
        with:
          dotnet-version: '9.0.x'

      - name: Install Slopwatch
        run: dotnet tool install --global Slopwatch.Cmd

      - name: Run Slopwatch
        run: slopwatch analyze -d . --fail-on warning

Azure Pipelines

- task: DotNetCoreCLI@2
  displayName: 'Install Slopwatch'
  inputs:
    command: 'custom'
    custom: 'tool'
    arguments: 'install --global Slopwatch.Cmd'

- script: slopwatch analyze -d . --fail-on warning
  displayName: 'Slopwatch Analysis'

---

Detection Rules

RuleSeverityWhat It Catches
SW001ErrorDisabled tests (Skip=, Ignore, #if false)
SW002WarningWarning suppression (#pragma warning disable, SuppressMessage)
SW003ErrorEmpty catch blocks that swallow exceptions
SW004WarningArbitrary delays in tests (Task.Delay, Thread.Sleep)
SW005WarningProject file slop (NoWarn, TreatWarningsAsErrors=false)
SW006WarningCPM bypass (VersionOverride, inline Version attributes)

---

Configuration

Create .slopwatch/slopwatch.json to customize:

{
  "minSeverity": "warning",
  "rules": {
    "SW001": { "enabled": true, "severity": "error" },
    "SW002": { "enabled": true, "severity": "warning" },
    "SW003": { "enabled": true, "severity": "error" },
    "SW004": { "enabled": true, "severity": "warning" },
    "SW005": { "enabled": true, "severity": "warning" },
    "SW006": { "enabled": true, "severity": "warning" }
  },
  "exclude": [
    "**/Generated/**",
    "**/obj/**",
    "**/bin/**"
  ]
}

Strict Mode (Recommended for LLM Sessions)

For maximum protection during LLM coding sessions, elevate all rules to errors:

{
  "minSeverity": "warning",
  "rules": {
    "SW001": { "enabled": true, "severity": "error" },
    "SW002": { "enabled": true, "severity": "error" },
    "SW003": { "enabled": true, "severity": "error" },
    "SW004": { "enabled": true, "severity": "error" },
    "SW005": { "enabled": true, "severity": "error" },
    "SW006": { "enabled": true, "severity": "error" }
  }
}

---

The Philosophy: Zero Tolerance for New Slop

1. Baseline captures legacy - Existing issues are acknowledged but isolated 2. New slop is blocked - Any new shortcut fails the build/edit 3. Exceptions require justification - If you must update baseline, document why 4. LLMs are not special - The same rules apply to human and AI-generated code

The goal is to prevent the gradual accumulation of technical debt that occurs when LLMs optimize for "make the test pass" rather than "fix the actual problem."

---

Quick Reference

# First time setup
slopwatch init
git add .slopwatch/baseline.json

# After every LLM code change
slopwatch analyze

# Strict mode (recommended)
slopwatch analyze --fail-on warning

# With stats (performance debugging)
slopwatch analyze --stats

# Update baseline (rare, document why)
slopwatch analyze --update-baseline

# JSON output for tooling
slopwatch analyze --output json

---

When to Override (Almost Never)

The only valid reasons to update baseline or disable a rule:

ScenarioActionRequired
Third-party forces patternUpdate baselineCode comment explaining why
Generated code (not editable)Add to exclude listDocument in config
Intentional rate limiting delayUpdate baselineCode comment, not in test
Legacy code cleanupOne-time baseline updatePR description

Invalid reasons:

  • "The test is flaky" → Fix the flakiness
  • "The warning is annoying" → Fix the code
  • "It works on my machine" → Fix the race condition
  • "We'll fix it later" → Fix it now

Related skills

How it compares

Choose playwright-blazor-testing over unit-test-only skills when the risk is rendered UI, routing, or real browser behavior rather than isolated C# logic.

FAQ

What does playwright-blazor-testing automate?

playwright-blazor-testing guides Playwright end-to-end tests against Blazor UI flows so developers catch regressions in components, client routing, and browser interactions before release instead of relying on manual click-through checks.

When should developers invoke playwright-blazor-testing?

playwright-blazor-testing fits Blazor apps when pages, routes, or interactive components change and the team needs repeatable browser automation beyond bUnit or xUnit isolation tests ahead of a release candidate.

Testing & QAfrontendtesting

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.