From 267446f1073aaadfab2a28fdb71da6c3064819dc Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Fri, 8 May 2026 13:02:06 +0530 Subject: [PATCH 1/6] 1020857- Reviewed and updated the content of PlayWright --- .../common/testing/blazor-with-playwright.md | 22 +++++++------------ 1 file changed, 8 insertions(+), 14 deletions(-) diff --git a/blazor/common/testing/blazor-with-playwright.md b/blazor/common/testing/blazor-with-playwright.md index 3a4debb7a..d9f3dad1e 100644 --- a/blazor/common/testing/blazor-with-playwright.md +++ b/blazor/common/testing/blazor-with-playwright.md @@ -9,23 +9,17 @@ documentation: ug # Testing Syncfusion® Blazor applications with Playwright -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. - -## 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. +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 [Microsoft Playwright](https://azure.microsoft.com/en-us/products/playwright-testing). ## 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](https://www.syncfusion.com/blazor-components). - [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor/) - [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) @@ -35,7 +29,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 %} @@ -83,9 +77,9 @@ Include the theme stylesheet and script references in the `wwwroot/index.html` f .... - + - + @@ -140,7 +134,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** @@ -201,7 +195,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" %} From 24c3f4e87fff99ae4acfef66bde5c1fbe9f44f19 Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Fri, 8 May 2026 13:18:52 +0530 Subject: [PATCH 2/6] Updated the md file --- blazor/common/testing/blazor-with-playwright.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/blazor/common/testing/blazor-with-playwright.md b/blazor/common/testing/blazor-with-playwright.md index d9f3dad1e..d2c65564e 100644 --- a/blazor/common/testing/blazor-with-playwright.md +++ b/blazor/common/testing/blazor-with-playwright.md @@ -19,7 +19,7 @@ Otherwise, create a new Blazor application by following the [Syncfusion® gettin ## Install required packages -Install the following NuGet packages to use the [Syncfusion® Blazor components](https://www.syncfusion.com/blazor-components). +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/) @@ -134,7 +134,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** @@ -248,7 +248,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); } From e7dc9b2c973c8c3114abdd356de31a282462280b Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Fri, 8 May 2026 18:30:09 +0530 Subject: [PATCH 3/6] Updated the md file --- blazor/common/testing/blazor-with-playwright.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/blazor/common/testing/blazor-with-playwright.md b/blazor/common/testing/blazor-with-playwright.md index d2c65564e..7e8889f78 100644 --- a/blazor/common/testing/blazor-with-playwright.md +++ b/blazor/common/testing/blazor-with-playwright.md @@ -9,7 +9,9 @@ documentation: ug # Testing Syncfusion® Blazor applications with Playwright -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 [Microsoft Playwright](https://azure.microsoft.com/en-us/products/playwright-testing). +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). + +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 From e9f4f479c3ca9b886e8956fd9fc2da5a22f67a94 Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Tue, 12 May 2026 12:59:54 +0530 Subject: [PATCH 4/6] Updated the md file --- .../common/testing/blazor-with-playwright.md | 75 +++++++++++++------ 1 file changed, 51 insertions(+), 24 deletions(-) diff --git a/blazor/common/testing/blazor-with-playwright.md b/blazor/common/testing/blazor-with-playwright.md index 7e8889f78..ee22b7195 100644 --- a/blazor/common/testing/blazor-with-playwright.md +++ b/blazor/common/testing/blazor-with-playwright.md @@ -1,13 +1,13 @@ --- layout: post title: Testing Blazor Applications with Playwright | Syncfusion® -description: Learn how to perform end-to-end UI testing for Syncfusion® Blazor applications using Microsoft Playwright, including testing complete workflows. +description: Learn how to perform automate end-to-end UI testing for Syncfusion® Blazor applications using Microsoft Playwright. platform: Blazor component: Common documentation: ug --- -# Testing Syncfusion® Blazor applications with Playwright +# Testing Syncfusion® Blazor components with Playwright 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). @@ -15,7 +15,7 @@ Playwright enables automated end‑to‑end (E2E) testing by simulating real use ## Create a Blazor project -If you already have a Blazor project configured, you can skip this section and proceed to **Install required packages**. +If you already have a Blazor project configured, you can skip this section and proceed to [Install required packages](./blazor-with-playwright#install-required-packages). 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**. @@ -23,7 +23,7 @@ Otherwise, create a new Blazor application by following the [Syncfusion® gettin Install the following NuGet packages to use the **Syncfusion® Blazor components**. -- [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor/) +- [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) - [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) You can install the required packages by using the following .NET CLI commands. @@ -31,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 -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Grid -v {{ site.releaseversion }} dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} @@ -45,7 +45,7 @@ Open the `_Imports.razor` file at the root of your project and import the Syncfu {% highlight razor tabtitle="_Imports.razor" %} @using Syncfusion.Blazor -@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.Grids {% endhighlight %} {% endtabs %} @@ -92,29 +92,46 @@ Include the theme stylesheet and script references in the `wwwroot/index.html` f Create a Razor page to demonstrate a simple Syncfusion® UI interaction that can be validated using Playwright tests. -This page contains a [Syncfusion® Blazor Button](https://www.syncfusion.com/blazor-components/blazor-button), allowing you to verify user interaction and UI behavior during end‑to‑end testing. +This page contains a [Syncfusion® Blazor Grid](https://www.syncfusion.com/blazor-components/blazor-button) component with paging, allowing you to verify user interaction and UI behavior during end‑to‑end testing. {% tabs %} {% highlight razor %} @page "/" - -@using Syncfusion.Blazor.Buttons - -Syncfusion Demo - -

Syncfusion Demo

- - - -

@result

+@using Syncfusion.Blazor.Grids + + + + + + + + + + @code { - private string result = "Not clicked"; + public List Orders { get; set; } = new List(); + + protected override void OnInitialized() + { + Orders = Enumerable.Range(1, 20).Select(i => new Order + { + OrderID = 1000 + i, + CustomerID = (new[] { "Maria", "Ana", "Antonio", "Thomas", "Peter", "Anne", "Bergl", "Fin" })[i % 8] ?? "", + OrderDate = DateTime.Now.AddDays(-i), + Freight = i * 50.5m, + ShipCountry = (new[] { "USA", "Germany", "Brazil", "France", "UK", "Spain", "Italy", "Argentina" })[i % 8] ?? "" + }).ToList(); + } - private void OnSyncClick(MouseEventArgs args) + public class Order { - result = "Clicked"; + public int OrderID { get; set; } + public string CustomerID { get; set; } = ""; + public DateTime OrderDate { get; set; } + public decimal Freight { get; set; } + public string ShipCountry { get; set; } = ""; } } @@ -273,14 +290,24 @@ namespace E2E.Tests } [Test] - public async Task SyncfusionButton_Works() + public async Task GridPaging_Works() { var page = await _browser!.NewPageAsync(); await page.GotoAsync(_url + "/"); - await page.ClickAsync("text=Click Sync"); - var result = await page.InnerTextAsync("#sync-result"); - Assert.That(result, Is.EqualTo("Clicked")); + // Wait for grid to load + await page.WaitForSelectorAsync(".e-grid"); + + // Get first order ID on page 1 + var firstOrderOnPage1 = await page.InnerTextAsync(".e-grid tbody tr:first-child td:first-child"); + + // Click on next page button + await page.Locator(".e-pager .e-next").ClickAsync(); + await page.WaitForTimeoutAsync(1000); + + // Verify first row changed (pagination worked) + var firstOrderOnPage2 = await page.InnerTextAsync(".e-grid tbody tr:first-child td:first-child"); + Assert.That(firstOrderOnPage2, Is.Not.EqualTo(firstOrderOnPage1)); } } } From 78c3e1416f68d9fa8156b1219e73fa01e22f82d1 Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Tue, 12 May 2026 13:15:02 +0530 Subject: [PATCH 5/6] Updated the md file --- .../common/testing/blazor-with-playwright.md | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/blazor/common/testing/blazor-with-playwright.md b/blazor/common/testing/blazor-with-playwright.md index ee22b7195..6aa60b289 100644 --- a/blazor/common/testing/blazor-with-playwright.md +++ b/blazor/common/testing/blazor-with-playwright.md @@ -1,7 +1,7 @@ --- layout: post title: Testing Blazor Applications with Playwright | Syncfusion® -description: Learn how to perform automate end-to-end UI testing for Syncfusion® Blazor applications using Microsoft Playwright. +description: Learn how to automate end‑to‑end UI testing for Syncfusion® Blazor applications using Microsoft Playwright. platform: Blazor component: Common documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Testing Syncfusion® Blazor components with Playwright -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). +This guide explains how to integrate [Syncfusion® Blazor UI components](https://www.syncfusion.com/blazor-components) into a ***Blazor WebAssembly Standalone App** and validate them through end‑to‑end tests using [Playwright](https://playwright.dev/dotnet). 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. @@ -92,7 +92,7 @@ Include the theme stylesheet and script references in the `wwwroot/index.html` f Create a Razor page to demonstrate a simple Syncfusion® UI interaction that can be validated using Playwright tests. -This page contains a [Syncfusion® Blazor Grid](https://www.syncfusion.com/blazor-components/blazor-button) component with paging, allowing you to verify user interaction and UI behavior during end‑to‑end testing. +This page contains a [Syncfusion® Blazor Grid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component with paging, allowing you to verify user interaction and UI behavior during end‑to‑end testing. {% tabs %} {% highlight razor %} @@ -167,7 +167,7 @@ Install the following NuGet packages into the **E2E.Tests** project to enable Pl You can install the required packages by using the following .NET CLI commands. {% tabs %} -{% highlight bash tabtitle=" Terminal " %} +{% highlight bash tabtitle=".NET CLI" %} dotnet add package Microsoft.Playwright dotnet add package NUnit @@ -188,7 +188,7 @@ Playwright provides a global .NET CLI tool for managing browser installations. Run the following command in a Terminal. {% tabs %} -{% highlight bash tabtitle=" Terminal " %} +{% highlight bash tabtitle=".NET CLI" %} dotnet tool install --global Microsoft.Playwright.CLI @@ -205,7 +205,7 @@ If the tool is already installed, this command can be safely skipped. After the CLI is available, install the required browsers by running: {% tabs %} -{% highlight bash tabtitle=" Terminal " %} +{% highlight bash tabtitle=".NET CLI" %} playwright install @@ -295,17 +295,17 @@ namespace E2E.Tests var page = await _browser!.NewPageAsync(); await page.GotoAsync(_url + "/"); - // Wait for grid to load + // Wait for grid to load. await page.WaitForSelectorAsync(".e-grid"); - // Get first order ID on page 1 + // Get first order ID on page 1. var firstOrderOnPage1 = await page.InnerTextAsync(".e-grid tbody tr:first-child td:first-child"); - // Click on next page button + // Click on next page button. await page.Locator(".e-pager .e-next").ClickAsync(); await page.WaitForTimeoutAsync(1000); - // Verify first row changed (pagination worked) + // Verify first row changed (pagination worked). var firstOrderOnPage2 = await page.InnerTextAsync(".e-grid tbody tr:first-child td:first-child"); Assert.That(firstOrderOnPage2, Is.Not.EqualTo(firstOrderOnPage1)); } @@ -322,7 +322,7 @@ You can execute the Playwright end‑to‑end tests to validate the behavior of From the solution root directory, run the following command. {% tabs %} -{% highlight bash tabtitle="Terminal" %} +{% highlight bash tabtitle=".NET CLI" %} dotnet test tests/E2E.Tests From e488396763c1fcc4830c40431e775f7171f40a39 Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Tue, 12 May 2026 20:36:32 +0530 Subject: [PATCH 6/6] Updated the md file --- blazor/common/testing/blazor-with-playwright.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/blazor/common/testing/blazor-with-playwright.md b/blazor/common/testing/blazor-with-playwright.md index 6aa60b289..947d8ecd4 100644 --- a/blazor/common/testing/blazor-with-playwright.md +++ b/blazor/common/testing/blazor-with-playwright.md @@ -1,7 +1,7 @@ --- layout: post title: Testing Blazor Applications with Playwright | Syncfusion® -description: Learn how to automate end‑to‑end UI testing for Syncfusion® Blazor applications using Microsoft Playwright. +description: Learn how to automate end‑to‑end (E2E) UI testing for Syncfusion® Blazor applications using Microsoft Playwright platform: Blazor component: Common documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Testing Syncfusion® Blazor components with Playwright -This guide explains how to integrate [Syncfusion® Blazor UI components](https://www.syncfusion.com/blazor-components) into a ***Blazor WebAssembly Standalone App** and validate them through end‑to‑end tests using [Playwright](https://playwright.dev/dotnet). +This guide explains how to integrate [Syncfusion® Blazor UI components](https://www.syncfusion.com/blazor-components) into a **Blazor WebAssembly Standalone App** and validate them through end‑to‑end tests using [Playwright](https://playwright.dev/dotnet). 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. @@ -100,7 +100,8 @@ This page contains a [Syncfusion® Blazor Grid](https://www.syncfusion.com/blazo @page "/" @using Syncfusion.Blazor.Grids - + + @@ -350,6 +351,6 @@ This approach ensures reliable validation of **Syncfusion® Blazor UI components ## See also -- [Getting started with Syncfusion® Blazor Button in WASM app](https://blazor.syncfusion.com/documentation/button/getting-started) +- [Getting started with Syncfusion® Blazor Grid in WASM app](https://blazor.syncfusion.com/documentation/datagrid/getting-started) - [Guide for installing Playwright Browsers (CLI)](https://playwright.dev/dotnet/docs/intro)