Playwright Tutorial 2025 : Recording Tests

February 25, 2025

In this lesson we want to have a look at recording tests with the Playwright test generator.

The Playwright “Test Generator" is a tool for recording tests. And I agree with you … recording tests is not a good approach to build automated tests. However, it is a good approach for learning Playwright and working out how Playwright works. It can also help you build chunks of code that you can copy into your projects.

Starting the Test Generator

You can start the “Test Generator" from the Playwright menu in the test explorer view.

Starting To Record A Test

From here you should see a browser open with the recording bar displayed.

The Playwright Recording Bar

In the background, in VS Code, you should see the creation of an initial test specification file, test one spec, along with the initial test that we're going to be recording.

Test Script Recording

Recording The Test

Now I can enter the URL in the browser, and you'll see the steps that you complete created as a TypeScript script in your specification file.

Script Creation in VS Code

Now you'll see in the recording bar displayed in the browser and that we're ready to start recording.

that we've got five options. One is that we're in record mode. Two is the locator selection tool. Then we've got the assert functionality. So we can assert on three things, visibility on text and on a value.

The Test Generator Tool Bar

You see on the tool bar that we have five options.

Playwright Test Generator Tool Bar

One is that we're in record mode. Two is the locator selection tool. Then we've got the assert functionality. So we can assert on three things, visibility on text and on a value.

For example if we use the visibility assert feature, we can check that the Google logo is displayed. If I select the Google logo we can see that an expect statement is generated.

Generating Expect Statement for Image Visibility Assertion

The other option in the record bar is the pick locator. You can use the select pick locator and then you can look at the locators that Playwright would use to identify the objects or elements in your web application.

Test Generator Pick Locator

At first it looks like it's a bit difficult to actually copy that locator you need. However, if you actually click on the element, you will see the locator is entered in the VS Code bar at the top of the page. From there, you can copy the locator and you can add this into your scripts manually.

Copy locator code

Another tip for you – once you've used that locator the test generator does flip out of record mode. The key to continuing your recording is to put the cursor back in your script where you want to continue recording, and then click on the record button to continue where you left off.

In the next lesson then we're going to look at these inspectors and locators in a little bit more detail. We'll see how Playwright identifies elements in your application and how it creates those locator statements.