UI Testing with Playwright in .NET Core Projects: A Practical Guide

End-to-end UI testing is crucial to ensure your application works correctly from the user’s perspective. While unit and integration tests verify internal logic and API behavior, UI tests automate real browser interactions to catch issues only visible in the full app experience.

Why Playwright?

Playwright is a modern, powerful browser automation tool from Microsoft that supports Chromium, Firefox, and WebKit. It’s fast, reliable, and supports multiple languages, including JavaScript/TypeScript and .NET (via the Playwright .NET SDK).

Getting Started: Setting Up Playwright with .NET

1. Add Playwright to Your Test Project

Create a new xUnit or NUnit test project (or use your existing one), then install Playwright:

dotnet add package Microsoft.Playwright

2. Install Browsers

Run Playwright’s installation command to download necessary browser binaries:

playwright install

Writing Your First Playwright Test

Here’s a simple example that opens a website, clicks a button, and verifies the result:

using Microsoft.Playwright;
using Xunit;

public class UiTests : IAsyncLifetime
{
    private IPlaywright _playwright;
    private IBrowser _browser;

    public async Task InitializeAsync()
    {
        _playwright = await Playwright.CreateAsync();
        _browser = await _playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions { Headless = true });
    }

    public async Task DisposeAsync()
    {
        await _browser.CloseAsync();
        _playwright.Dispose();
    }

    [Fact]
    public async Task HomePage_ShowsWelcomeMessage()
    {
        var context = await _browser.NewContextAsync();
        var page = await context.NewPageAsync();

        await page.GotoAsync("https://localhost:5001");
        var heading = await page.TextContentAsync("h1");

        Assert.Equal("Welcome to MyApp!", heading);
    }
}

More Advanced UI Interactions

Playwright supports complex user actions:

• Form filling and submission

await page.FillAsync("#email", "test@example.com");
await page.ClickAsync("button[type=submit]");

• Waiting for elements

await page.WaitForSelectorAsync(".success-message");
var message = await page.TextContentAsync(".success-message");
Assert.Contains("Thank you", message);

• Testing navigation

await page.ClickAsync("a#about-link");
await page.WaitForURLAsync("**/about");

Running Tests in CI/CD Pipelines

• Install Playwright and browsers in your pipeline environment.
• Run tests headless for faster execution.
• Capture screenshots or videos on failure for debugging.

Example GitHub Actions snippet:

steps:
  - uses: actions/checkout@v2
  - name: Setup .NET
    uses: actions/setup-dotnet@v1
    with:
      dotnet-version: '7.x'
  - name: Install Playwright Browsers
    run: playwright install --with-deps
  - name: Run Tests
    run: dotnet test --logger "trx"

Tips for Reliable UI Tests

• Keep selectors resilient — avoid brittle CSS or XPath paths.
• Use test data seeds or mocks to control app state.
• Run tests against a dedicated test environment.

---

Playwright brings modern, cross-browser automation to .NET developers, making UI testing more accessible and effective. By integrating Playwright tests early, you can catch UI regressions and ensure your app delivers a great user experience.