Simplify Test Creation in Playwright: How to Record Tests Using VS Code Extension and Inspector

The Playwright recorder is a powerful tool that allows testers to easily create automated tests by capturing their interactions with a web application. It automatically generates reusable Playwright code based on the actions performed — such as clicks, typing, or navigation.

This feature is especially helpful for manual testers who are new to automation, as it speeds up script creation and provides a practical way to learn Playwright syntax. The generated code works across multiple browsers, supporting scalable, cross-browser automation.

In this article, we’ll explore the two main Playwright recording tools — the VS Code Extension and the Playwright Inspector (codegen) — and see how they help streamline test creation.

When testing new features, writing every action manually (e.g., clicks, inputs, or navigation) can be time-consuming. Recorders solve this by observing your interactions in the browser and automatically generating equivalent Playwright code.

Using a recorder can help you:

• Build tests faster without memorizing selectors.
• Learn Playwright syntax through real-time examples
• Prototype test flows quickly, then refactor into structured frameworks

In short, recorders bridge the gap between manual exploration and automation scripting, helping testers transition smoothly to automation.

3.1 Overview

The Playwright VS Code Extension allows users to record, edit, and run tests directly inside Visual Studio Code. It keeps the whole process — from recording to execution — within the IDE, providing an efficient, integrated workflow.

3.2 How to Record

1. Open VS Code → Command Palette → “Record new test” (Or can be find Record new at Playwright tab)
2. Choose your browser and target URL.
3. Interact with the site (click, type, navigate).
4. Stop recording → a .spec.ts file will be created automatically.

A browser window will open and begin recording your actions. Each interaction is translated immediately into Playwright test code inside your project.

Use the recorder toolbar to capture assertions during your session:

• Record → Start/stop recording actions
• Pick locator → Select an element and generate its locator
• Assert visibility → Verify that an element is visible
• Assert text → Verify that an element contains specific text
• Assert value → Verify an element’s input value
• Assert snapshot → Compare a screenshot against a baseline snapshot

These built-in assertions help ensure your test validates behavior, not just UI clicks. For example, you can add an assertion to verify if the Add to Cart popup is visible after clicking the Add to Cart button.

3.3 Demo Example

Test Scenario:

1. Given that there are products named “Men Tshirt”
2. And the user logs into the website
3. And the user is on the Products page (https://automationexercise.com/products)
4. When the user searches product “Men Tshirt”.
5. And the user clicks on the button “Add to cart”.
6. And the user navigates to view the user’s cart page
7. Then the product “Men Tshirt” displayed in the user’s cart

Prerequisite: Ensure Playwright is installed and your project is open in VS Code

Step 1: Start Recording

A new test-1.spec.ts file will be created, and a browser window opens for interaction.

Navigate to the target URL (https://automationexercise.com/products) and perform the steps of the scenario. Your actions will appear in the test file in real time.

Step 2: Add Assertions

Use the recorder toolbar to assert expected outcomes—for example, verifying that the Add to Cart popup becomes visible after clicking the button. Or the product should be added in

Step 3: Stop Recording

Once finished, Playwright generates the full test script.

Step 4: Run the Test

Open TEST EXPLORER → click the ▶ Run icon next to the test.
Playwright runs the script (typically headless), and results appear in the sidebar.

4.1 Overview

The Playwright Inspector is a tool designed to record tests interactively as a Playwright session is executed. It provides an intuitive view of the application under test while recording interactions such as clicks, form inputs, and navigation.

4.2 How to Start

Run the command:

npx playwright codegen https://automationexercise.com/

This opens:

• A browser window for interaction
• The Playwright Inspector window, showing generated code live

While using Inspector, you can:

• Pause and resume recording
• Inspect selectors
• Switch output language (JavaScript, TypeScript, Python, Java, C#)
• Copy the generated code into your project

When finished, click the record button to stop, and copy the code to your editor.

Feature	VS Code Extension	Playwright Inspector
Launch	Inside VS Code	CLI (npx playwright codegen)
Output	Complete test file	Code snippet only
Language Support	JavaScript / TypeScript	JS, TS, Python, Java, C#
Debugging	Basic	Full Inspector tools
Interface	Integrated in VS Code	Separate graphical window
Best For	Quick setup, beginners	Debugging, cross-language scripting

Both tools generate Playwright code based on your recorded actions. The VS Code Extension focuses on speed and simplicity, while the Inspector offers more control and flexibility for debugging and cross-language support.

When to Use

• VS Code Extension
  • You mainly write tests in JavaScript or TypeScript.
  • You want a quick way to generate runnable test files inside your project.
  • You prefer a visual approach directly within your IDE.
• Playwright Inspector
  • You use Python, Java, or C# for testing.
  • You need detailed debugging or selector inspection.
  • You want to experiment and refine code manually.

---

Best Practices

• Refactor recorded code – Clean up repetitive steps and replace fragile selectors.
• Adopt the Page Object Model (POM) – Move repeated actions (login, navigation) into reusable methods.
• Add meaningful assertions – Ensure each test validates real behavior, not just UI clicks.
• Use stable locators – Prefer getByRole(), data-testid, or semantic attributes over auto-generated ones.
• Treat recordings as a starting point – Use them to bootstrap tests, then refine for production use.

The Playwright recorder is an excellent starting point for anyone learning test automation. It enables manual testers to record real user actions and instantly see the equivalent Playwright code, lowering the barrier to automation.

By combining recorder tools with best practices like refactoring, applying the Page Object Model (POM), and adding meaningful assertions, teams can build maintainable and scalable test suites more efficiently.

With Playwright’s support for multiple browsers and programming languages, its recorders empower testers to prototype quickly and automate confidently.

Reference

Test generator | Playwright