syncfusion-content · Gayathri4135 · May 8, 2026 · May 8, 2026 · May 8, 2026 · May 12, 2026
diff --git a/blazor/common/testing/blazor-with-playwright.md b/blazor/common/testing/blazor-with-playwright.md
@@ -1,33 +1,29 @@
 ---
 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 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 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 Standalone App** 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**.
+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 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.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.
@@ -49,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 %}
@@ -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>
 
@@ -96,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-datagrid) 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
-
-<PageTitle>Syncfusion Demo</PageTitle>
-
-<h1>Syncfusion Demo</h1>
-
-<SfButton Content="Click Sync" OnClick="@OnSyncClick"></SfButton>
-
-<p id="sync-result">@result</p>
+@using Syncfusion.Blazor.Grids
+
+<SfGrid DataSource="@Orders" AllowPaging="true" PageSize="12">
+    <GridColumns>
+        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" Width="120" TextAlign="TextAlign.Right"></GridColumn>
+        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
+        <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Width="130" Format="d" TextAlign="TextAlign.Right"></GridColumn>
+        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Width="120" Format="C2" TextAlign="TextAlign.Right"></GridColumn>
+        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
+    </GridColumns>
+</SfGrid>
 
 @code {
-    private string result = "Not clicked";
+    public List<Order> Orders { get; set; } = new List<Order>();
+
+    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; } = "";
     }
 }
 
@@ -140,7 +153,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**
 
@@ -154,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
@@ -175,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
 
@@ -192,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
 
@@ -201,7 +214,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" %}
@@ -254,7 +267,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);
             }
@@ -277,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));
         }
     }
 }
@@ -299,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