-
Notifications
You must be signed in to change notification settings - Fork 377
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[dev-v5] [Playwrights Tests] Add fundamentals for Playwright testing (#…
- Loading branch information
Showing
19 changed files
with
496 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
<Project Sdk="Microsoft.NET.Sdk.Web"> | ||
|
||
<PropertyGroup> | ||
<TargetFramework>net9.0</TargetFramework> | ||
<ImplicitUsings>enable</ImplicitUsings> | ||
<Nullable>enable</Nullable> | ||
<LangVersion>latest</LangVersion> | ||
<GenerateDocumentationFile>true</GenerateDocumentationFile> | ||
<IsPackable>false</IsPackable> | ||
<StartupObject>Microsoft.FluentUI.AspNetCore.Components.IntegrationTests.WebServer.Program</StartupObject> | ||
<AssemblyName>Microsoft.FluentUI.AspNetCore.Components.IntegrationTests</AssemblyName> | ||
<RootNamespace>Microsoft.FluentUI.AspNetCore.Components.IntegrationTests</RootNamespace> | ||
</PropertyGroup> | ||
|
||
<ItemGroup> | ||
<PackageReference Include="bunit" /> | ||
<PackageReference Include="Microsoft.AspNetCore.Mvc.Testing" /> | ||
<PackageReference Include="Microsoft.Playwright" /> | ||
<PackageReference Include="Microsoft.NET.Test.Sdk" /> | ||
<PackageReference Include="xunit" /> | ||
<PackageReference Include="xunit.runner.visualstudio"> | ||
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets> | ||
<PrivateAssets>all</PrivateAssets> | ||
</PackageReference> | ||
</ItemGroup> | ||
|
||
<ItemGroup> | ||
<ProjectReference Include="..\..\src\Core\Microsoft.FluentUI.AspNetCore.Components.csproj" /> | ||
</ItemGroup> | ||
|
||
</Project> |
16 changes: 16 additions & 0 deletions
16
tests/Integration/Components/Button/Examples/DefaultPage.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
@page "/button/default" | ||
|
||
<div> | ||
Current count: @Value | ||
</div> | ||
<FluentButton Appearance="ButtonAppearance.Primary" OnClick="@Increment">Increment</FluentButton> | ||
|
||
@code | ||
{ | ||
private int Value = 0; | ||
|
||
private void Increment() | ||
{ | ||
Value++; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
// ------------------------------------------------------------------------ | ||
// MIT License - Copyright (c) Microsoft Corporation. All rights reserved. | ||
// ------------------------------------------------------------------------ | ||
|
||
using Microsoft.FluentUI.AspNetCore.Components.IntegrationTests.WebServer; | ||
using Microsoft.Playwright; | ||
using Xunit; | ||
using Xunit.Abstractions; | ||
|
||
namespace Microsoft.FluentUI.AspNetCore.Components.IntegrationTests.Components.Button; | ||
|
||
[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", openDevTools: false); | ||
|
||
// Act | ||
await page.ClickAsync("fluent-button"); | ||
await Task.Delay(100); // Wait for page to render | ||
|
||
// Assert | ||
var content = await page.ContentAsync(); | ||
await page.ScreenshotAsync(new() | ||
{ | ||
Path = $"{Server.ScreenshotsFolder}FluentButton_IncrementCounter.png" | ||
}); | ||
|
||
Trace.WriteLine(content); | ||
|
||
Assert.Contains("Current count: 1", content); | ||
} | ||
} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
// ------------------------------------------------------------------------ | ||
// MIT License - Copyright (c) Microsoft Corporation. All rights reserved. | ||
// ------------------------------------------------------------------------ | ||
|
||
using Microsoft.FluentUI.AspNetCore.Components.IntegrationTests.WebServer; | ||
using Microsoft.Playwright; | ||
using Xunit.Abstractions; | ||
|
||
namespace Microsoft.FluentUI.AspNetCore.Components.IntegrationTests.Components; | ||
|
||
#pragma warning disable CS0612 // Type or member is obsolete | ||
|
||
public abstract class FluentPlaywrightBaseTest : IAsyncDisposable, IDisposable | ||
{ | ||
private IPlaywright? _playwright; | ||
private IBrowser? _browser; | ||
|
||
/// <summary> | ||
/// Constructor for the FluentPlaywrightBaseTest | ||
/// </summary> | ||
/// <param name="output"></param> | ||
/// <param name="server"></param> | ||
protected FluentPlaywrightBaseTest(ITestOutputHelper output, StartServerFixture server) | ||
{ | ||
Trace = output; | ||
Server = server; | ||
} | ||
|
||
/// <summary> | ||
/// Output helper for logging | ||
/// </summary> | ||
public virtual ITestOutputHelper Trace { get; set; } | ||
|
||
/// <summary> | ||
/// Server fixture for starting the server | ||
/// </summary> | ||
protected virtual StartServerFixture Server { get; set; } | ||
|
||
public async Task<IPage> WaitOpenPageAsync(string url, bool openDevTools = false) | ||
{ | ||
_playwright = await Playwright.Playwright.CreateAsync(); | ||
_browser = await _playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions() | ||
{ | ||
Devtools = openDevTools | ||
}); | ||
|
||
var page = await _browser.NewPageAsync(); | ||
page.Console += (_, msg) => Trace.WriteLine(msg.Text); | ||
|
||
await page.GotoAsync($"{Server.BaseUrl}{url}"); | ||
await page.WaitForConsoleMessageAsync(new PageWaitForConsoleMessageOptions() | ||
{ | ||
Predicate = msg => msg.Text.Contains("WebSocket connected"), | ||
Timeout = 1000 | ||
}); | ||
await Task.Delay(100); // Wait for page to render | ||
|
||
return page; | ||
} | ||
|
||
public void Dispose() | ||
{ | ||
Task.Run(async () => await DisposeAsync()); | ||
} | ||
|
||
public async ValueTask DisposeAsync() | ||
{ | ||
if (_browser != null) | ||
{ | ||
await _browser.CloseAsync(); | ||
} | ||
|
||
_playwright?.Dispose(); | ||
} | ||
} | ||
|
||
#pragma warning restore CS0612 // Type or member is obsolete |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
{ | ||
"profiles": { | ||
"Microsoft.FluentUI.AspNetCore.Components.IntegrationTests": { | ||
"commandName": "Project", | ||
"launchBrowser": true, | ||
"environmentVariables": { | ||
"ASPNETCORE_ENVIRONMENT": "Development" | ||
}, | ||
"applicationUrl": "https://localhost:65511;http://localhost:65512" | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
# 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. | ||
|
||
```powershell | ||
dotnet build | ||
./bin/Debug/net9.0/playwright.ps1 install | ||
``` | ||
|
||
> **Note**: `dotnet build` needs to be run from the `Integration` folder. | ||
More details on https://playwright.dev/dotnet/docs/intro | ||
|
||
## 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: | ||
```csharp | ||
[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’). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<base href="/" /> | ||
<HeadOutlet @rendermode="InteractiveServer" /> | ||
</head> | ||
|
||
<body> | ||
<Routes @rendermode="InteractiveServer" /> | ||
<script src="_framework/blazor.web.js"></script> | ||
</body> | ||
</html> |
Oops, something went wrong.