Playwright Tutorial for Beginners : Lesson 5

March 2, 2025

We’ve already seen how to write your first test in Playwright and how to record tests using the “Test Generator" tool. We’ve seen how to use the pick locator option on our web page to identify objects that we want to interact with too.

However, there is another stand alone tool called the “Playwright Inspector". This very useful tool can be used to help you construct your tests and identify locators.

Playwright Inspector

This “Inspector" tool is not directly initialized from within Visual Studio Code. However, you can start it from a terminal using npx.

Starting Playwright Inspector

First open a terminal from within VS Codeview terminal.

Open A Terminal In VS Code

Then you need to execute this npx command:

npx playwright codegen https://www.google.com

Using the url of the web page you want to navigate directly too as the final parameter in the command. Like this:

Npx Playwright Codegen

So you can run this command directly from within Visual Studio Code or if you’ve got a command prompt open, you can run it directly from a command prompt as well.

Using Playwright Inspector

Once you’ve run this what you’ll get is this “Playwright inspector" tool that command allows you to inspect objects and record tests

As you interact with your application, you’ll see that test steps are added to the test panel:

Recording Tests with Playwright Inspector

We can also use the locator tool to identify objects that we might want to interact with.

Using the Inspector Tool

Then we can see and copy the locator code that Playwright will generate. We can jump back into record mode again if we need to, if we want to continue to record in our script, and we can use the assert visibility, assert text, and assert value options in the toolbar as well to add expect statements to our script that we’re recording.

Assert Functionality

Once we’ve completed the recording of that script, we can, of course, copy the code, and add to one of our test specifications (or we can create a completely new test test specification if required).

The Playwright Inspector tools is a useful little tool that you’ll find helps you experiment a bit with some of the tests and work out locators before you add them to your test specifications within Visual Code Studio.

So in the next lesson, we’re going to look at executing tests within the Visual Studio environment and how to execute them from the command line too.