Table of Content
- What is "Record & Play" in Playwright?
- When to Use It
- Why Use It
- How to Use "Record & Play" in Playwright
- Conclusion
What is "Record & Play" in Playwright?
Interact with a web app manually (clicks, typing, navigation, etc.)
Auto-generate Playwright test code based on those actions
When to Use It
- Kickstarting automation for a new app
Ideal when you’re just starting with Playwright and exploring software automation testing services.
- Learning Playwright's syntax
Helps beginners understand how actions translate to code.
- Exploratory testing sessions
Record a session and later turn it into a regression test.
- Rapid prototyping
Want to quickly script user flows without writing everything manually.
Why Use It
- Saves time by reducing manual coding
- Learns selectors and flows automatically (even suggesting better selectors)
- Editable and extendable – use recorded code as a starting point and customize it
- Helps in debugging or replicating test scenarios
How to Use "Record & Play" in Playwright
Prerequisites
1. Make sure Playwright is installed: npm init playwright@latest
2. OR if it is already installed: npx playwright install
There are two main ways to create tests in Playwright:
1. Manual Scripting:
You can write the test code yourself using Playwright's API. This gives you full control over the logic, structure, and assertions in your test.
2. Using the Test Generator (Codegen):
Playwright provides a tool called the Test Generator or Codegen, which acts like a test recorder. It automatically captures your actions on a website (like clicks, typing, navigation, etc.) and generates the corresponding test script for you. Once recorded, you can edit, save, and run the test.
Step_1: Open the terminal
- Execute the command >> npx playwright codegen
- This command will open the Playwright Inspector along with the browser, and one will automatically trigger the launch of the other. By default, the browser launched is Chrome.
Steps_2: launch the application URL on the opened browser
- Interacting with the elements and parallelly in the playwright inspector the script is automatically generating.
(the cursor on the element it is also suggesting required locator)
Step_3: Once the recording is over >> Click on the “Record” button from playwright Inspector
- Inspector automatically generates a script for operations and a few more options are available in this playwright inspector Pick locator so by using it easily get locators for the elements.
E.g.:
- Click on the Pick location option
- Click on any button OR link to generate the locator
- Check that the locator which is automatically created by the playwright Inspector
Here, the script must be manually copied, and a new test file must be created under the test folder. The script must then be copied and executed.
To solve this issue, a single command will create a new test file and cause the script to be automatically recorded in the file itself.
Step_1: Open the terminal
- Execute the command >> npx playwright codegen --output tests/recordfile.spec.js OR npx playwright codegen –o tests/recordfile.spec.js
(Once command executed it will create file automatically and whatever the test have recorded, will be copied into this file with the steps)
Step_2: Once the browser and playwright inspector opened
- launch the application URL on the opened browser
- Perform the steps
- Once it done, click on the Record button from Playwright Inspector
A new file which is automatically created with script.
Conclusion:
Playwright's Record & Play (Codegen) feature is a powerful tool for quickly generating test scripts with minimal effort. Whether you're new to Playwright or looking to prototype user flows rapidly, this feature streamlines the process by capturing real-time interactions and turning them into editable, executable code.
It not only accelerates test creation but also helps you learn Playwright’s syntax, improve locator strategies, and build a solid automation foundation. With just a single command, you can launch a browser, record actions, and generate complete test scripts making automation simpler, faster, and smarter.
About Author
Divya Panchal is an ISTQB-certified QA Tester at PixelQA a Software Testing Company with expertise in both manual and automation testing. She has evolved from a trainee to a key contributor across multiple projects, consistently ensuring software quality and reliability. With a strong focus on continuous professional development, Divya is dedicated to expanding her knowledge in automation and API testing, underscoring her commitment to delivering high-quality software solutions.