Playwright: Modern End-to-End Testing for Web Apps with C# Language Support

Playwright is an open-source browser automation library. It is a JavaScript-based library created to be used with Node.js. One of the main differences with other browser automation tools is that Playwright is cross-browser. It can automate tasks using Chromium (Google Chrome, Microsoft Edge), WebKit (Apple Safari), and Mozilla Firefox browsers, all with the same API.

Playwright was created by Microsoft. It was developed based on Puppeteer, and it was improved to perform automatic UI testing.

In this blog, I am going to talk about how to create a simple test by using Playwright along with C# and Nunit test framework.

INSTALLATION AND CREATION OF A CONSOLE APPLICATION:

Note: Before you start, make sure you have already downloaded and installed Node.js before installing playwright from npm.

https://nodejs.org/en/download/

Step1: Install node package manager “PlayWright” globally from CLI

npm install playwright

This will get all the necessary files from npm along with the chromium-browser which we are going to use in the later stage of this blog.

Step2: Create a console app by either using CLI or Visual Studio

Step3: Search Microsoft.Playwright in the NuGet package manager and install it

Note: make sure you select include pre-release checkbox.

Step4: Add the below code which will search playwright in google search and verify

The above code will open chromium-browser and then It will search “Playwright” and then it will navigate to https://playwright.dev/dotnet/docs/intro page in the URL. To run it just click on the run button in the menu bar. You will be able to verify the code will be executed successfully. Note: if you are facing issues, please make sure you have followed all 4 steps.

CREATION OF NUNIT TESTS:

Until now we were talking about how to install Playwright and how to start with. But if we would like to have created an automation testing suit then we have to use either Nunit or Unittest or Xnuit packages. Below is the example where I have used Nunit framework.

Step1: Install Nunit and Nunit3TestAdaptor packages from Nuget Package Manager to run as test and verify through Assert Functions:

Once you have installed the above two packages, we are ready to modify our first program as a test method and then run them.

Make sure you add all the dependencies as below snapshots and then run the test from test explorer.

Step2: Add [Test] attribute to your method and [TestFixture] to your test class

Step:3 Add a few Assert methods to verify ULRs while navigating through the test

using Microsoft.Playwright;
using NUnit.Framework;
using System.Threading.Tasks;

namespace PlaywrightNew
{
[TestFixture]
public class Program
{
[Test]
public static async Task VerifyGoogleSearchForPlaywright()
{
using var playwright = await Playwright.CreateAsync();
await using var browser = await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions
{ Headless = false, SlowMo = 50, });

var context = await browser.NewContextAsync();

var page = await context.NewPageAsync();
//Navigate to Google.com
await page.GotoAsync(“https://www.google.com/");
// Search Playwright
await page.FillAsync(“[aria-label=\”Search\”]”, “Playwirght”);
// Press Enter
await page.RunAndWaitForNavigationAsync(async () =>
{
await page.PressAsync(“[aria-label=\”Search\”]”, “Enter”);
});
//Click on the first search option
await page.ClickAsync(“xpath=//h3[contains(text(),’Playwright: Fast and reliable end-to-end testing’)]”);
//Verify Page URL
Assert.AreEqual(“https://playwright.dev/”, page.Url);
// Click text=Get started
await page.ClickAsync(“text=Get started”);
//Verify Page URL
Assert.AreEqual(“https://playwright.dev/docs/intro", page.Url);
//Take a screenshot
await page.ScreenshotAsync(new PageScreenshotOptions { Path = “screenshot.png” });
}}}

Let’s talk about the different methods used in the test.

page.GotoAsync(“https://www.google.com/");
This above method does navigate to the url provided.
page.FillAsync(“[aria-label=\”Search\”]”, “Playwirght”);
This above method fills the value you are trying to search in the text box.
page.PressAsync(“[aria-label=\”Search\”]”, “Enter”);
This above method clicks on the enter button.
page.ClickAsync(“text=Get started”);
This above method does a click action.
page.ScreenshotAsync(new PageScreenshotOptions { Path = “screenshot.png” });
For this above method take a screenshot and saves under debug folder. Note: you can change the path as per your need.
Assert.AreEqual(“https://playwright.dev/", page.Url);
This above assert compares the expected to actual value.

BENEFITS OF USING PLAYWRIGHT.

Diverse Supported languages: The Playwright API is available in multiple languages.

• JavaScript and TypeScript
• Python
• Java
• C#

MAJOR FEATURES OF PLAYWRIGHT:

1.Headless execution.

2. Auto wait for elements.

3.Intercept network activity.

4.Emulate mobile devices, geolocation, permissions.

5.Support web components via shadow piercing selectors.

6.Capture video, screenshots, and HAR files.

7. Contexts allow for isolated sessions.

8. Parallel execution.

9.Command line execution.

10. CICD integration.

11. Playwright Inspector and PlayWright recorder and code generator.

SUMMARY:

Microsoft Playwright is built to be extremely modular and focused on being an automation driver that works nicely with all parts of your testing stack. This is surely another interesting tool that can give a good fight to Selenium due to diverse language support and auto waiting features.

In order to know more about the PlayWright tool, please visit below URL

https://playwright.dev/