[dev-v5] [Playwrights Tests] Add fundamentals for Playwright testing

[dvoituron]

[dev-v5] [Playwrights Tests] Add fundamentals for Playwright testing

Add a new Components.IntegrationTests Blazor Server project including Playwrights.
This project can be launched to display test pages.

Integration tests using Playwright for .NET

Running the tests

First, make sure you have the Playwright for .NET package installed. If you don't, follow the instructions in the next section.

• Build the InegrationTests project to generate the test assembly in the Debug folder: dotnet build.
• Next, install the Playwright browsers, running the playwright.ps1 script.

dotnet build
pwsh bin/Debug/net<version>/playwright.ps1 install

Web Server for testing

The tests are running against a local web server.
This server is automatically started and stopped by the tests (see StartServerFixture.cs).

The server is started to listen on http://localhost:5050.

To start the server automatically, you need to include the test in a specific collection of tests:

[Collection(StartServerCollection.Name)]
public class FluentButtonTests : FluentPlaywrightBaseTest
{
    public FluentButtonTests(ITestOutputHelper output, StartServerFixture server)
        : base(output, server)
    {
    }

    [Fact]
    public async Task FluentButton_IncrementCounter()
    {
        // Arrange
        var page = await WaitOpenPageAsync($"/button/default");
        
        // Act
        await page.ClickAsync("fluent-button");
        await Task.Delay(100);  // Wait for page to render
        
        // Assert
        var content = await page.ContentAsync();
        Assert.Contains("Current count: 1", content);
    }
}

⚠️ Notes:

If you interrupt a test abruptly (for example, by pressing the Stop button on the Test Explorer)
it is possible that the StartServerFixture.DisposeAsync procedure will not be called.
In this case, the web server remains running.
This can block the next compilation of the code.

Could not copy "...\apphost.exe" to "bin\Debug\Microsoft.FluentUI.AspNetCore.Components.IntegrationTests.exe".
Exceeded retry count of 10. Failed.
The file is locked by: "Microsoft.FluentUI.AspNetCore.Components.IntegrationTests"

You can kill it manually using the Task Manager (filtering on ‘IntegrationTests’).

[github-actions]

✅ All tests passed successfully

Details on your Workflow / Core Tests page.

[github-actions]

Summary - Unit Tests Code Coverage

Summary

Generated on:	11/22/2024 - 09:46:31
Coverage date:	11/22/2024 - 09:46:18
Parser:	Cobertura
Assemblies:	1
Classes:	33
Files:	39
Line coverage:	98.9% (723 of 731)
Covered lines:	723
Uncovered lines:	8
Coverable lines:	731
Total lines:	3496
Branch coverage:	92.8% (478 of 515)
Covered branches:	478
Total branches:	515
Method coverage:	Feature is only available for sponsors
Tag:	2021_11970208017

Coverage

Microsoft.FluentUI.AspNetCore.Components - 98.9%

Name	Line	Branch
Microsoft.FluentUI.AspNetCore.Components	98.9%	92.8%
Microsoft.FluentUI.AspNetCore.Components.Extensions.EnumExtensions	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Extensions.FluentInputExtensions	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentButton	100%	89.5%
Microsoft.FluentUI.AspNetCore.Components.FluentComponentBase	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentGrid	100%	90%
Microsoft.FluentUI.AspNetCore.Components.FluentGridItem	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentIcon`1	100%	95.8%
Microsoft.FluentUI.AspNetCore.Components.FluentInputBase`1	100%	83.3%
Microsoft.FluentUI.AspNetCore.Components.FluentInputImmediateBase`1	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentJSModule	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentLabel	100%
Microsoft.FluentUI.AspNetCore.Components.FluentLayout	100%	71.4%
Microsoft.FluentUI.AspNetCore.Components.FluentLayoutHamburger	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentLayoutItem	100%	89.2%
Microsoft.FluentUI.AspNetCore.Components.FluentListBase`1	93.3%	94.7%
Microsoft.FluentUI.AspNetCore.Components.FluentOption	91.6%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentSelect`1	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentText	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentTextInput	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Icon	100%	91.1%
Microsoft.FluentUI.AspNetCore.Components.IconFromImage	100%
Microsoft.FluentUI.AspNetCore.Components.IconInfo	100%
Microsoft.FluentUI.AspNetCore.Components.InternalListContext`1	60%
Microsoft.FluentUI.AspNetCore.Components.Migration.AppearanceExtensions	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Migration.FluentInputAppearanceExt ensions	83.3%	75%
Microsoft.FluentUI.AspNetCore.Components.Utilities.AddTag	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Utilities.CssBuilder	100%	92.8%
Microsoft.FluentUI.AspNetCore.Components.Utilities.Debounce	100%	83.3%
Microsoft.FluentUI.AspNetCore.Components.Utilities.Identifier	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Utilities.IdentifierContext	100%	75%
Microsoft.FluentUI.AspNetCore.Components.Utilities.InlineStyleBuilder	100%	92.8%
Microsoft.FluentUI.AspNetCore.Components.Utilities.InternalDebounce.Dispatc herTimerExtensions	95.7%	75%
Microsoft.FluentUI.AspNetCore.Components.Utilities.StyleBuilder	100%	100%