Free tools Windows power users keep installed
One-click scans. No signup required.
Start a JavaScript Playwright project with npm init playwright@latest, install its browser binaries, then write tests with @playwright/test. The core pattern is to perform a user action through a resilient locator and verify the result with a web-first expect assertion. This guide walks through setup, a first test, browser projects, local and CI runs, and failure diagnosis.
What you need before installing Playwright
Playwright supports JavaScript and TypeScript and uses Node.js. The current installation guide lists Node.js 22.x, 24.x, or 26.x. Supported operating systems listed there include Windows 11 or newer, Windows Server 2019 or newer, and WSL; macOS 14 or later; and Debian 12/13 or Ubuntu 22.04/24.04/26.04 on x86-64 or arm64. These requirements can change, so check the official getting-started page if your environment differs or an install fails.
Playwright Test is the test runner package used in this tutorial. The official project generator configures the runner and can also install browsers and add a GitHub Actions workflow.
Create a JavaScript Playwright project
From a terminal in the directory where you want the project, run the command for your package manager:
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstall#1 Best Overall
npm init playwright@latestyarn create playwrightpnpm create playwright
With npm, the generator asks whether to use JavaScript or TypeScript, where to put tests, whether to add a GitHub Actions workflow, and whether to install browsers. Choose JavaScript for the examples below. If you skip browser installation during setup, install it afterward:
npx playwright install
To install Chromium and its operating-system dependencies together on a supported Linux environment, use npx playwright install --with-deps chromium. The separate dependency command is npx playwright install-deps. On systems where you lack permission to install OS packages, ask an administrator or use an environment with the dependencies available.
Browser binaries are versioned alongside Playwright. After updating the Playwright package, rerun npx playwright install if the browser executable is missing or the version is out of sync. For package and version checks, see the installation documentation.
Write and run your first test
The generator creates a config file and an example test directory. A minimal test can look like this; save it as tests/homepage.spec.js:
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsconst { test, expect } = require('@playwright/test');
test('homepage has the expected title', async ({ page }) => {
await page.goto('https://playwright.dev/');
await expect(page).toHaveTitle(/Playwright/);
});The page fixture represents a page in a browser context created for the test. Playwright gives each test a fresh browser context by default, so cookies, local storage, and page state do not leak from one test to another. Avoid making one test depend on another test having run first.
Rank #2
Run the suite headlessly with:
npx playwright testRun one file, open the HTML report, or start the interactive runner with:
npx playwright test tests/homepage.spec.js
npx playwright show-report
npx playwright test --uiThe UI offers a watch mode, test filtering, step details, and a time-oriented view that is useful while developing.
Choose locators that survive UI changes
Playwright’s Locator API finds elements and retries actions as the page changes. Prefer locators that communicate how a person identifies the control: its role and accessible name, visible text, or an explicit test identifier. Use CSS selectors when they are the appropriate stable contract, not as the automatic first choice.
Role and accessible name
await page.getByRole('button', { name: 'Sign in' }).click();Visible text
await page.getByText('Welcome back').waitFor();Test identifier
await page.getByTestId('save-profile').click();Actions commonly used in tests include click(), fill(), focus(), press(), selectOption(), and setInputFiles(). For example:
await page.getByLabel('Email').fill('[email protected]');
await page.getByLabel('Password').fill('example-password');
await page.getByRole('button', { name: 'Sign in' }).click();Before acting, Playwright checks that the target is actionable and waits for the required conditions. This is why a fixed delay such as waitForTimeout(3000) should not be the default synchronization strategy. A delay can be too short on a slow run and waste time on a fast one. Prefer waiting for the meaningful page state or asserting it.
Use Codegen as a drafting aid
Codegen opens a browser and the Playwright Inspector. Perform the interaction in the browser, then review the generated locator and action code. Launch it against a site with:
npx playwright codegen https://example.comCodegen prioritizes role, text, and test-id locators. Treat its output as a draft: give the test a meaningful name, remove incidental interactions, and add assertions that describe the requirement. A recorded click sequence alone does not establish that the application behaved correctly.
Make assertions wait for the page
Playwright’s asynchronous web-first matchers poll until the condition succeeds or the assertion timeout expires. That makes an assertion such as await expect(page).toHaveTitle(/Playwright/) more reliable than reading the title immediately after navigation and comparing it once.
Locator assertions work the same way. For example:
await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled();
await expect(page.getByRole('checkbox', { name: 'Remember me' })).toBeChecked();Assert the outcome the user cares about—such as a confirmation heading or a changed status—rather than only that an action ran. The best-practices guide recommends web-first assertions for reliable tests.
Run the same test in Chromium, Firefox, and WebKit
Playwright supports Chromium, Firefox, and WebKit. Projects in playwright.config.js define the browser configurations against which the same tests run; the generated config commonly includes browser projects. Select one project from the command line:
Rank #4
npx playwright test --project=chromium
npx playwright test --project=firefox
npx playwright test --project=webkitUse a headed run when you want to watch the browser while learning or diagnosing a flow:
npx playwright test --headedNormal test runs are headless, which is generally the right mode for automation. Playwright can also target branded Chrome and Edge channels and emulate tablet or mobile devices through project configuration. Those configurations are useful when the application specifically needs coverage beyond the three bundled browser engines.
Debug failures locally and in CI
Use UI Mode during development
Start npx playwright test --ui, filter to the failing test, inspect its steps, and rerun it. Use the timeline to locate the first unexpected result rather than changing waits at random.
Use a trace for CI failures
Trace Viewer exposes an action timeline, DOM snapshots, and console and network information. Configure traces on the first retry of a failed test so failures in CI have diagnostic evidence without collecting a trace for every successful run. The official best-practices guide recommends traces instead of relying only on video or screenshots.
In a trace, work through the failure in this order:
- Read the failed assertion and identify the condition that did not become true.
- Inspect the action timeline to find the last step that behaved as expected.
- Review the locator and DOM snapshot to check whether the target is absent, ambiguous, hidden, or named differently than expected.
- Check console and network details for application errors or failed requests.
- Fix the locator, synchronization condition, or test data that the evidence points to; do not add an arbitrary sleep as a substitute.
Run Playwright in continuous integration
The project generator can add a GitHub Actions workflow. Use that generated workflow as the starting point rather than copying a static template: CI files and recommended setup can change. A CI job needs to install the project dependencies, install the matching Playwright browsers and any required system dependencies, and run the suite headlessly. Preserve the HTML report and trace artifacts when a run fails so you can inspect them after the job ends.
When updating a project, keep the Playwright package and browser binaries in sync. If local runs pass but CI reports a missing browser executable or a missing shared library, check the browser-install step and Linux dependencies before changing the test itself. The introductory guide documents the generated workflow and common commands at Playwright’s introduction.
Troubleshooting common Playwright problems
- Browser executable does not exist: the package may have changed without installing its matching browser. Run
npx playwright installin the project environment. - Browser fails to launch on Linux: required OS libraries may be absent. Install dependencies with
npx playwright install-deps, or usenpx playwright install --with-deps chromiumwhere appropriate. - Test times out waiting for an element: confirm the page reached the expected state, inspect the locator and accessible name, and check the trace or UI timeline. Replace brittle selectors or premature assumptions instead of adding a fixed delay.
- Test passes alone but fails in the suite: remove dependence on test order or shared state. Each test normally gets a fresh context, but external accounts, shared files, or application-side data can still be shared and need deliberate isolation.
- Generated test is unreliable: Codegen may capture incidental actions or a selector tied to transient markup. Refine the locator and add an assertion representing the expected behavior.
- CI failure is hard to reproduce: retain report and trace artifacts, then inspect the failing action, DOM snapshot, console, and network evidence before modifying timing.
Or skip the browser setup
If you need screenshots rather than interactive end-to-end tests, ScreenshotNeo is a screenshot API and MCP server for developers. One GET request can return a PNG, JPEG, WebP, or PDF. It accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; those steps can each be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response identifies the page verdict and billing status in headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for AI agents and MCP clients.
For example, using cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options and output formats. One thousand screenshots per month are free with no card; paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, with no card.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Frequently Asked Questions
Can I use Playwright with JavaScript without TypeScript?
Yes. Choose JavaScript in the project generator; the tests can use regular JavaScript with the Playwright Test runner.
Can Playwright run tests in Safari?
Playwright runs its WebKit browser project, which provides WebKit coverage; it is not a test run inside the Safari application itself.
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.
