Playwright- The New Test Automation

No trade-offs • No limits

While I was working on a proof of concept for my current client to create an automation framework from scratch using one of the most popular JavaScript-based frameworks, I had limitations almost at every step to automating a sales force application. I could not proceed much further with the creation. Some of the challenges that I was facing were never possible to automate like opening a new browser tab, handling pop-ups, look-ups, changes in the URLs, and countless others. That is when my colleague Kamal introduced me to the playwright. I can’t thank him enough for introducing this great tool. Just to give a little background on the playwright, playwright is a Microsoft product that is developed by the same developers who created puppeteer.

“We are the same team that originally built Puppeteer at Google, but has since then moved on. Puppeteer proved that there is a lot of interest in the new generation of ever-green, capable, and reliable automation drivers. With Playwright, we’d like to take it one step further and offer the same functionality for all the popular rendering engines. We’d like to see Playwright vendor-neutral and shared governed.”

In this article, I would like to give some insights on the playwright, also a piece of code that I developed the framework my way using both Cucumber and test function and ending with the GitHub link for both the samples.

So far in UI automation frameworks, we have seen frameworks that are based on web-driver (Selenium, Protractor, WebdriverIO) and the ones that are non-web driver based like cypress, puppeteer, jest, and a few others. What’s different with playwrights from all the other available frameworks is that playwrights have analyzed the problems with modern frameworks. In cypress we have limitations that a new tab cannot be opened or pop-up cannot be handled or a URL change is not handled, responsive mode and the limit to run the tests on fewer browsers, With playwright all these have been addressed. In web-driver-based frameworks the test time is high, too many package installations hard-to-read error messaging and, parallel execution needs grid upgrade. The playwright has addressed them all. Along with these existing issues getting addressed, Playwright interactions auto-wait for elements to be ready, Timeout-free automation, and Powerful network control for mocking and stubbing and, Modern web features like geolocation, permissions, file upload, and downloads.

Let’s get into the way the playwright works with some code examples.

npm init playwright@latest

The installation should get all these files and folders.

playwright.config.ts
package.json
package-lock.json
tests/
  example.spec.ts
tests-examples/
  demo-todo-app.spec.ts

Step 1: Create a spec file within the tests folder

Step 2: Making imports and writing tests

I’ve used mode as serial to run all tests in one browser instance, you can use that as per your requirement

Step 3: Creating helper for methods

Step 4: Creating pages for saving selectors

Steps 5: Changes to package.json

Step 6: Run the test

npm run test

I might have missed mentioning something while writing this article. Hence I have attached the repository link for this code. You can directly clone this repository and run the test.

https://github.com/srikanthathikari/Playwright
https://github.com/srikanthathikari/playwrightWithCucumber