Test Generator using Playwright

Cerosh Jacob
3 min readAug 27, 2023

--

When automated testing was first introduced, testers had to write scripts using programming languages. This was a time-consuming and error-prone process, which limited the use of automation testing to experienced developers. Later, keyword-driven testing emerged as a way to make automation testing more accessible to non-developers. Testers can define a set of keywords that represent user actions, such as “click,” “enter text,” and “verify text.” They can then combine these keywords to create test scripts without writing any code.

Recently, there has been a trend towards using no-code or low-code automation testing tools that employ a graphical user interface (GUI) to create test scripts. Nowadays, most automated testing tools allow users to record their actions and generate automated scripts from them. The first tool to introduce record and playback functionality in test automation was “QTP” (QuickTest Professional), which is now called “UFT” (Unified Functional Testing). It was developed by Mercury Interactive, which was later acquired by HP and is now part of Micro Focus.

Cypress Studio is the feature used for record and playback in Cypress. It is an experimental feature that generates test code as you interact with the application. You can modify or extend this code as needed, and generate assertions by right-clicking on an element you want to assert on. However, the free version of Cypress Studio has some limitations. For example, it only allows a maximum of 100 tests. If you need to create more than 100 tests, you will need to upgrade to a paid plan.

Playwright’s code generation approach offers developers and testers more control, flexibility, and robustness. This makes it ideal for those who are comfortable with coding and need automation scripts that can easily adapt to changes in the application.

To generate tests, use the following command. It opens two windows: a browser window with the demo site and the Playwright Inspector window. The Inspector window allows recording, copying, and clearing tests. It also lets you choose the programming language for the generated code.

npx playwright codegen demo.playwright.dev/todomvc

The URL field is optional. Instead, you can add the URL directly to the browser window. Playwright analyzes the page and identifies the target element using various locator strategies, with top priority given to identifying elements using roles, text, and test IDs. CSS and XPath are given low priority. Playwright also improves the locator to handle multiple matching elements.

If you do not want to generate a script but still want to create a unique test identifier, the “Pick Locator” option in the inspector window allows for that. Clicking on the element will generate an identifier code in the inspector window where editing and copying are allowed to fine-tune the identifier.

The codegen feature in Playwright generates test code. It is not intended to replace writing your own tests, but rather to assist in automating repetitive tasks and creating more complex tests.

My recent publication compiled a comprehensive collection of 100 similar typescript programs. Each program not only elucidates essential Typescript concepts and expounds upon the significance of test automation but also provides practical guidance on its implementation using Playwright. This resource will undoubtedly be valuable if you look deeper into similar topics.

--

--

No responses yet