Back to "Multi-Browser EM SK1E Test med Playwright för .NET"

This is a viewer only at the moment see the article on how this works.

To update the preview hit Ctrl-Alt-R (or ⌘-Alt-R on Mac) or Enter to refresh. The Save icon lets you save the markdown file to disk

# Multi-Browser EM SK1E Test med Playwright för .NET

Playwright är Microsofts officiella lösning på modern webblärmningsautomatisering., erbjuder flera supporter för webblader, - Chrome, Firefox, Safari, Safari 6 med en enda API och , byggt, - med spårdebugging och mobil emulering., och mobil modellering.This guide covers everything from setup to advanced testing patterns.M SK11 comparing it with PuppeteerSharp to help you choose the right tool. [Puppeteer-särp](/blog/puppeteersharp-e2e-testing) istället - men om du behöver en omfattande korsning-browsertestingM SK2 spelkunskapen är vägen framåt .

## Inleiding

Om du' har läst min artikel på [Puppeteer-särp](/blog/puppeteersharp-e2e-testing),, du, ', kommer veta att jag är en fan av moderna testverktyg som inte gör det möjligt för dig att slita håret. ., PuppeteerSharp är lysande för Chrome. ♪ ♪ -, bara test. ♫ ♪ Men vad händer om du behöver testa över flera webblader? ♪ [Dramatiker](https://playwright.dev/) kommer in.

Playwright är Microsofts svar på webbläsarens automatiseringsproblem, , och de har lärt sig från allt som kom innan.. Det är similart till PuppeteerSharp och ' som den mer ambitiösa syskonen.

I den här artikeln ska jag visa er hur man använder Playwright för .NET för att testa över Chrome , Firefox M SK4 och Safari , med verkliga kodexempler och praktiska mönster som man kan använda idag

[TOC]

## Varför spelar författaren över puppeterSharp?

Missförstå mig inte. [Puppeteer-särp](/blog/puppeteersharp-e2e-testing) är utmärkt om du bara behöver Chrome. Men här's när Playwright är logiskt

### Multi-Browserproblemet

De som använder Chrome använder inte alla.

- **Chrome/Edge**: ~65% av användaren
- **Safari**:
- **Firefox**:

En bug som bara dyker upp i Safari kan förlora dig 20% av dina potentiella användare. Playwright låter dig testa alla tre med samma API

### Bättre utvecklande erfarenhet

```mermaid
graph TB
    subgraph "PuppeteerSharp"
        PS[Chrome Only]
        PS --> PS1[Fast setup]
        PS --> PS2[Simple API]
        PS --> PS3[Chrome DevTools]
    end

subgraph "Playwright"
        PW[Multi-Browser]
        PW --> PW1[Chrome, Firefox, Safari]
        PW --> PW2[Auto-waiting built-in]
        PW --> PW3[Trace viewer]
        PW --> PW4[Codegen tool]
        PW --> PW5[Better error messages]
    end

style PW stroke:#00aa00,stroke-width:3px
    style PW1 stroke:#0066cc,stroke-width:2px
    style PW3 stroke:#0066cc,stroke-width:2px
    style PW4 stroke:#0066cc,stroke-width:2px
```

### Nyckliga fördelar

1. **Multi-browserstöd** - Test Chrome, FirefoxM SK2 Safari med samma kod
2. **Bättre automatisering** - En mer tillförlitlig utom lådan , färre fläcktest
3. **Trägläser** - spela in fulla spår av testrunner för att riva
4. **Kodgen** - Generera testkod genom att interagera med din sida
5. **nätverksinterceptering** - Mer kraftfullt än PuppeteerSharp
6. **Moderna webfunktioner** - Bättre stöd för Shadow DOM

## Att sätta upp spelförfattare för .NET

Installera [Microsoft.Playwright](https://www.nuget.org/packages/Microsoft.Playwright) NuGet package:

```bash
dotnet add package Microsoft.Playwright
dotnet add package Microsoft.Playwright.NUnit  # Or use xUnit
```

Installera sedan webbläsaren (den här ladda ner [Chromium](https://www.chromium.org/), [Firefox](https://www.mozilla.org/firefox/), och [WebKit](https://webkit.org/)):

```bash
pwsh bin/Debug/net9.0/playwright.ps1 install
```

Eller på Linux

```bash
playwright install
```

**Nota:** Den första webbläsaren installerar alla nedläppningar runt 400MB. De efterföljande uppdaterarna är mycket mindre

Här är mitt testprojekts konfiguration.

```xml
<PackageReference Include="Microsoft.Playwright" Version="1.48.0" />
<PackageReference Include="Microsoft.Playwright.NUnit" Version="1.48.0" />
<PackageReference Include="xunit" Version="2.9.3" />
<PackageReference Include="xunit.runner.visualstudio" Version="3.1.4">
  <PrivateAssets>all</PrivateAssets>
  <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>
```

I'm använder [xUnit](https://xunit.net/), men Playwright fungerar lika bra med [NUnit](https://nunit.org/) eller [MStest](https://learn.microsoft.com/en-us/dotnet/core/testing/unit-testing-with-mstest). Faktum är att [NUnit-integration](https://playwright.dev/dotnet/docs/test-runners#nunit) med ytterligare hjälparbetare.

## Att skapa en testklass

liknande [Puppeteer-särp](/blog/puppeteersharp-e2e-testing#creating-a-base-test-class), men med flera supporter

### Klassenstrukturen

```csharp
using Microsoft.Playwright;
using Xunit.Abstractions;

namespace Mostlylucid.Test.E2E;

public abstract class PlaywrightTestBase : IAsyncLifetime
{
    protected IPlaywright Playwright = null!;
    protected IBrowser Browser = null!;
    protected IBrowserContext Context = null!;
    protected IPage Page = null!;

protected readonly ITestOutputHelper Output;
    protected const string BaseUrl = "http://localhost:8080";

// Override this in derived classes to test different browsers
    protected virtual BrowserType BrowserType => BrowserType.Chromium;

protected PlaywrightTestBase(ITestOutputHelper output)
    {
        Output = output;
    }

public async Task InitializeAsync()
    {
        // Create Playwright instance
        Playwright = await Microsoft.Playwright.Playwright.CreateAsync();

// Launch the specified browser
        Browser = await LaunchBrowserAsync();

// Create a new context (like an incognito window)
        Context = await Browser.NewContextAsync(new BrowserNewContextOptions
        {
            ViewportSize = new ViewportSize { Width = 1400, Height = 900 },
            IgnoreHTTPSErrors = true
        });

// Create a new page
        Page = await Context.NewPageAsync();

// Set default timeout
        Page.SetDefaultTimeout(30000);
    }

private async Task<IBrowser> LaunchBrowserAsync()
    {
        var options = new BrowserTypeLaunchOptions
        {
            Headless = true, // Set to false for debugging
        };

return BrowserType switch
        {
            BrowserType.Chromium => await Playwright.Chromium.LaunchAsync(options),
            BrowserType.Firefox => await Playwright.Firefox.LaunchAsync(options),
            BrowserType.Webkit => await Playwright.Webkit.LaunchAsync(options),
            _ => throw new ArgumentException($"Unknown browser type: {BrowserType}")
        };
    }

public async Task DisposeAsync()
    {
        await Page?.CloseAsync()!;
        await Context?.CloseAsync()!;
        await Browser?.CloseAsync()!;
        Playwright?.Dispose();
    }
}

public enum BrowserType
{
    Chromium,
    Firefox,
    Webkit
}
```

### Varför Browserkontexter?

Lägg märke till att vi skapar `Context` före att skapa en `Page`. Det här är ett teaterkoncept som PuppeteerSharp inte har

- **Kontext** = Isolerad webblader sessie (lik incognito-läger
- **Page** = En tab i den kontexten

Kontexten låter dig

- Testa med olika användare samtidigt
- Se olika cookies , rättigheter, eller lokalisering per kontext
- Isolera tester fullständigt ( även inom samma webblader instans )

### hjälpmetoder

```csharp
// Navigation with better waiting
protected async Task NavigateAsync(string path)
{
    var url = path.StartsWith("http") ? path : $"{BaseUrl}{path}";
    await Page.GotoAsync(url, new PageGotoOptions
    {
        WaitUntil = WaitUntilState.NetworkIdle
    });
}

// Playwright has better built-in waiting, but these are still useful
protected async Task<IElementHandle?> WaitForSelectorAsync(string selector)
{
    try
    {
        return await Page.WaitForSelectorAsync(selector, new PageWaitForSelectorOptions
        {
            State = WaitForSelectorState.Visible
        });
    }
    catch (TimeoutException)
    {
        return null;
    }
}

// Improved element operations with auto-waiting
protected async Task<bool> ElementExistsAsync(string selector)
{
    return await Page.Locator(selector).CountAsync() > 0;
}

protected async Task<string?> GetTextContentAsync(string selector)
{
    var locator = Page.Locator(selector);
    return await locator.TextContentAsync();
}

protected async Task TypeAsync(string selector, string text)
{
    await Page.Locator(selector).FillAsync(text);
}

protected async Task ClickAsync(string selector)
{
    await Page.Locator(selector).ClickAsync();
}
```

### Verklare - Dramatiker 's hemliga vapen

Notera att `Page.Locator()` ringer? Det här skiljer sig från PuppeteerSharp . `QuerySelector`. Lokaliseringsfaktorerna är

- **Låg** - De frågar inte DOM tills du använder dem
- **Att försöka igen** - De väntar och testar operationer automatiskt
- **Strängt** - De stöter på fel om flera element matchar.

```csharp
// PuppeteerSharp way (manual waiting)
await Page.WaitForSelectorAsync("#button");
await Page.ClickAsync("#button");

// Playwright way (auto-waiting)
await Page.Locator("#button").ClickAsync(); // Waits automatically!
```

## Multi-Browser Testing

Här' där Playwright skiner . Du kan köra samma test över alla webbsidor

### Att använda xUnitteori för Multi-Browser-tester

```csharp
public class CrossBrowserTests : PlaywrightTestBase
{
    public CrossBrowserTests(ITestOutputHelper output) : base(output) { }

[Theory]
    [InlineData(BrowserType.Chromium)]
    [InlineData(BrowserType.Firefox)]
    [InlineData(BrowserType.Webkit)]
    public async Task HomePage_LoadsCorrectly_InAllBrowsers(BrowserType browserType)
    {
        // Override the browser type for this test
        BrowserType = browserType;
        await InitializeAsync();

// Arrange & Act
        await NavigateAsync("/");

// Assert
        var title = await Page.TitleAsync();
        Assert.Contains("Mostlylucid", title);

Output.WriteLine($"✓ Test passed in {browserType}");
    }
}
```

### Browser- Spesifika testklassen

Eller skapa separata testklassen för varje webblader:

```csharp
public class ChromiumTests : PlaywrightTestBase
{
    protected override BrowserType BrowserType => BrowserType.Chromium;

public ChromiumTests(ITestOutputHelper output) : base(output) { }

[Fact]
    public async Task FilterBar_WorksInChrome()
    {
        await NavigateAsync("/blog");

await Page.Locator("#LanguageDropDown button").ClickAsync();
        await Page.Locator("#LanguageDropDown li:has-text('Spanish')").ClickAsync();

var url = Page.Url;
        Assert.Contains("language=es", url);
    }
}

public class FirefoxTests : PlaywrightTestBase
{
    protected override BrowserType BrowserType => BrowserType.Firefox;

public FirefoxTests(ITestOutputHelper output) : base(output) { }

[Fact]
    public async Task FilterBar_WorksInFirefox()
    {
        // Same test, different browser!
        await NavigateAsync("/blog");

await Page.Locator("#LanguageDropDown button").ClickAsync();
        await Page.Locator("#LanguageDropDown li:has-text('Spanish')").ClickAsync();

var url = Page.Url;
        Assert.Contains("language=es", url);
    }
}

public class SafariTests : PlaywrightTestBase
{
    protected override BrowserType BrowserType => BrowserType.Webkit;

public SafariTests(ITestOutputHelper output) : base(output) { }

[Fact]
    public async Task FilterBar_WorksInSafari()
    {
        await NavigateAsync("/blog");

await Page.Locator("#LanguageDropDown button").ClickAsync();
        await Page.Locator("#LanguageDropDown li:has-text('Spanish')").ClickAsync();

var url = Page.Url;
        Assert.Contains("language=es", url);
    }
}
```

## Att skriva tester - Playwright Way

Låt oss titta på riktiga exempel som visar Playwrights fördelar med

### Att testa HTMX med Auto-Låd

```csharp
[Fact]
public async Task SortingDropdown_UpdatesContentViaHTMX()
{
    // Arrange
    await NavigateAsync("/blog");

// Get first post title before sorting
    var firstPostBefore = await Page.Locator("article h2 a").First.TextContentAsync();
    Output.WriteLine($"First post before: {firstPostBefore}");

// Act - Change sort order
    await Page.Locator("#orderSelect").SelectOptionAsync("date_asc");

// Playwright automatically waits for HTMX to update the DOM!
    await Page.WaitForLoadStateAsync(LoadState.NetworkIdle);

// Assert - Content should have changed
    var firstPostAfter = await Page.Locator("article h2 a").First.TextContentAsync();
    Output.WriteLine($"First post after: {firstPostAfter}");

var selectValue = await Page.Locator("#orderSelect").InputValueAsync();
    Assert.Equal("date_asc", selectValue);
}
```

### Att testa Alpine.js interaktioner

Playwright-handler [Alpine.js](https://alpinejs.dev/) reaktivitet och animering ömtlöst:

```csharp
[Fact]
public async Task AlpineDropdown_OpensAndCloses()
{
    await NavigateAsync("/blog");

// Click to open dropdown (Alpine.js controlled)
    await Page.Locator("#LanguageDropDown button").ClickAsync();

// Wait for Alpine.js animation
    await Page.WaitForSelectorAsync("#LanguageDropDown div[x-show]", new()
    {
        State = WaitForSelectorState.Visible
    });

// Check dropdown is visible
    var isVisible = await Page.Locator("#LanguageDropDown div[x-show]").IsVisibleAsync();
    Assert.True(isVisible);

// Click outside to close
    await Page.Locator("body").ClickAsync(new LocatorClickOptions
    {
        Position = new Position { X = 0, Y = 0 }
    });

// Verify closed
    await Page.WaitForSelectorAsync("#LanguageDropDown div[x-show]", new()
    {
        State = WaitForSelectorState.Hidden
    });

isVisible = await Page.Locator("#LanguageDropDown div[x-show]").IsVisibleAsync();
    Assert.False(isVisible);
}
```

### Att testa former med bekräftelse

```csharp
[Fact]
public async Task CommentForm_ValidatesRequiredFields()
{
    await NavigateAsync("/blog/some-post");

// Try to submit without filling fields
    await Page.Locator("#comment-submit").ClickAsync();

// Check HTML5 validation messages
    var nameInput = Page.Locator("#comment-name");
    var validationMessage = await nameInput.EvaluateAsync<string>("el => el.validationMessage");

Assert.NotEmpty(validationMessage);
    Output.WriteLine($"Validation message: {validationMessage}");

// Fill form properly
    await nameInput.FillAsync("Test User");
    await Page.Locator("#comment-email").FillAsync("test@example.com");
    await Page.Locator("#comment-content").FillAsync("Great article!");

// Submit
    await Page.Locator("#comment-submit").ClickAsync();

// Wait for success
    await Page.Locator(".comment-success").WaitForAsync();
}
```

## avancerade spelförfattare egenskaper

### Network Interception - Mer kraftfullt än PuppeteerSharp

```csharp
[Fact]
public async Task PageLoadsWithoutImages_ToTestPerformance()
{
    // Block all image requests
    await Page.RouteAsync("**/*.{png,jpg,jpeg,gif,webp}", route => route.AbortAsync());

await NavigateAsync("/blog");

// Page should still function without images
    var title = await Page.Locator("h1").TextContentAsync();
    Assert.NotEmpty(title);
}

[Fact]
public async Task MockAPIResponse_ForTesting()
{
    // Intercept API calls and return mock data
    await Page.RouteAsync("**/api/posts", route => route.FulfillAsync(new()
    {
        Status = 200,
        ContentType = "application/json",
        Body = System.Text.Json.JsonSerializer.Serialize(new
        {
            posts = new[]
            {
                new { id = 1, title = "Mock Post 1" },
                new { id = 2, title = "Mock Post 2" }
            }
        })
    }));

await NavigateAsync("/blog");

// Should show mock data
    var posts = await Page.Locator(".post-title").CountAsync();
    Assert.Equal(2, posts);
}
```

### Attraktionslärare - Debug-test misslyckades

```csharp
public async Task InitializeAsync()
{
    Playwright = await Microsoft.Playwright.Playwright.CreateAsync();
    Browser = await LaunchBrowserAsync();

// Start tracing
    Context = await Browser.NewContextAsync();
    await Context.Tracing.StartAsync(new()
    {
        Screenshots = true,
        Snapshots = true,
        Sources = true
    });

Page = await Context.NewPageAsync();
}

public async Task DisposeAsync()
{
    // Save trace on test completion
    var tracePath = Path.Combine("traces", $"{TestContext.TestName}.zip");
    await Context.Tracing.StopAsync(new()
    {
        Path = tracePath
    });

// View trace with: playwright show-trace traces/TestName.zip

await Page?.CloseAsync()!;
    await Context?.CloseAsync()!;
    await Browser?.CloseAsync()!;
    Playwright?.Dispose();
}
```

Så titta på spåret:

```bash
playwright show-trace traces/TestName.zip
```

Det här öppnar ett gränssnitt som visar

- Varje handling som din test gjorde
- Screenshots på varje steg
- nätverksbehov
- Konsolens logs
- DOM-snapshots

Det' är fullständigt lysande för att lösa problem.

### Screenshots av ett misslyckande

```csharp
public async Task DisposeAsync()
{
    // Take screenshot if test failed
    if (TestContext.CurrentTestOutcome != TestOutcome.Passed)
    {
        var screenshot = await Page.ScreenshotAsync();
        File.WriteAllBytes($"failure-{TestContext.TestName}.png", screenshot);
        Output.WriteLine($"Screenshot saved: failure-{TestContext.TestName}.png");
    }

await Page?.CloseAsync()!;
    await Context?.CloseAsync()!;
    await Browser?.CloseAsync()!;
    Playwright?.Dispose();
}
```

### Mobil Emulering

```csharp
[Fact]
public async Task BlogPage_WorksOnMobile()
{
    // Create context with mobile emulation
    var iPhone = Playwright.Devices["iPhone 13"];
    await using var context = await Browser.NewContextAsync(iPhone);
    await using var page = await context.NewPageAsync();

await page.GotoAsync($"{BaseUrl}/blog");

// Check mobile menu is visible
    var mobileMenu = page.Locator(".mobile-menu");
    await Expect(mobileMenu).ToBeVisibleAsync();

// Desktop menu should be hidden
    var desktopMenu = page.Locator(".desktop-menu");
    await Expect(desktopMenu).Not.ToBeVisibleAsync();
}
```

Dramatikern kommer med [apparatbeschreibunger](https://playwright.dev/dotnet/docs/emulation#devices) för:

- iPhone 13,
- iPad, iPad Pro
- Samsung Galaxy, Pixel
- Och många fler

### Att testa mörka modet

```csharp
[Fact]
public async Task DarkMode_TogglesCorrectly()
{
    // Start with dark color scheme
    await using var context = await Browser.NewContextAsync(new()
    {
        ColorScheme = ColorScheme.Dark
    });
    await using var page = await context.NewPageAsync();

await page.GotoAsync($"{BaseUrl}");

// Check dark mode is active
    var isDark = await page.EvaluateAsync<bool>(
        "() => window.matchMedia('(prefers-color-scheme: dark)').matches"
    );
    Assert.True(isDark);

// Check background color reflects dark mode
    var bgColor = await page.Locator("body").EvaluateAsync<string>(
        "el => getComputedStyle(el).backgroundColor"
    );
    Assert.Contains("rgb(0, 0, 0)", bgColor); // Dark background
}
```

## Dramatiker vs PuppeteerSharp - sida vid sida

Här är samma test i båda biblioteken för att visa skillnaderna.

### PuppeteerSharp-version

```csharp
[Fact]
public async Task FilterTest_PuppeteerSharp()
{
    await Page.GoToAsync("http://localhost:8080/blog");

// Manual waiting required
    await Page.WaitForSelectorAsync("#LanguageDropDown button");
    await Page.ClickAsync("#LanguageDropDown button");

// Wait for dropdown animation
    await Task.Delay(300);

// Click Spanish option
    await Page.WaitForSelectorAsync("#LanguageDropDown li:nth-child(2) a");
    await Page.ClickAsync("#LanguageDropDown li:nth-child(2) a");

// Wait for navigation
    await Task.Delay(500);

// Check URL
    var url = Page.Url;
    Assert.Contains("language=", url);
}
```

### Playwright-version

```csharp
[Fact]
public async Task FilterTest_Playwright()
{
    await Page.GotoAsync("http://localhost:8080/blog");

// Auto-waiting built in
    await Page.Locator("#LanguageDropDown button").ClickAsync();

// Click Spanish option (waits automatically for visibility)
    await Page.Locator("#LanguageDropDown li:has-text('Spanish')").ClickAsync();

// Check URL (waits automatically for navigation)
    await Expect(Page).ToHaveURLAsync(new Regex(".*language=.*"));
}
```

Anmärkning:

- Inget manual `WaitForSelectorAsync` som behövs
- Nej `Task.Delay` som behövs
- Klarare påståenden med `Expect`
- Mer läsbart med `has-text` -selektor

## PDF skapande med Playwright

Som PuppeteerSharp, Playwright kan generera PDFs . API:n är nästan identisk

```csharp
public async Task<byte[]> GeneratePdfAsync(string url)
{
    await using var browser = await Playwright.Chromium.LaunchAsync();
    await using var page = await browser.NewPageAsync();
    await page.GotoAsync(url);

return await page.PdfAsync(new()
    {
        Format = "A4",
        PrintBackground = true,
        Margin = new()
        {
            Top = "20mm",
            Right = "20mm",
            Bottom = "20mm",
            Left = "20mm"
        }
    });
}
```

Samma sak [PDF-kolor från PuppeteerSharp -artikeln](/blog/puppeteersharp-e2e-testing#pdf-generation-gotchas) ansök här också.

## När man ska välja spelförfattare

```mermaid
graph TD
    A[Need E2E Testing?] --> B{Multi-browser required?}
    B -->|Yes| C[Playwright]
    B -->|No| D{Chrome only?}
    D -->|Yes| E[PuppeteerSharp or Playwright]
    D -->|No| C

C --> F[Benefits]
    F --> F1[Test all major browsers]
    F --> F2[Better debugging tools]
    F --> F3[More reliable waiting]
    F --> F4[Mobile emulation]

E --> G[PuppeteerSharp Benefits]
    G --> G1[Simpler setup]
    G --> G2[Smaller overhead]
    G --> G3[Chromium focused]

style C stroke:#00aa00,stroke-width:3px
    style E stroke:#0066cc,stroke-width:2px
```

**Välj spelstil när:**

- Du behöver multi-browsertestning
- Du vill ha bättre lösningsverktyg ( spåra tittare)
- Du testar komplexa moderna webbapps
- Du behöver mobil emulation
- Du vill ha mer tillförlitliga tester

**Välj PuppeteerSharp när:**

- Chrome/Ljuven marginal är bra
- Du vill ha en enklare inställning
- Du är redan bekanta med Puppeteer
- Man behöver lite mindre överhead för resurser

## Running i CI/CD

### Ett exempel på GitHub actions

Playwright arbetar ömtlöst i CI/CD-rören [GitHub-aktioner](https://github.com/features/actions) arbetsflödet:

```yaml
name: Playwright Tests

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  test:
    runs-on: ubuntu-latest

steps:
    - uses: actions/checkout@v3

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

- name: Install dependencies
      run: dotnet restore

- name: Build
      run: dotnet build --no-restore

- name: Install Playwright browsers
      run: pwsh Mostlylucid.Test/bin/Debug/net9.0/playwright.ps1 install --with-deps

- name: Start application
      run: |
        dotnet run --project Mostlylucid/Mostlylucid.csproj &
        echo $! > app.pid

- name: Wait for application
      run: |
        timeout 60 bash -c 'until curl -f http://localhost:8080/health; do sleep 2; done'

- name: Run Playwright tests
      run: |
        dotnet test Mostlylucid.Test/Mostlylucid.Test.csproj \
          --filter "Category=E2E" \
          --logger "console;verbosity=detailed"

- name: Upload test results
      if: always()
      uses: actions/upload-artifact@v3
      with:
        name: playwright-results
        path: |
          **/test-results/
          **/traces/

- name: Stop application
      if: always()
      run: kill $(cat app.pid) || true
```

### Support för Docker

Att köra Playwright-tester i [Docker](https://www.docker.com/) kräver att installera system beroenden:

```dockerfile
FROM mcr.microsoft.com/dotnet/sdk:9.0 AS build

# Install Playwright dependencies
RUN apt-get update && apt-get install -y \
    libnss3 \
    libnspr4 \
    libatk1.0-0 \
    libatk-bridge2.0-0 \
    libcups2 \
    libdrm2 \
    libxkbcommon0 \
    libxcomposite1 \
    libxdamage1 \
    libxfixes3 \
    libxrandr2 \
    libgbm1 \
    libasound2

WORKDIR /app
COPY . .

RUN dotnet restore
RUN dotnet build
RUN pwsh Mostlylucid.Test/bin/Debug/net9.0/playwright.ps1 install

CMD ["dotnet", "test"]
```

## Förmågorsvergleich

Från mina tester på den här bloggen:

| Feature | PoppeterSharp ♫ ♫ | ♫ Dramatikern ♫
|---------|---------------|------------|
| **Chrome-tester hastighet** |
| **Multi-browser** |
| **Auto- väntar på tillförlitlighet** | Bra | ( | handgripligt | ) | | МSK3 | Utmärkt | | automatiskt |
| **minne per webblader** | ~150MB | ♫ ♫ ~180 ♫
| **Setup komplexitet** | Enkel | Mäktig
| **Debugsverktyg** | Chrome DevTools
| **Mobila emulatorer** | Grundlig | Utmärkt |

Playwright är lite långsammare och använder lite mer minne.

## Vanliga Gotchas

### 1. Strängmodi

Playwright's locatorer är standardmässigt strikta

```csharp
// This errors if multiple buttons exist
await Page.Locator("button").ClickAsync();

// Be specific
await Page.Locator("button#submit").ClickAsync();

// Or use .First if you really want the first match
await Page.Locator("button").First.ClickAsync();
```

### 2. Browserinstallation

Att inte glömma att köra `playwright install` efter att ha lagt till paketet. Browserna är inte includeda i NuGet-paketet

### 3. Kontext vs sida

Kom ihåg att kontexter isolerar tester:

```csharp
// Bad - state leaks between tests
await Page.GotoAsync("/login");
// Do stuff...
await Page.GotoAsync("/dashboard");
// Previous login state might still exist

// Good - fresh context per test
await using var context = await Browser.NewContextAsync();
await using var page = await context.NewPageAsync();
// Completely isolated
```

### 4. Webkits skillnader

Safari (WebKit) kan bete sig annorlunda

```csharp
// May work in Chrome but fail in WebKit
await Page.Locator(".dropdown").Hover();
await Page.Locator(".dropdown-item").ClickAsync();

// More reliable across browsers
await Page.Locator(".dropdown").ClickAsync();
await Page.WaitForSelectorAsync(".dropdown-item");
await Page.Locator(".dropdown-item").ClickAsync();
```

## Slutsatsen

Playwright representerar utvecklingen av webbläsarens automatisering för .NET-utvecklare . Om du behöver multi~-~browsersupport, är detM SK4 det är det tydliga valet [Puppeteer-särp](/blog/puppeteersharp-e2e-testing), men vinsterna är substantiva

- Testa över alla större webbsidor med identisk kod
- Bättre tillförlitlighet med automatiserad vänta
- Utmärkt dämpning med spårbekymmer
- Mobila och tablett-emulationer utanför lådan
- Mer motståndskraft mot timingsproblem

**Min tillämpning:**

- **Nya projekt som behöver cross-browsertest**: Start med Dramatiker
- **Bara projekt i Chrome-**: PuppeteerSharp är enklare
- **Existerande PuppeteerSharp-projekt**: Migratera bara om du behöver en multi-browser
- **Kompleksa moderna webbapps**: Playwright 's verktyg är värd överkostnaderna

Bara trace viewer har sparat mig timmar av lösa problem.

Give Playwright a go on your next project - you ' will be pleasantly surprised how much easier it makes cross

## Fortsättning avläsning

- [Lektorin för .NET Dokumentation](https://playwright.dev/dotnet/)
- [Playwright API-referens](https://playwright.dev/dotnet/docs/api/class-playwright)
- [PuppeteerSharp vs Dramatiker](/blog/puppeteersharp-e2e-testing)
- [Attraktionslärares vägledning](https://playwright.dev/dotnet/docs/trace-viewer)
- [Bläddrars kontext förklaras](https://playwright.dev/dotnet/docs/browser-contexts)

This is a preview from the server running through my markdig pipeline

E2E Testing Multi-Browser Playwright Testing xUnit

Multi-Browser EM SK1E Test med Playwright för .NET

Thursday, 27 November 2025

Playwright är Microsofts officiella lösning på modern webblärmningsautomatisering., erbjuder flera supporter för webblader, - Chrome, Firefox, Safari, Safari 6 med en enda API och , byggt, - med spårdebugging och mobil emulering., och mobil modellering.This guide covers everything from setup to advanced testing patterns.M SK11 comparing it with PuppeteerSharp to help you choose the right tool. Puppeteer-särp istället - men om du behöver en omfattande korsning-browsertestingM SK2 spelkunskapen är vägen framåt .

Inleiding

Om du' har läst min artikel på Puppeteer-särp,, du, ', kommer veta att jag är en fan av moderna testverktyg som inte gör det möjligt för dig att slita håret. ., PuppeteerSharp är lysande för Chrome. ♪ ♪ -, bara test. ♫ ♪ Men vad händer om du behöver testa över flera webblader? ♪ Dramatiker kommer in.

Playwright är Microsofts svar på webbläsarens automatiseringsproblem, , och de har lärt sig från allt som kom innan.. Det är similart till PuppeteerSharp och ' som den mer ambitiösa syskonen.

Varför spelar författaren över puppeterSharp?

Missförstå mig inte. Puppeteer-särp är utmärkt om du bara behöver Chrome. Men här's när Playwright är logiskt

Multi-Browserproblemet

De som använder Chrome använder inte alla.

Chrome/Edge: ~65% av användaren
Safari:
Firefox:

En bug som bara dyker upp i Safari kan förlora dig 20% av dina potentiella användare. Playwright låter dig testa alla tre med samma API

Bättre utvecklande erfarenhet

graph TB
    subgraph "PuppeteerSharp"
        PS[Chrome Only]
        PS --> PS1[Fast setup]
        PS --> PS2[Simple API]
        PS --> PS3[Chrome DevTools]
    end

    subgraph "Playwright"
        PW[Multi-Browser]
        PW --> PW1[Chrome, Firefox, Safari]
        PW --> PW2[Auto-waiting built-in]
        PW --> PW3[Trace viewer]
        PW --> PW4[Codegen tool]
        PW --> PW5[Better error messages]
    end

    style PW stroke:#00aa00,stroke-width:3px
    style PW1 stroke:#0066cc,stroke-width:2px
    style PW3 stroke:#0066cc,stroke-width:2px
    style PW4 stroke:#0066cc,stroke-width:2px

Nyckliga fördelar

Multi-browserstöd - Test Chrome, FirefoxM SK2 Safari med samma kod
Bättre automatisering - En mer tillförlitlig utom lådan , färre fläcktest
Trägläser - spela in fulla spår av testrunner för att riva
Kodgen - Generera testkod genom att interagera med din sida
nätverksinterceptering - Mer kraftfullt än PuppeteerSharp
Moderna webfunktioner - Bättre stöd för Shadow DOM

Att sätta upp spelförfattare för .NET

Installera Microsoft.Playwright NuGet package:

dotnet add package Microsoft.Playwright
dotnet add package Microsoft.Playwright.NUnit  # Or use xUnit

Installera sedan webbläsaren (den här ladda ner Chromium, Firefox, och WebKit):

pwsh bin/Debug/net9.0/playwright.ps1 install

Eller på Linux

playwright install

Nota: Den första webbläsaren installerar alla nedläppningar runt 400MB. De efterföljande uppdaterarna är mycket mindre

Här är mitt testprojekts konfiguration.

<PackageReference Include="Microsoft.Playwright" Version="1.48.0" />
<PackageReference Include="Microsoft.Playwright.NUnit" Version="1.48.0" />
<PackageReference Include="xunit" Version="2.9.3" />
<PackageReference Include="xunit.runner.visualstudio" Version="3.1.4">
  <PrivateAssets>all</PrivateAssets>
  <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>

I'm använder xUnit, men Playwright fungerar lika bra med NUnit eller MStest. Faktum är att NUnit-integration med ytterligare hjälparbetare.

Att skapa en testklass

liknande Puppeteer-särp, men med flera supporter

Klassenstrukturen

using Microsoft.Playwright;
using Xunit.Abstractions;

namespace Mostlylucid.Test.E2E;

public abstract class PlaywrightTestBase : IAsyncLifetime
{
    protected IPlaywright Playwright = null!;
    protected IBrowser Browser = null!;
    protected IBrowserContext Context = null!;
    protected IPage Page = null!;

    protected readonly ITestOutputHelper Output;
    protected const string BaseUrl = "http://localhost:8080";

    // Override this in derived classes to test different browsers
    protected virtual BrowserType BrowserType => BrowserType.Chromium;

    protected PlaywrightTestBase(ITestOutputHelper output)
    {
        Output = output;
    }

    public async Task InitializeAsync()
    {
        // Create Playwright instance
        Playwright = await Microsoft.Playwright.Playwright.CreateAsync();

        // Launch the specified browser
        Browser = await LaunchBrowserAsync();

        // Create a new context (like an incognito window)
        Context = await Browser.NewContextAsync(new BrowserNewContextOptions
        {
            ViewportSize = new ViewportSize { Width = 1400, Height = 900 },
            IgnoreHTTPSErrors = true
        });

        // Create a new page
        Page = await Context.NewPageAsync();

        // Set default timeout
        Page.SetDefaultTimeout(30000);
    }

    private async Task<IBrowser> LaunchBrowserAsync()
    {
        var options = new BrowserTypeLaunchOptions
        {
            Headless = true, // Set to false for debugging
        };

        return BrowserType switch
        {
            BrowserType.Chromium => await Playwright.Chromium.LaunchAsync(options),
            BrowserType.Firefox => await Playwright.Firefox.LaunchAsync(options),
            BrowserType.Webkit => await Playwright.Webkit.LaunchAsync(options),
            _ => throw new ArgumentException($"Unknown browser type: {BrowserType}")
        };
    }

    public async Task DisposeAsync()
    {
        await Page?.CloseAsync()!;
        await Context?.CloseAsync()!;
        await Browser?.CloseAsync()!;
        Playwright?.Dispose();
    }
}

public enum BrowserType
{
    Chromium,
    Firefox,
    Webkit
}

Varför Browserkontexter?

Lägg märke till att vi skapar Context före att skapa en Page. Det här är ett teaterkoncept som PuppeteerSharp inte har

Kontext = Isolerad webblader sessie (lik incognito-läger
Page = En tab i den kontexten

Kontexten låter dig

Testa med olika användare samtidigt
Se olika cookies , rättigheter, eller lokalisering per kontext
Isolera tester fullständigt ( även inom samma webblader instans )

hjälpmetoder

// Navigation with better waiting
protected async Task NavigateAsync(string path)
{
    var url = path.StartsWith("http") ? path : $"{BaseUrl}{path}";
    await Page.GotoAsync(url, new PageGotoOptions
    {
        WaitUntil = WaitUntilState.NetworkIdle
    });
}

// Playwright has better built-in waiting, but these are still useful
protected async Task<IElementHandle?> WaitForSelectorAsync(string selector)
{
    try
    {
        return await Page.WaitForSelectorAsync(selector, new PageWaitForSelectorOptions
        {
            State = WaitForSelectorState.Visible
        });
    }
    catch (TimeoutException)
    {
        return null;
    }
}

// Improved element operations with auto-waiting
protected async Task<bool> ElementExistsAsync(string selector)
{
    return await Page.Locator(selector).CountAsync() > 0;
}

protected async Task<string?> GetTextContentAsync(string selector)
{
    var locator = Page.Locator(selector);
    return await locator.TextContentAsync();
}

protected async Task TypeAsync(string selector, string text)
{
    await Page.Locator(selector).FillAsync(text);
}

protected async Task ClickAsync(string selector)
{
    await Page.Locator(selector).ClickAsync();
}

Verklare - Dramatiker 's hemliga vapen

Notera att Page.Locator() ringer? Det här skiljer sig från PuppeteerSharp . QuerySelector. Lokaliseringsfaktorerna är

Låg - De frågar inte DOM tills du använder dem
Att försöka igen - De väntar och testar operationer automatiskt
Strängt - De stöter på fel om flera element matchar.

// PuppeteerSharp way (manual waiting)
await Page.WaitForSelectorAsync("#button");
await Page.ClickAsync("#button");

// Playwright way (auto-waiting)
await Page.Locator("#button").ClickAsync(); // Waits automatically!

Multi-Browser Testing

Här' där Playwright skiner . Du kan köra samma test över alla webbsidor

Att använda xUnitteori för Multi-Browser-tester

public class CrossBrowserTests : PlaywrightTestBase
{
    public CrossBrowserTests(ITestOutputHelper output) : base(output) { }

    [Theory]
    [InlineData(BrowserType.Chromium)]
    [InlineData(BrowserType.Firefox)]
    [InlineData(BrowserType.Webkit)]
    public async Task HomePage_LoadsCorrectly_InAllBrowsers(BrowserType browserType)
    {
        // Override the browser type for this test
        BrowserType = browserType;
        await InitializeAsync();

        // Arrange & Act
        await NavigateAsync("/");

        // Assert
        var title = await Page.TitleAsync();
        Assert.Contains("Mostlylucid", title);

        Output.WriteLine($"✓ Test passed in {browserType}");
    }
}

Browser- Spesifika testklassen

Eller skapa separata testklassen för varje webblader:

public class ChromiumTests : PlaywrightTestBase
{
    protected override BrowserType BrowserType => BrowserType.Chromium;

    public ChromiumTests(ITestOutputHelper output) : base(output) { }

    [Fact]
    public async Task FilterBar_WorksInChrome()
    {
        await NavigateAsync("/blog");

        await Page.Locator("#LanguageDropDown button").ClickAsync();
        await Page.Locator("#LanguageDropDown li:has-text('Spanish')").ClickAsync();

        var url = Page.Url;
        Assert.Contains("language=es", url);
    }
}

public class FirefoxTests : PlaywrightTestBase
{
    protected override BrowserType BrowserType => BrowserType.Firefox;

    public FirefoxTests(ITestOutputHelper output) : base(output) { }

    [Fact]
    public async Task FilterBar_WorksInFirefox()
    {
        // Same test, different browser!
        await NavigateAsync("/blog");

        await Page.Locator("#LanguageDropDown button").ClickAsync();
        await Page.Locator("#LanguageDropDown li:has-text('Spanish')").ClickAsync();

        var url = Page.Url;
        Assert.Contains("language=es", url);
    }
}

public class SafariTests : PlaywrightTestBase
{
    protected override BrowserType BrowserType => BrowserType.Webkit;

    public SafariTests(ITestOutputHelper output) : base(output) { }

    [Fact]
    public async Task FilterBar_WorksInSafari()
    {
        await NavigateAsync("/blog");

        await Page.Locator("#LanguageDropDown button").ClickAsync();
        await Page.Locator("#LanguageDropDown li:has-text('Spanish')").ClickAsync();

        var url = Page.Url;
        Assert.Contains("language=es", url);
    }
}

Att skriva tester - Playwright Way

Låt oss titta på riktiga exempel som visar Playwrights fördelar med

Att testa HTMX med Auto-Låd

[Fact]
public async Task SortingDropdown_UpdatesContentViaHTMX()
{
    // Arrange
    await NavigateAsync("/blog");

    // Get first post title before sorting
    var firstPostBefore = await Page.Locator("article h2 a").First.TextContentAsync();
    Output.WriteLine($"First post before: {firstPostBefore}");

    // Act - Change sort order
    await Page.Locator("#orderSelect").SelectOptionAsync("date_asc");

    // Playwright automatically waits for HTMX to update the DOM!
    await Page.WaitForLoadStateAsync(LoadState.NetworkIdle);

    // Assert - Content should have changed
    var firstPostAfter = await Page.Locator("article h2 a").First.TextContentAsync();
    Output.WriteLine($"First post after: {firstPostAfter}");

    var selectValue = await Page.Locator("#orderSelect").InputValueAsync();
    Assert.Equal("date_asc", selectValue);
}

Att testa Alpine.js interaktioner

Playwright-handler Alpine.js reaktivitet och animering ömtlöst:

[Fact]
public async Task AlpineDropdown_OpensAndCloses()
{
    await NavigateAsync("/blog");

    // Click to open dropdown (Alpine.js controlled)
    await Page.Locator("#LanguageDropDown button").ClickAsync();

    // Wait for Alpine.js animation
    await Page.WaitForSelectorAsync("#LanguageDropDown div[x-show]", new()
    {
        State = WaitForSelectorState.Visible
    });

    // Check dropdown is visible
    var isVisible = await Page.Locator("#LanguageDropDown div[x-show]").IsVisibleAsync();
    Assert.True(isVisible);

    // Click outside to close
    await Page.Locator("body").ClickAsync(new LocatorClickOptions
    {
        Position = new Position { X = 0, Y = 0 }
    });

    // Verify closed
    await Page.WaitForSelectorAsync("#LanguageDropDown div[x-show]", new()
    {
        State = WaitForSelectorState.Hidden
    });

    isVisible = await Page.Locator("#LanguageDropDown div[x-show]").IsVisibleAsync();
    Assert.False(isVisible);
}

Att testa former med bekräftelse

[Fact]
public async Task CommentForm_ValidatesRequiredFields()
{
    await NavigateAsync("/blog/some-post");

    // Try to submit without filling fields
    await Page.Locator("#comment-submit").ClickAsync();

    // Check HTML5 validation messages
    var nameInput = Page.Locator("#comment-name");
    var validationMessage = await nameInput.EvaluateAsync<string>("el => el.validationMessage");

    Assert.NotEmpty(validationMessage);
    Output.WriteLine($"Validation message: {validationMessage}");

    // Fill form properly
    await nameInput.FillAsync("Test User");
    await Page.Locator("#comment-email").FillAsync("[email protected]");
    await Page.Locator("#comment-content").FillAsync("Great article!");

    // Submit
    await Page.Locator("#comment-submit").ClickAsync();

    // Wait for success
    await Page.Locator(".comment-success").WaitForAsync();
}

avancerade spelförfattare egenskaper

Network Interception - Mer kraftfullt än PuppeteerSharp

[Fact]
public async Task PageLoadsWithoutImages_ToTestPerformance()
{
    // Block all image requests
    await Page.RouteAsync("**/*.{png,jpg,jpeg,gif,webp}", route => route.AbortAsync());

    await NavigateAsync("/blog");

    // Page should still function without images
    var title = await Page.Locator("h1").TextContentAsync();
    Assert.NotEmpty(title);
}

[Fact]
public async Task MockAPIResponse_ForTesting()
{
    // Intercept API calls and return mock data
    await Page.RouteAsync("**/api/posts", route => route.FulfillAsync(new()
    {
        Status = 200,
        ContentType = "application/json",
        Body = System.Text.Json.JsonSerializer.Serialize(new
        {
            posts = new[]
            {
                new { id = 1, title = "Mock Post 1" },
                new { id = 2, title = "Mock Post 2" }
            }
        })
    }));

    await NavigateAsync("/blog");

    // Should show mock data
    var posts = await Page.Locator(".post-title").CountAsync();
    Assert.Equal(2, posts);
}

Attraktionslärare - Debug-test misslyckades

public async Task InitializeAsync()
{
    Playwright = await Microsoft.Playwright.Playwright.CreateAsync();
    Browser = await LaunchBrowserAsync();

    // Start tracing
    Context = await Browser.NewContextAsync();
    await Context.Tracing.StartAsync(new()
    {
        Screenshots = true,
        Snapshots = true,
        Sources = true
    });

    Page = await Context.NewPageAsync();
}

public async Task DisposeAsync()
{
    // Save trace on test completion
    var tracePath = Path.Combine("traces", $"{TestContext.TestName}.zip");
    await Context.Tracing.StopAsync(new()
    {
        Path = tracePath
    });

    // View trace with: playwright show-trace traces/TestName.zip

    await Page?.CloseAsync()!;
    await Context?.CloseAsync()!;
    await Browser?.CloseAsync()!;
    Playwright?.Dispose();
}

Så titta på spåret:

playwright show-trace traces/TestName.zip

Det här öppnar ett gränssnitt som visar

Varje handling som din test gjorde
Screenshots på varje steg
nätverksbehov
Konsolens logs
DOM-snapshots

Det' är fullständigt lysande för att lösa problem.

Screenshots av ett misslyckande

public async Task DisposeAsync()
{
    // Take screenshot if test failed
    if (TestContext.CurrentTestOutcome != TestOutcome.Passed)
    {
        var screenshot = await Page.ScreenshotAsync();
        File.WriteAllBytes($"failure-{TestContext.TestName}.png", screenshot);
        Output.WriteLine($"Screenshot saved: failure-{TestContext.TestName}.png");
    }

    await Page?.CloseAsync()!;
    await Context?.CloseAsync()!;
    await Browser?.CloseAsync()!;
    Playwright?.Dispose();
}

Mobil Emulering

[Fact]
public async Task BlogPage_WorksOnMobile()
{
    // Create context with mobile emulation
    var iPhone = Playwright.Devices["iPhone 13"];
    await using var context = await Browser.NewContextAsync(iPhone);
    await using var page = await context.NewPageAsync();

    await page.GotoAsync($"{BaseUrl}/blog");

    // Check mobile menu is visible
    var mobileMenu = page.Locator(".mobile-menu");
    await Expect(mobileMenu).ToBeVisibleAsync();

    // Desktop menu should be hidden
    var desktopMenu = page.Locator(".desktop-menu");
    await Expect(desktopMenu).Not.ToBeVisibleAsync();
}

Dramatikern kommer med apparatbeschreibunger för:

iPhone 13,
iPad, iPad Pro
Samsung Galaxy, Pixel
Och många fler

Att testa mörka modet

[Fact]
public async Task DarkMode_TogglesCorrectly()
{
    // Start with dark color scheme
    await using var context = await Browser.NewContextAsync(new()
    {
        ColorScheme = ColorScheme.Dark
    });
    await using var page = await context.NewPageAsync();

    await page.GotoAsync($"{BaseUrl}");

    // Check dark mode is active
    var isDark = await page.EvaluateAsync<bool>(
        "() => window.matchMedia('(prefers-color-scheme: dark)').matches"
    );
    Assert.True(isDark);

    // Check background color reflects dark mode
    var bgColor = await page.Locator("body").EvaluateAsync<string>(
        "el => getComputedStyle(el).backgroundColor"
    );
    Assert.Contains("rgb(0, 0, 0)", bgColor); // Dark background
}

Dramatiker vs PuppeteerSharp - sida vid sida

Här är samma test i båda biblioteken för att visa skillnaderna.

PuppeteerSharp-version

[Fact]
public async Task FilterTest_PuppeteerSharp()
{
    await Page.GoToAsync("http://localhost:8080/blog");

    // Manual waiting required
    await Page.WaitForSelectorAsync("#LanguageDropDown button");
    await Page.ClickAsync("#LanguageDropDown button");

    // Wait for dropdown animation
    await Task.Delay(300);

    // Click Spanish option
    await Page.WaitForSelectorAsync("#LanguageDropDown li:nth-child(2) a");
    await Page.ClickAsync("#LanguageDropDown li:nth-child(2) a");

    // Wait for navigation
    await Task.Delay(500);

    // Check URL
    var url = Page.Url;
    Assert.Contains("language=", url);
}

Playwright-version

[Fact]
public async Task FilterTest_Playwright()
{
    await Page.GotoAsync("http://localhost:8080/blog");

    // Auto-waiting built in
    await Page.Locator("#LanguageDropDown button").ClickAsync();

    // Click Spanish option (waits automatically for visibility)
    await Page.Locator("#LanguageDropDown li:has-text('Spanish')").ClickAsync();

    // Check URL (waits automatically for navigation)
    await Expect(Page).ToHaveURLAsync(new Regex(".*language=.*"));
}

Anmärkning:

Inget manual WaitForSelectorAsync som behövs
Nej Task.Delay som behövs
Klarare påståenden med Expect
Mer läsbart med has-text -selektor

PDF skapande med Playwright

Som PuppeteerSharp, Playwright kan generera PDFs . API:n är nästan identisk

public async Task<byte[]> GeneratePdfAsync(string url)
{
    await using var browser = await Playwright.Chromium.LaunchAsync();
    await using var page = await browser.NewPageAsync();
    await page.GotoAsync(url);

    return await page.PdfAsync(new()
    {
        Format = "A4",
        PrintBackground = true,
        Margin = new()
        {
            Top = "20mm",
            Right = "20mm",
            Bottom = "20mm",
            Left = "20mm"
        }
    });
}

Samma sak PDF-kolor från PuppeteerSharp -artikeln ansök här också.

När man ska välja spelförfattare

graph TD
    A[Need E2E Testing?] --> B{Multi-browser required?}
    B -->|Yes| C[Playwright]
    B -->|No| D{Chrome only?}
    D -->|Yes| E[PuppeteerSharp or Playwright]
    D -->|No| C

    C --> F[Benefits]
    F --> F1[Test all major browsers]
    F --> F2[Better debugging tools]
    F --> F3[More reliable waiting]
    F --> F4[Mobile emulation]

    E --> G[PuppeteerSharp Benefits]
    G --> G1[Simpler setup]
    G --> G2[Smaller overhead]
    G --> G3[Chromium focused]

    style C stroke:#00aa00,stroke-width:3px
    style E stroke:#0066cc,stroke-width:2px

Välj spelstil när:

Du behöver multi-browsertestning
Du vill ha bättre lösningsverktyg ( spåra tittare)
Du testar komplexa moderna webbapps
Du behöver mobil emulation
Du vill ha mer tillförlitliga tester

Välj PuppeteerSharp när:

Chrome/Ljuven marginal är bra
Du vill ha en enklare inställning
Du är redan bekanta med Puppeteer
Man behöver lite mindre överhead för resurser

Running i CI/CD

Ett exempel på GitHub actions

Playwright arbetar ömtlöst i CI/CD-rören GitHub-aktioner arbetsflödet:

name: Playwright Tests

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3

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

    - name: Install dependencies
      run: dotnet restore

    - name: Build
      run: dotnet build --no-restore

    - name: Install Playwright browsers
      run: pwsh Mostlylucid.Test/bin/Debug/net9.0/playwright.ps1 install --with-deps

    - name: Start application
      run: |
        dotnet run --project Mostlylucid/Mostlylucid.csproj &
        echo $! > app.pid

    - name: Wait for application
      run: |
        timeout 60 bash -c 'until curl -f http://localhost:8080/health; do sleep 2; done'

    - name: Run Playwright tests
      run: |
        dotnet test Mostlylucid.Test/Mostlylucid.Test.csproj \
          --filter "Category=E2E" \
          --logger "console;verbosity=detailed"

    - name: Upload test results
      if: always()
      uses: actions/upload-artifact@v3
      with:
        name: playwright-results
        path: |
          **/test-results/
          **/traces/

    - name: Stop application
      if: always()
      run: kill $(cat app.pid) || true

Support för Docker

Att köra Playwright-tester i Docker kräver att installera system beroenden:

FROM mcr.microsoft.com/dotnet/sdk:9.0 AS build

# Install Playwright dependencies
RUN apt-get update && apt-get install -y \
    libnss3 \
    libnspr4 \
    libatk1.0-0 \
    libatk-bridge2.0-0 \
    libcups2 \
    libdrm2 \
    libxkbcommon0 \
    libxcomposite1 \
    libxdamage1 \
    libxfixes3 \
    libxrandr2 \
    libgbm1 \
    libasound2

WORKDIR /app
COPY . .

RUN dotnet restore
RUN dotnet build
RUN pwsh Mostlylucid.Test/bin/Debug/net9.0/playwright.ps1 install

CMD ["dotnet", "test"]

Förmågorsvergleich

Från mina tester på den här bloggen:

Feature	PoppeterSharp ♫ ♫	♫ Dramatikern ♫
Chrome-tester hastighet
Multi-browser
Auto- väntar på tillförlitlighet	Bra	(	handgripligt	)	МSK3	Utmärkt	automatiskt
minne per webblader	~150MB	♫ ♫ ~180 ♫
Setup komplexitet	Enkel	Mäktig
Debugsverktyg	Chrome DevTools
Mobila emulatorer	Grundlig	Utmärkt

Playwright är lite långsammare och använder lite mer minne.

Vanliga Gotchas

1. Strängmodi

Playwright's locatorer är standardmässigt strikta

// This errors if multiple buttons exist
await Page.Locator("button").ClickAsync();

// Be specific
await Page.Locator("button#submit").ClickAsync();

// Or use .First if you really want the first match
await Page.Locator("button").First.ClickAsync();

2. Browserinstallation

Att inte glömma att köra playwright install efter att ha lagt till paketet. Browserna är inte includeda i NuGet-paketet

3. Kontext vs sida

Kom ihåg att kontexter isolerar tester:

// Bad - state leaks between tests
await Page.GotoAsync("/login");
// Do stuff...
await Page.GotoAsync("/dashboard");
// Previous login state might still exist

// Good - fresh context per test
await using var context = await Browser.NewContextAsync();
await using var page = await context.NewPageAsync();
// Completely isolated

4. Webkits skillnader

Safari (WebKit) kan bete sig annorlunda

// May work in Chrome but fail in WebKit
await Page.Locator(".dropdown").Hover();
await Page.Locator(".dropdown-item").ClickAsync();

// More reliable across browsers
await Page.Locator(".dropdown").ClickAsync();
await Page.WaitForSelectorAsync(".dropdown-item");
await Page.Locator(".dropdown-item").ClickAsync();

Slutsatsen

Playwright representerar utvecklingen av webbläsarens automatisering för .NET-utvecklare . Om du behöver multi_-browsersupport, är detM SK4 det är det tydliga valet Puppeteer-särp, men vinsterna är substantiva

Testa över alla större webbsidor med identisk kod
Bättre tillförlitlighet med automatiserad vänta
Utmärkt dämpning med spårbekymmer
Mobila och tablett-emulationer utanför lådan
Mer motståndskraft mot timingsproblem

Min tillämpning:

Nya projekt som behöver cross-browsertest: Start med Dramatiker
Bara projekt i Chrome-: PuppeteerSharp är enklare
Existerande PuppeteerSharp-projekt: Migratera bara om du behöver en multi-browser
Kompleksa moderna webbapps: Playwright 's verktyg är värd överkostnaderna

Bara trace viewer har sparat mig timmar av lösa problem.

Give Playwright a go on your next project - you ' will be pleasantly surprised how much easier it makes cross