Free tools Windows power users keep installed
One-click scans. No signup required.
The quickest official workflow is Playwright Codegen: run npx playwright codegen https://your-app.example, use the browser that opens, and copy the generated test from Playwright Inspector. Codegen records actions and can add visibility, text, and value assertions, but the output is starter code that you should review for intent, stable locators, isolation, and cleanup.
What Playwright recording actually does
Playwright’s test generator watches interactions in a real browser and translates them into Playwright actions such as clicks, fills, selections, and navigation. It also proposes locators, prioritizing role, text, and test-id signals. Recording does not prove that a flow is a good test: accidental clicks, unstable selectors, missing assertions, shared state, and environment assumptions still require human review.
The generated script is normally written as a Playwright Test file. Treat it as a description of the user journey you demonstrated, not as a finished specification.
Prerequisites and project setup
Install Playwright Test
In a new JavaScript or TypeScript project, initialize Playwright Test:
#1 Best Overall
npm init playwright@latestChoose JavaScript or TypeScript, select the test directory, and allow the installer to add browser binaries. In an existing project, install the package and browsers according to your project’s package manager, then verify the installation by running a sample test.
Start the application first
Codegen can open a deployed URL or a local server. For a local app, start its development server in one terminal and record from another. If your project uses Playwright’s webServer configuration, the test runner can start that server for test execution; Codegen itself still needs a reachable URL when you begin recording.
Record a test with the command line
- Run Codegen with the page you want to exercise:
npx playwright codegen https://your-app.example - Use the newly opened browser as a normal user. Navigate deliberately, click controls, enter representative values, and complete one coherent scenario.
- Watch Playwright Inspector as it proposes actions and locators. The browser interaction and Inspector are separate windows, so keep both visible.
- Use Inspector’s assertion controls when the outcome needs verification. Select an element and add a visibility, text, or value assertion.
- Stop recording, choose Copy in Inspector, and paste the generated code into a
.spec.tsor.spec.jsfile in your test directory. - Run the file, then edit it before committing. Remove exploratory actions, add meaningful assertions, and make test data independent of previous runs.
The URL is optional. Running npx playwright codegen starts the recorder without navigating to a specific page, which is useful when you want to enter a local address or choose a route manually.
Record assertions and choose resilient locators
Add assertions during recording
Recording only actions can produce a script that completes without checking whether the application worked. Use the Inspector toolbar to add assertions for the result a user can observe: a confirmation message is visible, a heading contains expected text, or an input has a particular value.
Pick and inspect locators
After stopping the recording, use Pick Locator in Inspector. Hover over page elements to preview the proposed locator, click the target, and copy or edit the result. Prefer locators that express user intent, such as a button role and accessible name or a deliberately assigned test ID.
Generated locators favor role, text, and test-id signals, but they can still encode incidental wording or page structure. Replace a selector when its meaning is unclear, when localized text is unstable, or when several elements can match.
Example of a reviewed test
import { test, expect } from '@playwright/test';
test('user can sign in', async ({ page }) => {
await page.goto('https://your-app.example/login');
await page.getByRole('textbox', { name: 'Email' }).fill('[email protected]');
await page.getByLabel('Password').fill('correct-horse-battery-staple');
await page.getByRole('button', { name: 'Sign in' }).click();
await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
});The exact email and password above are illustrative. Use test credentials or fixtures appropriate for your environment, never a real user’s secret, and keep secrets out of source control.
Record in VS Code
Install the Playwright VS Code extension, open the Testing sidebar, and choose Record new. The extension creates a test-1.spec.ts file and opens a browser for the flow. This is convenient when you want recording, test files, and run controls in one editor, while the command-line workflow exposes more explicit shell options.
After recording, use the generated file as you would a CLI recording: inspect every locator, remove setup clicks, add assertions, and ensure the test can run alone.
Record under the environment your test must support
A recording is only representative of the conditions in which it was captured. Codegen supports these emulation options:
--viewport-size=1280,720for a specific viewport.--device="iPhone 13"or another configured device profile.--color-scheme=darkorlight.--timezone="America/New_York"for time-dependent behavior.--geolocation=40.7128,-74.0060when location changes the UI; grant permission in the test if required.--lang=en-US(or another language) for localized content.
For example:
npx playwright codegen
--device="iPhone 13"
--color-scheme=dark
--timezone="America/New_York"
--lang=en-US
https://your-app.exampleRecord with the same viewport, device, locale, and timezone that matter to the test. Otherwise, responsive breakpoints, date formatting, or translated labels may produce a flow that does not represent the target environment.
Preserve authenticated state
If the scenario begins after login, use a controlled test account and Playwright’s authenticated-state workflow rather than recording a password into every test. Store the resulting state file securely, exclude it from version control, and regenerate it when the account or session expires. A test should still set up its own data or use fixtures so that another test cannot change its starting conditions.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Turn generated code into a maintainable test
Keep one behavioral goal per test
A recording session may wander through several features. Split unrelated journeys into separate tests with clear names. Each test should be independently runnable and should create, select, or reset the data it needs.
Replace incidental waiting
Do not preserve arbitrary pauses merely because the recorder captured them. Playwright automatically waits for many actions and assertions to become actionable. Wait for a meaningful condition, such as a specific response, URL, or visible status, only when the application’s behavior requires it.
Assert outcomes, not implementation details
Verify what a user can see or use: a receipt appears, an error explains invalid input, or a saved item is listed. Avoid assertions on private JavaScript state or transient markup that is not part of the user contract.
Control data and cleanup
Use fixtures, API setup, or deterministic seed data where appropriate. Give records unique names when parallel workers can collide. Delete created data or use an isolated account so reruns do not depend on a previous recording.
Run and debug a recorded test
Run normally
npx playwright test tests/example.spec.tsRun headed when you need to watch the browser:
npx playwright test tests/example.spec.ts --headedUse UI Mode
UI Mode provides a testing sidebar for exploring, running, watching, and debugging tests:
npx playwright test --uiIt is a time-travel debugging experience: select a test and step through its actions while inspecting the page state around each operation.
Capture a trace locally
When a failure is difficult to reproduce, force tracing:
npx playwright test --trace onThen open the HTML report:
npx playwright show-reportThe report links to Trace Viewer, which presents a timeline, DOM snapshots, network requests, and action details. For CI, a common configuration is trace: 'on-first-retry' with retries, so a trace is collected on the first retry instead of every successful run.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteCommon recording problems and fixes
The browser does not open
Confirm that Playwright’s browsers were installed and that the command is running in the project containing the Playwright package. Check the URL separately in a normal browser and verify that a local server is listening on the expected port.
The generated locator matches the wrong element
Use Pick Locator, inspect all matches, and choose a role, accessible name, label, or test ID that identifies the intended control. If the UI has duplicate names, scope the locator to the relevant region or add a stable test ID.
The test passes during recording but fails later
Look for state shared with another test, expired authentication, time-sensitive data, a different viewport or locale, and a page that was still loading. Add an assertion for the readiness condition, isolate data, and reproduce with UI Mode or a trace.
A click is blocked by a consent banner or popup
Decide whether the banner is part of the behavior under test. If it is, record the consent action explicitly and assert the resulting state. If it is not, configure a test fixture or seeded browser state that handles consent consistently instead of relying on an accidental click.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →CI fails while local runs pass
Compare browser version, environment variables, timezone, locale, viewport, network access, and test data. Enable trace: 'on-first-retry', inspect the trace and network timeline, and avoid tests that depend on ordering or a developer’s local storage.
When you need screenshots outside Playwright tests
Playwright is the right recorder when you need an executable interaction test. For a standalone screenshot service—such as generating documentation images, visual snapshots, or PDFs from URLs—ScreenshotNeo avoids maintaining browser-launch code.
Or skip the browser setup
One GET request returns a PNG, JPEG, WebP, or PDF. See the ScreenshotNeo documentation for all options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Before capture, ScreenshotNeo accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Create a free ScreenshotNeo account to get started.
Recording checklist
- Start from a known URL and controlled test data.
- Capture one user-visible behavior at a time.
- Add an assertion for the expected result.
- Review every generated locator and remove exploratory actions.
- Record with the required device, viewport, locale, timezone, and color scheme.
- Keep authentication state and secrets out of source control.
- Run the test independently, then inspect UI Mode or a trace for failures.
- Make CI retries and trace collection deliberate rather than relying on local behavior.
Frequently Asked Questions
Can Codegen record an existing login session?
Yes. Start Codegen in the browser context and authenticate as the test user, then preserve authentication using Playwright’s documented storage-state approach rather than committing credentials.
Does recording create a complete test suite?
No. It creates starter actions and locators. You must add intent-specific assertions, isolate data, remove accidental steps, and adapt the file to your project’s fixtures and configuration.
What is the difference between UI Mode and Trace Viewer?
UI Mode is an interactive way to explore and run tests. Trace Viewer analyzes a captured run with a timeline, DOM snapshots, network requests, and action details, which is especially useful after a failure.
Recommended Free Tools
The Bottom Line
Use npx playwright codegen or VS Code’s Record new to create the first draft, then make it reliable by reviewing locators, asserting user-visible outcomes, isolating data, matching the target environment, and using UI Mode or traces to diagnose failures.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
