Playwright Codegen: Record Scripts, Then Refine

Writing a browser script from scratch means opening developer tools, inspecting elements, guessing at locators and running the script again and again until each step works. For a long portal workflow, that can take far longer than the task the script is meant to automate. Playwright codegen shortens the first part of that work: you perform the steps in a browser window and Playwright writes the matching code as you go. The output is a starting point, not a finished script. Recorded code captures every click, including the accidental ones, and knows nothing about errors, timing problems or secrets. This guide explains how to record a useful first draft and how to refine it into a script you can maintain.

What Playwright codegen does

Playwright includes a test generator. According to the Playwright documentation, it generates code as you perform actions in the browser, looks at the page to choose the best locator, prioritising role, text and test ID locators, and improves a locator when it matches more than one element so that it uniquely identifies the target (Playwright: Test generator). You start it from the command line with an optional starting URL, and two windows open: a browser to work in and an inspector showing the generated code.

The generator can also add assertions. The documentation lists options to assert that an element is visible, that it contains specific text or that it has a specific value. It can emulate a viewport, device, colour scheme, geolocation, language or time zone, which helps when a portal behaves differently on mobile or in another locale.

Plan the recording before you start

A clean recording saves editing later. Before starting:

• Write down the steps of the workflow in plain language, with the expected result of each one
• Prepare test data or a safe account, so the recording does not change real records
• Decide where the script should start and stop, for example from the dashboard to a downloaded file
• Close pop-ups, cookie banners and tours in advance if they are not part of the normal flow, or plan to handle them explicitly in code

Then record one workflow per session. Long recordings that wander through several tasks produce code that is hard to split later.

Handle logins separately

Most useful workflows need a signed-in session. The documentation describes a save-storage option that saves cookies, local storage and IndexedDB data at the end of a session, so you can record the login once and load that state when recording other steps. It also warns that this file contains sensitive information, should only be used locally and should be added to your .gitignore or deleted when you have finished. Our guide to Playwright web scraping covers how saved state fits into scripts that run on a schedule.

Do not leave typed passwords in recorded code. The generator writes what you type, so a recorded login step will contain the password as a string. Replace it with a value read from an environment variable or secrets manager before the file is saved anywhere shared.

Refine the recorded code

Treat the generated file as a rough draft. A typical clean-up pass includes:

• Remove noise: accidental clicks, repeated focus events and steps that do not change anything
• Review locators: keep role and label locators, and replace any that depend on changing text, such as a date or a count, with something stable
• Add meaningful checks: after each important step, assert that the expected page, message or value appeared
• Name things: wrap repeated steps in functions with clear names, such as open_reports_page or download_monthly_export
• Parameterise inputs: replace hard-coded values such as dates, account numbers or search terms with arguments
• Add timeouts and error handling: decide what should happen if a page does not load or an element never appears

The aim is code that reads like the plain-language steps you wrote before recording.

Worked example: hypothetical clean-up checklist

The table below shows a hypothetical review of a recording for a supplier portal report download. It illustrates the kind of changes to make, not output from a real recording.

Recorded stepProblemRefinementClick on page backgroundAccidental clickDeleteFill password field with typed valueSecret in codeRead from environment variableClick link with text containing a dateText changes monthlyLocate by role and stable labelClick Export, then nothingNo check that export startedWait for the download and check the file nameSame filter steps repeated three timesHard to maintainMove into a named function with argumentsNo handling if report is emptySilent failureCheck for empty-state message and log it

Keep scripts maintainable over time

Portals change. When a recorded script breaks, you can use the generator again to pick a new locator for the changed element rather than re-recording everything. The documentation describes a pick locator button that highlights the locator for any element you hover over, which is useful for this kind of repair.

To make breakage visible quickly, run scripts on a schedule, record each run's result and save screenshots and traces when a run fails. Our guide to the Playwright trace viewer explains how to read those traces.

Use recordings to agree the process

A recording session is also a good way to confirm the workflow with the people who do it today. Ask someone from the team that owns the task to perform the steps while the generator runs, and talk through each one. You will often learn about exceptions, such as an extra approval screen for large orders or a different menu for one region, that never appeared in the written description. Note these down and decide whether the script should handle them or hand the case back to a person.

Know when codegen is not enough

Recording works best for linear workflows with predictable pages. It is less helpful when:

• The workflow branches heavily depending on data
• Pages load content in ways that need custom waiting logic
• The task involves large loops, such as walking through hundreds of records
• The site offers an API or export that would be more reliable than the user interface

In those cases, use codegen for locators and short sequences, and write the control flow by hand. Before automating any third-party site, confirm that automated access is allowed by its terms.

Frequently Asked Questions

What is Playwright codegen?

It is Playwright's test generator. You perform actions in a browser window, and it writes the matching code, choosing locators and optionally adding assertions.

Can I use recorded code as is?

It is better treated as a first draft. Remove accidental steps, check locators, add assertions and error handling, and move any secrets out of the code.

How do I record steps behind a login?

Record the login once with the save-storage option, then load that state for later recordings. Keep the state file out of version control because it contains sensitive information.

When should I write browser scripts by hand instead?

When the workflow branches a lot, loops over many records or needs custom waiting logic. Codegen can still help pick locators for individual steps.

Turn recordings into reliable automation

We help teams turn manual portal tasks into maintainable browser scripts with proper checks, scheduling and monitoring. See our B2B lead mining and prospect verification service, or talk to us about Playwright codegen.

About the Author

Manav Sharma is the founder of Insyrge and a CRM solutions architect. He works across Zoho, Salesforce, HubSpot, Odoo and more, designing the CRM setups, integrations and automations that keep sales and operations teams working from the same data.