Most testers assume that Playwright’s Codegen is just a quick way to record clicks and keystrokes, a tool to generate scripts fast. It seems simple: open the recorder, interact with the app, and the test writes itself.
But relying on it this way often produces fragile tests that break at the slightest UI change. Minor updates, like renamed buttons or shifted layouts, can make an entire recorded script fail. I learned that this happens because Codegen records exactly what happens without considering which elements are stable or how the app might change.
I found that by paying attention to locators and test flow, I can use Codegen to create reliable, maintainable tests that survive small UI changes.
And I will show how!
Overview
What is Playwright Codegen?
Playwright Codegen is a tool available as a command-line utility and a VS Code extension that lets you generate test scripts automatically by recording your interactions in a web browser. It acts as a “record and playback” solution, helping you quickly create end-to-end tests in languages like TypeScript, JavaScript, Python, Java, and C#.
Key Features and Benefits of Playwright Codegen
- Automatic Code Generation: As you navigate, click, or type on a web page, Codegen captures your actions and converts them into executable test code in real time.
- Intelligent Locators: Instead of fragile CSS or XPath selectors, Codegen creates reliable, user-focused locators like getByRole and getByText to reduce test flakiness.
- Built-in Assertions: You can add simple checks such as element visibility, text content, or values directly during recording using the Playwright Inspector or VS Code toolbar.
- Cross-Language Support: Generate code in the language you prefer, making it accessible to developers and testers with different skill sets.
- Rapid Test Prototyping: Quickly produce a test skeleton that can be refined later with more advanced logic and scenarios.
- Mobile Emulation: Record tests while simulating different devices, screen sizes, and even geolocation settings for comprehensive coverage.
How to Use Playwright Codegen?
You can start Codegen either via the command line or through the VS Code extension.
Using the Command Line (CLI):
1. Make sure Node.js and Playwright are installed.
2. Run the following command, replacing the URL with your application:
npx playwright codegen [URL_of_your_app] # Example: npx playwright codegen demo.playwright.dev
3. Two windows will open: your browser and the Playwright Inspector.
4. Interact with the browser to record actions.
5. Stop the recording and copy the generated code into your test file.
Using the VS Code Extension:
- Install the official Playwright Test for VS Code extension.
- Open the Playwright sidebar in VS Code.
- Click “Record new” to start a recording session.
- The generated test script appears directly in a new file within your editor, ready for editing or execution.
In this article, I will explain what Codegen is, how to set it up, record tests, and generate reliable locators for stable automation.
What is Playwright Codegen?
Playwright Codegen is a command-line tool that records your actions in a browser and turns them into test scripts. It captures clicks, inputs, and navigation in real time and generates accurate, ready-to-run code in JavaScript, TypeScript, Python, or C#. This removes the need to write tests manually and ensures the steps reflect real user behavior.
Benefits of Using Codegen for Test Automation
Playwright Codegen simplifies test creation and improves test reliability. Here are the key benefits of using it.
- Faster Script Creation: Codegen writes the test as you interact with the application, so you don’t need to write it manually.
Read More: A Detailed Guide on Automation Scripts
- Accurate User Flows: It captures the exact sequence of actions, which reduces the chance of missing key interactions.
- Built-in Locator Generation: Codegen produces stable locators that are less likely to break with UI changes.
- Handles Complex UI Interactions: Codegen captures advanced events like file uploads, drag-and-drop, and keyboard shortcuts.
Read More: UI Testing: A Detailed Guide
When to Use Record & Play in Playwright?
Record & Play (Codegen) is ideal in scenarios where you want to quickly create test scripts without writing code from scratch. It helps speed up test creation, especially for repetitive or straightforward workflows.
You should consider using it when:
- Prototyping Tests: Quickly generate a test skeleton to understand the flow and structure of your application.
- Onboarding New Testers or Developers: Those unfamiliar with Playwright can record interactions and learn how tests are structured.
- Capturing Complex User Flows: Record sequences like form submissions, navigation, or multi-step processes that are tedious to write manually.
- Creating Baseline Automation: Establish initial tests that can later be refined with assertions, custom logic, and robust locators.
- Exploring Dynamic Pages: Quickly see how Playwright captures actions on pages with dynamic content or complex UI elements.
Note: While Record & Play is a powerful starting point, it is not a replacement for thoughtful test design. Recorded scripts may be fragile if used as-is, so you should review locators, add validations, and structure the test for long-term maintainability.
How to Record and Playback in Playwright Using Codegen?
Playwright Codegen lets you record your actions and create test scripts quickly. Follow these steps to begin.
Playwright Codegen Prerequisites
Before running Codegen, ensure you have Node.js installed on your machine. You also need to install Playwright and its dependencies. Run these commands in your terminal:
npm init -y npm install playwright
Also, ensure your development environment supports your preferred language, like JavaScript or Python.
Running Codegen
Start Codegen by running the following command in your terminal. This example uses the bstackdemo.com website:
npx playwright codegen https://bstackdemo.com
This launches a browser where you can perform actions to create your test script.
Read More: Mastering UAT Test Scripts
Recording a Test
After launching Codegen, interact with the application normally. Click buttons, fill forms, and navigate pages. Codegen records every action and translates it into test steps instantly. Once you finish recording, click save to store the script.
Generating Locators
Codegen automatically generates locators based on element attributes like text, IDs, or CSS selectors. It tries to pick stable selectors that won’t break easily if the UI changes. You can edit these locators manually within the recorded script to improve reliability.
Running and Validating the Script
Run the saved script using the Playwright test runner to verify that the recorded steps execute correctly on the application.
You can enhance the script by adding assertions, handling errors, or customizing actions to cover your test scenarios fully. Running and validating the script ensures that your automated tests are reliable and ready for integration into your test suite.
How is Playwright Codegen Different from BrowserStack?
Playwright Codegen records and runs tests mainly in local browsers or emulators provided by your machine or the Playwright environment. These setups may not fully replicate real user conditions, device-specific behaviors, or browser quirks, such as differences in CSS support, JavaScript handling, security policies, event timing, rendering issues, and varying web standards support.
BrowserStack offers access to real devices and a wide range of browser versions hosted in the cloud. Running your Codegen-generated scripts on BrowserStack helps uncover issues that appear only on actual hardware or specific browser setups, ensuring your app works correctly across different environments.
In short, Playwright Codegen helps you create test scripts easily while BrowserStack provides the infrastructure to run those tests on real devices and browsers at scale. They complement each other by simplifying script creation and expanding test coverage across devices.
How to Use Playwright Codegen With BrowserStack?
Follow these steps to set up BrowserStack and execute your scripts on real mobile devices and browsers in the cloud.
1. Create a BrowserStack Account and Get Credentials
Sign up for BrowserStack if you haven’t already done so. Get your username and access key from your account dashboard. These authenticate your tests on BrowserStack’s cloud.
2. Prepare Your Playwright Script
Use Codegen to record and save your test script locally. Ensure your script works with Playwright’s test runner on your machine.
3. Install BrowserStack Playwright SDK
Add BrowserStack’s Playwright SDK to your project by running:
npm install @browserstack/playwright-browserstack
This SDK enables integration with BrowserStack’s cloud infrastructure.
4. Configure Your Test to Use BrowserStack
Modify your test script or create a configuration file with your BrowserStack credentials and desired device and browser capabilities. For example, specify the OS, browser, and device name on which to run the test.
Here is an example snippet to set capabilities in your Playwright config or test setup:
const browserStackCaps = {
browser: 'chrome',
browser_version: 'latest',
os: 'Windows',
os_version: '11',
'browserstack.username': 'YOUR_USERNAME',
'browserstack.accessKey': 'YOUR_ACCESS_KEY',
'browserstack.playwrightVersion': '1.31.1' // match your Playwright version
};5. Run the Test on BrowserStack
Execute your Playwright test script using the BrowserStack SDK command or through your configured test runner. This uploads and runs your script on the specified real devices and browsers hosted by BrowserStack.
6. Monitor and Analyze Test Results
Check the BrowserStack Automate dashboard to view test execution status, logs, screenshots, and videos. This helps verify your app’s behavior on real devices.
Conclusion
Playwright Codegen simplifies test creation by converting user interactions into reliable scripts. It helps you build tests quickly without writing them from scratch. You can customize the output to add assertions or tweak locators for stability.
While Playwright Codegen works well in local environments, it may miss issues tied to specific devices or browsers. BrowserStack provides access to real mobile devices, desktop browsers, and multiple OS combinations in the cloud. It supports parallel testing, detailed test reporting, and broader environment coverage to help you validate Codegen scripts in real user conditions.
