How To Get Started With Playwright Testing


In the present Software Development Industry, we have already crossed the phase when developers were still debating the importance and validity of the testing phase. However, the time consumed in the testing phase is still an uncertain topic for many web development companies. This time becomes even more crucial when the developers are using a new tool for testing purposes.

The primary reason behind this is that web developers have to invest a significant amount of time learning the basic structure and usability of a new test automation tool. However, certain tools like Playwright have a very soft learning curve. Since Playwright is relatively new to the test automation industry, many developers might still have the question of what is Playwright.

The primary goal of this article is to discuss everything that you need to know about this open-source testing tool. We will also discuss all the basic details that you must know to start Playwright testing. Playwright has almost started a revolution in the test automation industry as it helps the developers to get started with basic testing. They don’t have to waste multiple hours reading the tutorials or documents.

What is Playwright

The simplest definition of Playwright is that it is an open-source testing tool that is completely maintained by Microsoft. The Open-source nature of this tool makes it completely free to use and easily accessible to individual developers and small companies. Using this tool, the developers can easily perform end-to-end testing on all modern web applications.  A major benefit of this tool is that it supports almost all the popular programming languages available in the market. This means the developer can use Python, Java, JavaScript, typescript and .NET as per their preferences. Playwright runs all the tests on almost every modern rendering engine that is available.  Some of the common examples are Firefox, chromium, Linux, Windows and even MacOS.

The testing customization is almost limitless while you are using Playwright.  For instance, you can perform the testing locally, on the cloud, headed or even headless. It even helps you to natively emulate the mobile version of Google Chrome for testing purposes related to Android or iOS applications. Moreover, you can use the same rendering engine for mobile, desktop or cloud interfaces.

Installing Playwright

The easiest way to install Playwright is to run a script in your project. You can follow this process for not only an existing project but also for a new project as well. Another process of installing Playwright is to use the VS extension. In this process, you have to first create a project with this extension. In VSCode, you have to launch the extension. Then, you have to look for Playwright. A critical step is to choose the Playwright option that’s verified by Microsoft. After installing the extension, the final step is to install Playwright in your project with the help of the command bar. The next step is to choose which rendering engine you wish to run your project testing processes. This extension also allows you to choose whether you want to add any form of GitHub action.

Another advantage is that none of the changes is Irreversible. This means you always have the option to add new additions or remove the existing ones from the configuration file.  Now, let us look at all the features and files that you get after the Playwright installation process:

  • You will receive the package.json file. However, it will not appear if you are already in a project. In that case, Playwright will be incorporated into your existing package.
  • The system will add the configuration file for the playwright project. It will be present as ‘playright.config.ts’. You can use this file to configure almost every parameter related to your testing requirements. For instance, you can add or remove the browser rendering engine and other user-centric data.
  • The final addition will be the tests folder. This folder will consist of an example test that can help you to get started with Playwright. This is yet another initiative to make Playwright user-friendly.

Generating the Tests

To understand how to generate your text with the help of Playwright, we will be using the example of Codegen. Codegen allows the developers to generate tests by recording their actions. The testing process is very simple and helps even the new developers to get along with it. It is so simple that you can access your web application on the browser and start using it like any normal user. While you are doing this, you can witness the system automatically generate the test codes in front of your eyes.  You just need to use the command ‘npm playwright codegen’ to open Codegen in your terminal window.

You must remember that after executing the code, the system will generate two separate windows for you. The first window will be the normal window that you will use to access the website which you wish to test. The second window will automatically generate the test strips according to your actions and save them.  The next step is to copy the tests into your editor file. After the system completes recording your actions, you can copy the final test code to a text file in VS Code. Changing programming languages is also very easy while using Playwright. You just have to choose your preferred language from the drop-down menu. The system will automatically change your entire test in that language.

The final step is to use the copy button and copy your test code into the clipboard. You have to paste the code into a newly created test file that will be present in the primary tests folder of Playwright. Looking back to the creation process, we can understand that while using playwright, all you had to do was normally use your application and copy a series of codes. This process was enough to generate your first test script with Playwright.

Running Tests

While using the VS extension, it is also very easy to run the test.  You only have to press the green triangle that will be present next to the line. You can also start the testing process by using the command ‘npx playwright test’ in the terminal window. After this, the system will automatically begin the testing process and provide you with the final output. With Playwright, you have the option to run the test in a headed manner. In this process, the system will automatically open the browser during the execution process. So, it will allow you to monitor the tests in real-time as they execute.  For this process, you simply have to use the ‘–headed’ command with the test execution command.

However, you must remember that all the testing processes happen very fast with Playwright. This means the system will open the tests, run them and output the final result all in a matter of seconds.  However, you also have the option to pause the tests or add a specific amount of delay in them. Furthermore, you can also open the trace file or debug the tests. You can find all the relevant information regarding this in the docs available on the official Playwright website.

Role of Different Tools and Frameworks in this Process

Playwright is already a very simple-to-use open-source testing tool. However, the developers can further improve its simplicity and efficiency with the help of a relevant testing tool or framework. However, the choice of a relevant testing tool is easier said than done. This is due to thousands of options that are available in the present market. Considering certain parameters and personal preferences can help developers to narrow down the options. For instance, the developers can consider business parameters like the expected deadline, company budget and requirements of the project. They can also consider certain personal requirements like individual knowledge of programming languages and specific preferences. Another important step is to verify whether the tools are trustworthy and safe to use.

For the verification process, the developers have to hop on to multiple online forums and review websites. This is because these websites are generally filled with feedback from multiple developers and users that are currently engaged with these tools. So, you can get a general idea about what to expect from the tool or a framework. For general referencing, a popular cloud automation platform LambdaTest has millions of positive reviews from users all around the globe. In this context, let us use the example of LambdaTest to further elaborate our understanding of the role of different tools and frameworks:

From a basic standpoint, LambdaTest is a cloud-based platform to verify the cross-browser compatibility of modern web applications. Cross-browser compatibility testing is a process of ensuring that a web application retains its peak performance irrespective of the operating systems or the browser version. LambdaTest further improves the efficiency of this testing process by conducting it on an online browser farm of 3000+ browsers and OS combinations.

LambdaTest helps the developers to run Playwright test scripts on more than 50 different Browsers and operating system combinations. It also improves the efficiency of the testing process by implementing parallel testing. Parallel testing is a process of initiating multiple test instances simultaneously. Let us look at some of the crucial features of executing Playwright scripts with LambdaTest:

  • Run the Tests Online Over Multiple Browsers

While using LambdaTest, there is no limit to the number of combinations that developers can make with the browser and operating systems. The developers also do not have to go through the hassle of installing any third-party application as most of the tests execute on cloud servers.

  • Improve the Testing Speed while Keeping the Costs down 

The parallel testing of LambdaTest helps to massively reduce the delivery time of applications while using playwright testing. This means the cloud executing speed becomes almost similar to local testing speeds. This process also helps to reduce the overall cost of the application testing phase.

The Conclusion

So, we can easily conclude that Playwright is very easy and quite fun for developers to try. Moreover, we can also say that Codegen is a useful piece of tool that can further improve the simplicity of Playwright testing. So, we highly recommend all the developers to check out Playwright and at least give it a try. Indeed, automated testing will not be perfect in all instances. However, we all have to agree that it is the future of the web application Development Industry.  So, there is no excuse to avoid this wonderful piece of Technology.