Skip to content

1020857- Reviewed and updated the content of PlayWright #8365

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Gayathri4135 wants to merge 3 commits into
base: development
Choose a base branch
from
Open

1020857- Reviewed and updated the content of PlayWright #8365

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
267446f
1020857- Reviewed and updated the content of PlayWright
Gayathri4135 May 8, 2026
24c3f4e
Updated the md file
Gayathri4135 May 8, 2026
e7dc9b2
Updated the md file
Gayathri4135 May 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 10 additions & 14 deletions blazor/common/testing/blazor-with-playwright.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,23 +9,19 @@ documentation: ug

# Testing Syncfusion® Blazor applications with Playwright

Comment thread
Gayathri4135 marked this conversation as resolved.
This guide demonstrates how to integrate [Syncfusion® Blazor UI components](https://www.syncfusion.com/blazor-components) into a Blazor WebAssembly application and validate them through end‑to‑end tests using [Microsoft Playwright](https://azure.microsoft.com/en-us/products/playwright-testing). It provides a clear, step‑by‑step approach for building reliable and maintainable UI automation for Syncfusion® components in Blazor applications.
This guide explains how to integrate [Syncfusion® Blazor UI components](https://www.syncfusion.com/blazor-components) into a Blazor WebAssembly application and validate them through end‑to‑end tests using [Playwright](https://playwright.dev/dotnet).

## Why Playwright with Syncfusion® Blazor applications?

- [Syncfusion® Blazor applications](https://www.syncfusion.com/blazor-components) provides rich UI components such as Buttons, Grids, and Charts for building modern web applications.
- [Playwright](https://azure.microsoft.com/en-us/products/playwright-testing) enables reliable cross‑browser UI testing across Chromium, Firefox, and WebKit.
- Using **Syncfusion® Blazor applications with Playwright**, you can validate real user interactions, test complete end‑to‑end user flows, and catch UI regressions early.
Playwright enables automated end‑to‑end (E2E) testing by simulating real user interactions such as clicking, typing, and navigation across the application. These tests can be executed repeatedly to verify complete UI workflows and ensure that Syncfusion® Blazor components behave as expected.

## Create a Blazor project

If you already have a Blazor project configured, you can skip this section and proceed to **Install required packages**.

Otherwise, create a new Blazor application by following the [Syncfusion® getting started guides](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) for **Blazor WebAssembly Standalone App**.
Otherwise, create a new Blazor application by following the [Syncfusion® getting started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) for a **Blazor WebAssembly Standalone App**.

## Install required packages

Install the following NuGet packages to use the [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid).
Install the following NuGet packages to use the **Syncfusion® Blazor components**.

- [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor/)
- [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/)
Expand All @@ -35,7 +31,7 @@ You can install the required packages by using the following .NET CLI commands.
{% tabs %}
{% highlight bash tabtitle=".NET CLI" %}

dotnet add package Syncfusion.Blazor.Grid -v {{ site.releaseversion }}
dotnet add package Syncfusion.Blazor -v {{ site.releaseversion }}
dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}

{% endhighlight %}
Expand Down Expand Up @@ -83,9 +79,9 @@ Include the theme stylesheet and script references in the `wwwroot/index.html` f

<head>
....
<!-- Syncfusion theme stylesheet -->
<!-- Syncfusion® theme stylesheet -->
<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
<!-- Syncfusion Blazor component's script reference -->
<!-- Syncfusion® Blazor core component's script reference -->
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</head>

Expand Down Expand Up @@ -140,7 +136,7 @@ cd tests/E2E.Tests
{% endhighlight %}
{% endtabs %}

This command creates an NUnit test project named **E2E.Tests** under the tests folder, which will host all Playwright‑based UI tests.
This command creates an NUnit test project named **E2E.Tests** under the `tests` folder, which will host all Playwright based UI tests.

**Install required packages**

Expand Down Expand Up @@ -201,7 +197,7 @@ playwright install

## Create Playwright test class

Create a new C# file named `BlazorPlaywrightTests.cs` in the Playwright test project (E2E.Tests). This file contains the end‑to‑end test logic and manages the Playwright browser lifecycle.
Create a new C# file named `BlazorPlaywrightTests.cs` in the Playwright test project **E2E.Tests**. This file contains the end‑to‑end test logic and manages the Playwright browser lifecycle.

{% tabs %}
{% highlight C# tabtitle="BlazorPlaywrightTests.cs" %}
Expand Down Expand Up @@ -254,7 +250,7 @@ namespace E2E.Tests
}
catch
{
// Ignore connection errors while waiting for app to start
// Ignore connection errors while waiting for app to start.
}
await Task.Delay(1000);
}
Expand Down