How to Use Playwright Codegen for Test Automation?

Playwright Codegen helps you create test scripts automatically by recording user actions in a browser. Instead of writing code manually, you can interact with a site and let Playwright generate the test. This makes it easier to build automated tests faster, especially for teams new to test automation or working with complex UI flows.

This article covers 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.

• 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.

How to Use Codegen in Playwright?

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.

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.

Talk to an Expert

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.

Try BrowserStack for Free