Introduction to Playwright

In this blog post, I will introduce you to the Playwright library for web automation. 

The playwright is a framework used for Web Automation Testing. It allows QA engineers to use Chromium, Firefox, and WebKit with a single API. It seems Playwright will be a very capable, reliable rival against Selenium.

This post will include a very basic sample in which I will address the basic functionalities of Playwright. Then many more will be added in the future.

Let’s start…

How to add Playwright dependency?

The playwright is firstly developed on Node.js and Java binaries are recently published with a stable version. As I have experience with Java, I decided to use Java as the main development language for this series.

Maven Dependency

<parent>
<groupId>com.microsoft.playwright</groupId>
<artifactId>parent-pom</artifactId>
<version>0.181.0</version>
</parent>

Gradle Dependency

implementation 'com.microsoft.playwright:playwright:0.181.0'

If you want to check the latest version, you can visit that link.

First Test with Playwright

Creating the Browser

In order to start your test, first, you need to create a Browser object. In contrary to Selenium, Playwright does not require manual installation of Browser Drivers. Playwright downloads them before you start your tests.

Playwright playwright = Playwright.create();
Browser browser = playwright.chromium().launch();

This will launch your browser. As default browsers are working in headless mode. In case you want to see what’s happening on the browser you need to change some configs like below.

Playwright playwright = Playwright.create();
Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));

Now, your browser will be visible.

Interacting with Elements

The playwright does not require you to define different selector types like Selenium.

First, you need to create a Page object by browser object. Then you can send commands to your web application.

Page page = browser.newPage();

Now you can use page objects to interact with the page like send a text to input keys, click something, lose focus, get text value, etc…

Selenium Example of sending a text to an input

WebElement element = driver.findBy(By.id("searchBox"));
element.sendKeys("#twotabsearchtextbox","Superman);

In Playright you only do this. You can use XPath, CSS, id, or anything you want and you don’t have to define the type of the selector.

page.fill("#twotabsearchtextbox","Superman");

Another example might be click action. 

Selenium version of Click Action

WebElement element = driver.findBy(By.id("input[id=nav-search-submit-button]"));
element.click();

Playwright version

page.click("input[id=nav-search-submit-button]");

As you can see, it’s very easy to use it. Of course, after using Selenium for so long, I had trouble finding the necessary function but it would take like 1 hour for you to get used to Playwright.

Let’s Compare it with the Selenium

You might want to ask how to wait for objects as we do in Selenium. That’s the magical part of Playwright, you don’t need to set timeouts or some other methodology to wait if an element or the whole page is loaded not. 

The playwright performs a range of actionability checks on the elements before taking actions to ensure these actions behave as expected. It auto-waits for all the relevant checks to pass and only then performs the requested action. That’s an amazing way. You don’t need to worry about waits anymore.

And it’s also very fast compared to Selenium. Clicking objects, writing text seem very fast compared to my experience.

Performance of the Scripts

After working with Playwright, I converted one of the cases I developed for my company so I can compare the execution time. Selenium tests with all those explicit and implicit waits took 3 minutes to complete the whole case. The playwright took 35 seconds to complete it. So that’s a huge difference. That makes me question if I should change my structure. It could be related to my strategy of ‘wait till whole page loads’ of course. I am always waiting for the whole page to be loaded as described in that article.

I hope that introduction will help you evaluate Playwright. 

GitHub link to our first sample can be found here.

Thanks,
Canberk Akduygu