How to Use Playwright Recorder to Automatically Generate Test

What Is Playwright Recorder?

Playwright Recorder is a built-in tool that records end-to-end browser interactions and automatically generates Playwright test scripts. Using codegen, you can record playwright test scripts in NodeJS(JavaScript, TypeScript), Java, Python, or .NET C#. It’s a powerful feature in Playwright that watches your interactions in the browser and automatically writes test code for you. You click around; it writes the code. Simple as that.

Recording Playwright Test Script

Playwright provides two ways to record browser interaction and generate an automation test script.

1. Using Codegen
2. Using Playwright Test for VSCode plugin

Let us learn how to record a playwright test using both these methods.

Before recording a test in Playwright, you must have installed Playwright on your system. You can learn how to install Playwright in my Playwright automation tutorial guide if you have not already installed it.

Use Playwright codegen (Playwright Recorder)

Here’s a step-by-step tutorial to generate playwright test scripts using codegen.

Launch the playwright recorder using codegen

To launch the playwright recorder (test generator), you can run the command given below in the command prompt or VS Code terminal.

Command to start playwright test recording using codegen

npx playwright codegen <your site URL>

This command will open a browser (with your website URL) and the Playwright Inspector window as shown in the image given below.

By default, Playwright records your test scripts in JavaScript. However, if you prefer to write tests in another supported language, Playwright makes it easy. You can generate test scripts in Java, Python, or C# by using the –target flag followed by your desired language. This flexibility allows you to work with the programming language you’re most comfortable with while using Playwright for end-to-end testing.

Command to record Plawright test in Java

You can use the command given below to record a test in Java.

npx playwright codegen --target java

Record the Playwright test in Python

To record a Playwright test in Python, you can use the following command.

npx playwright codegen --target python

Plawright test recording in .NET C#

You can type the command given below in the command prompt or the VS Code terminal to generate a test script in .NET C#

npx playwright codegen --target csharp

You can also change your preferred test script generation language directly from the Playwright Inspector window. This feature provides a convenient way to switch between JavaScript, Python, Java, or C# while recording your test steps.

Interact with the Page

Now you’re all set to start recording your test steps. Every action you perform on the web page, such as clicks, form inputs, or navigation, will be automatically recorded in the Playwright Inspector.

Start clicking, typing, and navigating on the web page. For example, if you:

• Visit a login page
• Enter username/password
• Click “Submit”

The recorder might output:

await page.goto(<website URL>);
await page.getByLabel('Username').fill('myuser');
await page.getByLabel('Password').fill('mypassword');
await page.getByRole('button', { name: 'Login' }).click();

It’s a code generator and test recorder in one.

Once the test script is recorded, you can easily copy the generated code and use it in your test case. To stop the recording session, simply close the browser along with the Playwright Inspector window.

Use the Playwright Test for VSCode plugin to generate test scripts

The Playwright Test for VSCode plugin is an excellent alternative to the built-in codegen feature for recording test scripts in Playwright. It offers a user-friendly interface within Visual Studio Code, making test creation and debugging even more efficient.

To record a test using the Playwright Test for VSCode plugin, make sure the plugin is installed and enabled in your Visual Studio Code editor.

Start Recording

To start test script generation using the Playwright Test for VSCode plugin:

• Click on the Testing view from the Activity Bar located on the left-hand side of Visual Studio Code. This section will display a list of available Playwright tools that you can use to record, run, and debug your test scripts.
• From the list of tools, click on Record Now. This will create a new test case in Visual Studio Code, launch the browser, and begin capturing your interactions on the web page in real time.

• Once your recording is complete, simply close the browser to stop the recording process. The generated test script will be saved in your project for further editing or execution.

Pro Tips for Using Playwright Recorder

• Use smart locators: The recorder uses getByRole, getByLabel, and other recommended selectors for better test stability.
• Record in segments: For complex apps, break your test into smaller recordings and stitch them together.
• Tweak and optimize: Use the recorder to build your base, then manually enhance the script with assertions, loops, and test logic.

Final Thoughts

If you want to write end-to-end tests without getting too deep into code right away, the Playwright Recorder is a total game-changer. You can use playwright codegen or the Playwright Test for VSCode plugin to generate test scripts and cut down your workload, and make your testing process way smoother and faster.

Aravind

Hi, I’m Aravind, a seasoned Automation Test Engineer with 17+ years of industry experience. I specialize in tools like Selenium, JMeter, Appium, and Excel automation. Through this blog, I share practical tutorials, tips, and real-world insights to help testers and developers sharpen their automation skills.