Author: Mesut Durukal

Mesut has a wide range of Quality Assurance experience in several domains. Along with having proficiency in CMMI and Scrum & PMP experiences under his belt, he has taken various roles in multinational projects. He has expertise in test automation and integration to CI/CD platforms supporting continuous testing. Besides, he has been facilitating test processes and building the test strategy and lifecycle of the projects.
Roadmap to Mastering Playwright

Introduction 

Nowadays technology is an inevitable and essential part of our life. A life without internet, smart applications and electronic devices can not imagined any more. In such an environment, there are several software apps running on different platforms. Delivering those applications to users is a compelling process with numerous disciplines. Along with development, software testing is one of the most critical ones. 

Since integrations to other applications, running on multiple browsers or other environments and quality of interfaces should be verified frequently, automation is the only way to achieve the mission impossible. 

Automation is a must, but doing it in the correct way makes the trick. Otherwise, it can be even less efficient than manual testing. Selecting the best toolset is a part of this correct strategy. Programming language, test runner, framework and libraries we leverage in test environment directly affect the efficiency. A wrong decision may end up in poor understandability and maintainability and coverage gaps such as unsupported browsers and mobile devices. 

Mastering the Test Framework Selection 

There are several options to choose starting from the programming language. The crucial part of the puzzle is E2E Test Automation framework. Not only Playwright, Cypress, Selenium, and Nightwatch, but also many others are options that we can pick and use to execute test cases in the pipelines or local machines. So, which one is the best? 

These are some decision criteria we can keep in mind to select the best framework we can use: 

  • Execution Speed 
  • Ease of coding 
  • Flexibility 
  • Documentation & Support 
  • Licensing & Cost 
  • Feature Compatibility 

           ○ Evidence collection / Reporting 

           ○ Browser support / Parallel runs 

           ○ Headless execution 

           ○ Cross-domain testing

Playwright’s Place in the Test Frameworks Domain 

Surveys show that Playwright has a great interest in the community. The graph below shows that after Vitest, which is a unit test framework, Playwright has second place among all testing frameworks with 73.6%. This means almost three-fourths of the attendees want to learn Playwright. The survey was done with around 40000 people.

Roadmap to mastering playwright

[https://2022.stateofjs.com/en-US/libraries/testing]

Playwright’s trend can be confirmed by the download rates as well. The chart below shows that Playwright in changing the gears to approach to the frameworks that were already in use for a longer time. We can see it has a continuous acceleration over the years.

image 001 1

[https://npmtrends.com/]

What makes Playwright special? 

Easy Installation:

After the installation command is executed, core set-up is done and the initial configuration is made with yes/no questions. User is asked some configurational questions and based on the answers, the set-up is automatically managed. One of the questions is whether the user already wants to install all drivers for browsers or not. By just accepting, all drivers are installed and users do not have to install drivers one by one manually. 

Performance and Execution speed:

Playwright runs tests very quickly and reliably. This strength is thanks to the base architecture It handles asynchronous operations efficiently and can control browser contexts at a granular level. Rather than the browser context itself, it uses CDP (Chrome DevTools Protocol) which makes interactions quick. 

Modern features:

Several other frameworks can challenge Playwright only with basic features. When modern web features come into play, Playwright shines with powerful support. Opening a tab, opening a new window, cross-domain testing, handling alerts and pop-ups, iframes, file download, and upload operations are the features that can not be done in a straightforward way in some other frameworks, but can be done with ease in Playwright. 

Debugging, Reporting, Traces:

Sometimes we need to execute tests step-by-step and make a root cause analysis. Playwright has a very convenient debug mode by which you can stop the test wherever you want and watch variables. After the executions, an html report is automatically generated. And you can even enable trace collection. By simply setting it to true in the config file, traces are automatically zipped and after extracting, you can view to inspect the whole execution. Over the timeline, you can hover back and forth to see what happens after each step. 

image 002

Trace config

Cross browser testing and Device Emulation:

With Playwright you can run your tests on any browser as well as emulate a real device such as a mobile phone or tablet. Simply configure the devices you would like to emulate and Playwright will simulate the browser behavior such as “userAgent“, “screenSize“, “viewport” and if it “hasTouch” enabled. [https://playwright.dev/docs/emulation]

API testing:

As most of the E2E test automation frameworks, Playwright’s primary focus is UI testing. But this does not mean that you can not do API testing along with it. In fact, it is quite convenient to perform requests and assertions. 

				
					const newIssue = await request.post('/repos/${USER}/${REPO}/issues', {
  data: {
   title: '[Bug] report 1',
   body: 'Bug description',
  }
});
expect(newIssue.ok()).toBeTruthy();
const issues = await request.get('/repos/${USER}/${REPO}/issues"); 
expect(issues.ok()).toBeTruthy(); 
expect (await issues.json()).toContainEqual(expect.objectContaining({ 
  title: [Bug] report 1',
  body: 'Bug description"
}));

[https://playwright.dev/docs/api-testing]

Mastering Playwright: How to use of it effectively? 

As we can already see, Playwright has great capabilities to leverage in our test environment. But if we are not aware of those, or do not know where and how to use them, it would be similar to driving a high class sport car in the neighborhood. So, how can we use Playwright features and capabilities effectively? 

For maintaining robustness:

Flakiness and other test smells are the nightmares of testers. Elements being detached from DOM, not clickable buttons, loading scripts and all other UI automation challenges make it even harder to sustain a stable and reliable test automation. Playwright Autowait feature already makes us proceed a lot in this way. On top of that, auto retries and the trace and reports help us to understand root causes and apply fixes. 

To reduce duplication:

Instead of repeating code in several tests, we can build reusable functions. Same functions can be used by several tests by using with specific parameters. In Playwright, environmental variables management is very convenient. You can pass your parameters from command line, config file or from the pipelines as system variables. 

So, in each execution by only changing parameters, test arguments can be dynamically generated and the same code can cover different configurations without changing the code. For example, if I want to run all my tests first for multiple locations, all I have to do is to set the parameters and let tests run.

				
					export default defineConfig( config: { 
   testDir: './testcases',
   testMatch: ['*.spec.ts', '*.ts'],
   metadata: {
      // SUT
     systemUnderTest: 'my system 1',
     Location: 'tokyo',
     stage: 'qa',

Custom data management via config file

To reduce test execution duration:

Individual test execution is already fast in Playwright both in headed and headless mode. But when running a suite is what we are going to do, the real value of Playwright comes in sight. Parallel execution can be configured with the desired number of workers. Some other frameworks parallelize tests in sepc file level. In Playwright, you can run tests in parallel even within a single spec file. 

Summary 

Selecting the best test automation framework is essential for getting the maximum efficiency. The answer to find the best tool depends on the use case and we can walk through a set of decision criteria to make a benchmark among the options. But Playwright apparently satisfies most of the test requirements with a wide range of feature support and robust and reliable architecture. 

Although making the correct choice is very important, that is not the whole story. We should know what we have and we have to do. The next action would be using the resource we have in the way that we want to achieve. 

We have a lot to do, we have also power to do! Happy testing. 

Blog
00