Unlocking Efficiency: Exploring the Power of Playwright Codegen for Test Automation
Written by Selma Dizdarević, QA Analyst Softray Solutions
Modern software development has incorporated web automation to enable effective testing and guarantee the quality of web applications.
Recently, I had the opportunity to investigate Playwright Codegen, which can be a valuable tool for test automation. In this blog post, I want to share my experience with Playwright Codegen, from setting it up in VS Code to creating tests, editing the generated code, dealing with viewport issues, and giving a general evaluation of its benefits and drawbacks.
What is Playwright Codegen?
Playwright Codegen is a powerful tool that simplifies the process of test automation. It enables users to effortlessly generate code by recording their interactions with a website, eliminating the need for manual coding. With Playwright Codegen, individuals involved in test automation can create robust scripts in programming languages, such as JavaScript, Python, or TypeScript, without being programming experts. Whether you’re a QA engineer or a testing enthusiast, Playwright Codegen streamlines the automation process, making it accessible to many users.
Setting up Playwright Codegen in Visual Studio Code:
Getting started with Playwright Codegen in Visual Studio Code was a breeze.
After creating the package.json file and installing the Playwright package using: npm install @playwright/test, I quickly added the Playwright VS Code extension to my workspace. Within minutes, I was ready to dive into the world of code generation.
Generating Tests:
The ability to generate tests with Playwright Codegen was a revelation. I had two options: clicking the “Record new” button and using the command for running Codegen in the Terminal. I found both methods incredibly user-friendly.
With the first approach, I clicked the “Record new” button in the VS Code Playwright sidebar and started interacting with the application’s UI. As I performed actions like clicking buttons or filling in input fields, Codegen automatically generated the corresponding code snippets. It was impressive to see how accurately it captured my interactions.
Using the Playwright Inspector was equally convenient, and I prefer this option. I launched Playwright Inspector with the command: npx playwright codegen [URL]. While recording tests two windows will be opened, a browser window and the Playwright Inspector window, where you can register your tests and copy them into your editor.
Let’s Create a Test with Playwright Codegen
To demonstrate how Playwright Codegen works, let’s create a test that verifies an end-to-end flow on the eCommerce website. Below is the generated code for the test, along with comments to explain each step:
To run the tests and view the results using Playwright Codegen, follow these steps:
1. Open the test file
2. Click the Play icon to start running the tests.
3. The test runner will execute the tests and display the progress and results in the integrated Terminal within VS Code.
Once the test execution is completed, you can navigate to the Test Results view.
In the Test Results view, you will see a list of executed tests along with their statuses (passing, failing, or pending).
Editing Generated Code by Adding Assertions:
Playwright Codegen’s flexibility in allowing me to edit the generated code was an especially appealing feature. Although the generated code offered a good foundation, I was free to improve it by adding assertions to confirm the desired application behavior.
This gave me confidence that my tests were reliable and comprehensive.
Here is an example of editing generated code by adding assertions:
The above code has added assertions using Playwright’s expect function. These assertions validate that specific elements or texts are visible or present on the page, ensuring the application’s expected behavior under test.
Handling Issues with Viewport:
During my experience with Playwright Codegen, I encountered some issues related to viewport settings. Playwright Codegen is using default viewport size that does not always match with our testing requirements. This can lead to visual inconsistencies and mispositioned elements within the web page. However, I quickly discovered a simple and effective solution. I could handle viewport issues seamlessly by configuring a custom command in the package.json file and running tests from the Terminal using that command.
Here’s how you can set up a custom command in the package.json file and run tests from the Terminal:
1. Open the package.json file in your project directory
2. Locate the “scripts” section and add a new command, such as:
openCodegen: npx playwright codegen — viewport-size=1920,1080
3. Save the package.json file
4. Open the terminal or command prompt and navigate to your project directory.
5. Run the following command to open the Playwright Inspector and set the specified browser viewport size:
Pros and Cons:
Playwright Codegen offers several advantages and drawbacks based on my experience. Here’s a breakdown of the pros and cons from my perspective:
Pros:
Rapid Test Creation: Playwright Codegen allows for the quick creation of automation tests by generating code snippets based on user actions. This feature saves time and reduces the need for writing code from scratch.
Language Flexibility: Playwright Codegen supports multiple programming languages, such as JavaScript, Python, and TypeScript. This flexibility enables to work with preferred language and utilize Playwright’s powerful automation capabilities.
Improved Test Readability: Playwright Codegen produces clean, readable code using descriptive function names and explicit element locators. This makes the test scripts more understandable, allowing for easier collaboration and code review.
Cons:
Limited Test Scenario Coverage: While Playwright Codegen helps automate common user actions, it may only cover some possible test scenarios. Additional test scenarios and edge cases require manual coding beyond the generated snippets in complex applications.
Lack of Customization: The generated code is based on recorded user actions, which may only sometimes align with specific testing requirements. Customization such as adding assertions, data validation, or dynamic test flows may require manual modifications to the generated code.
Maintenance Challenges: As the application changes, the generated code may require updates to reflect the updated UI structure. Reviewing and maintaining the generated code regularly is essential to ensure it remains relevant and accurate.
In conclusion, Playwright Codegen is a valuable tool for accelerating the initial creation of automation tests. It offers language flexibility, enhances test maintenance, and improves test readability. However, it is essential to know its limitations and invest time in learning Playwright’s API to customize and maintain the generated code effectively. Playwright Codegen can be a powerful asset in the automation testing toolkit by striking a balance between code generation and manual coding.
If you enjoyed reading this, click the clap button so others can find this post.
