What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
To use Playwright for testing, install @playwright/test, install the browser binaries for your target browsers, write tests with the built-in page fixture and web-first assertions, then run them with npx playwright test. Configure projects for browser coverage, keep tests and test data independent for parallel runs, and use UI Mode, reports, and traces to investigate failures.
This guide follows the official Playwright documentation reviewed on September 29, 2026. Playwright’s documentation is rolling, so check the linked pages against the version installed in your project—especially when upgrading or setting up component testing.
Install Playwright Test and its browsers
Playwright Test is the first-party test runner recommended in Playwright’s migration guidance. It includes the test and assertion APIs, fixtures, parallel execution, reporters, and trace tooling. Start in the root of your application project:
-
Install the test package and create the starter configuration and example test:
#1 Best Overall
npm init playwright@latestFollow the prompts for the language, test directory, and whether to add a CI workflow. The generated setup is a starting point; inspect its configuration rather than assuming it matches your application or CI environment.
-
Install the browser binaries required by your configuration:
npx playwright installTo install a specific browser, such as Chromium or WebKit, name it in the command:
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.npx playwright install chromium -
If the operating system lacks browser dependencies, install those separately or together with the browser:
npx playwright install-deps chromiumAvailable dependencies and commands can vary by operating system. On CI, install only the browsers your suite actually uses to reduce browser-download time and disk use.
Browser binaries are tied to the Playwright version. After updating Playwright, run the browser installation command again so the installed binaries match the package. See the official browser installation guide.
Write a first browser test
Import test and expect from @playwright/test. The runner provides a built-in page fixture when a test requests it; it gives the test an isolated page in a browser context.
import { test, expect } from '@playwright/test';
test('home page has the expected title', async ({ page }) => {
await page.goto('http://127.0.0.1:3000');
await expect(page).toHaveTitle(/Home/);
});Replace the URL and expected title with your application’s address and behavior. If your app is not already running, configure Playwright’s webServer option in playwright.config.ts to start it before tests and wait for it to become available. The official fixture guidance explains how the runner supplies fixtures such as page: Playwright fixtures.
Prefer locators and web-first assertions
For interactions, locate elements by a user-facing role and name when possible, then use Playwright’s auto-waiting locator actions and web-first assertions:
test('user can submit a search', async ({ page }) => {
await page.goto('http://127.0.0.1:3000');
await page.getByRole('searchbox', { name: 'Search' }).fill('Playwright');
await page.getByRole('button', { name: 'Search' }).click();
await expect(page.getByRole('heading', { name: /results/i })).toBeVisible();
});Web-first assertions wait for the expected condition rather than checking once immediately. That makes them better suited to interfaces that render asynchronously than a one-time DOM check. Avoid fixed sleeps as a substitute for waiting for a meaningful condition; they can make tests slow when the page is ready early and flaky when it is not ready before the delay ends. The recommended locator and assertion approach is reflected in the migration guidance.
Run tests from the command line
From the project root, run the configured suite with:
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →npx playwright testBy default, this runs headlessly and uses the configured projects. Use narrower commands while developing or diagnosing a failure:
-
Run one test file:
npx playwright test tests/home.spec.ts -
Run tests matching a title pattern:
npx playwright test -g "home page" -
Run one configured browser project:
npx playwright test --project=chromiumPC 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 & 11Outdated 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 matchSpecial offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
Open the browser window while tests run:
npx playwright test --headed -
Open interactive UI Mode:
npx playwright test --ui
Use a file or title filter to make a failing case easier to inspect; use a project filter to find out whether it is limited to one browser configuration.
Choose browser and device coverage with projects
Projects let one suite run with different browser engines, branded browsers, or emulated device profiles. The default configuration can cover Chromium, Firefox, and WebKit. Branded Chrome or Edge and device emulation are also supported configuration choices; availability depends on the installed browser and the project configuration. Each additional project adds installation and test-running work, so select coverage based on the browsers and device conditions your application needs to support.
A typical configuration can define browser projects in playwright.config.ts:
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsimport { defineConfig, devices } from '@playwright/test';
export default defineConfig({
testDir: './tests',
use: {
baseURL: 'http://127.0.0.1:3000',
},
projects: [
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
{ name: 'firefox', use: { ...devices['Desktop Firefox'] } },
{ name: 'webkit', use: { ...devices['Desktop Safari'] } },
],
});Then use npx playwright test --project=webkit to run only that project. Device presets configure a bundle of device-like settings; they are emulation, not proof that the test ran on a particular physical phone. See the browser documentation and emulation guide for supported setup details.
Keep parallel tests independent
Playwright runs test files in parallel by default. Tests within one file run in declaration order unless you configure parallel execution within that file. Workers are separate processes with separate browser instances; parallel tests cannot rely on sharing process globals or on another test’s side effects.
-
Give each test or worker distinct records, accounts, or other mutable test data.
-
Make a test establish the state it needs instead of depending on a test that ran earlier.
Free tools Windows power users keep installed
One-click scans. No signup required.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
Set worker limits to fit the available machine capacity and the limits of your test environment.
-
Enable within-file parallelism only when the tests in that file are independent too.
More workers can shorten a run, but they also increase resource use and the chance of collisions in shared test data. Tune worker counts for the machine and the isolation guarantees of your application’s test environment. See Playwright’s parallelism guidance.
Debug failures with UI Mode, reports, and traces
Use UI Mode while developing
Run npx playwright test --ui to interactively browse tests and their steps, use watch mode, and inspect locators with the locator picker. It is useful when you need to understand what the test did without repeatedly editing command-line filters. For a simpler visual check of a run, use --headed to open the browser window.
Recommended Free Tools
Open the HTML report
After a run, open the HTML report with:
npx playwright show-reportThe report presents test outcomes and available run details. If no report is available, verify that the run produced the configured report output and that you are opening it from the same project directory.
Capture and inspect traces
Traces record context such as actions and DOM snapshots that help reconstruct what happened in a failed test. In CI, Playwright recommends retaining a trace on the first retry rather than recording every successful test:
export default defineConfig({
use: {
trace: 'on-first-retry',
},
});Add this setting to your existing Playwright configuration rather than replacing other options in it. Open a saved trace in Trace Viewer to inspect the recorded actions and snapshots. The available settings include recording on retries, on failure, or always; broader recording can provide more evidence but can increase run overhead and artifact volume.
Prefer Playwright Test’s trace configuration for test debugging. The lower-level browserContext.tracing API does not record test assertions, whereas the test-runner configuration captures a more complete test trace. See the Trace Viewer guide and tracing API reference.
End-to-end tests or component tests?
End-to-end tests exercise an application flow through a browser, such as navigating to a page, filling a form, and checking the result. Playwright’s documented component-testing approach uses a small story gallery served by the developer’s server; the built-in mount() fixture mounts a component in a real browser so layout and interactions can be exercised.
Component testing is version-sensitive: the official component-testing page notes that experimental React and Vue packages have been removed and includes migration advice for existing users. Before adopting or migrating component tests, check the current component testing guide and its linked migration guidance for your installed Playwright version. Do not assume an older experimental package setup remains supported.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshooting common Playwright test problems
| Symptom | Likely cause | What to do |
|---|---|---|
| Browser executable is missing or Playwright asks to install browsers | The browser binaries are not installed, or the package version changed. | Run npx playwright install, or install only the browser needed by the failing project. Reinstall after package updates so binaries match the Playwright version. |
| Browser launch fails because of missing system libraries | The machine does not have required browser dependencies. | Use the browser guide’s operating-system instructions; where supported, run npx playwright install-deps chromium for the browser in use. |
| A locator times out or an assertion fails intermittently | The target may not be rendered yet, the locator may not identify the intended element, or the page state is inconsistent. | Inspect the locator and page in UI Mode or a trace. Prefer a specific user-facing locator and a web-first assertion that waits for the intended state instead of a one-time check or arbitrary sleep. |
| The suite passes locally but fails in CI | CI may have different dependencies, browser installation, resource limits, or shared test data collisions under parallel execution. | Install the project’s required browsers and dependencies in CI, limit workers to suit the runner, and isolate mutable test data by test or worker. Retain traces on the first retry to inspect failures. |
| A test fails only in one browser | The issue may be browser-specific, or that project may have different configuration. | Run the failing test with --project=<name>, inspect the trace, and compare the project’s browser and emulation settings before changing the test. |
| A trace does not show the assertion that failed | The lower-level context tracing API records browser activity but does not record Playwright Test assertions. | Configure tracing through Playwright Test, for example with trace: 'on-first-retry', and inspect the resulting test trace in Trace Viewer. |
Performance, reliability, and cost considerations
Playwright itself is installed as project software and downloads browser binaries; the cited documentation does not state a price for either. The practical costs for a test suite are engineering time, browser installation and storage, CI execution resources, and retained artifacts. Running more browser projects improves the range of configurations exercised but increases those costs. Likewise, raising worker counts can improve throughput only when the machine and test data can handle the added concurrency.
For reliable results, prioritize tests that establish their own state, use locators and web-first assertions, and preserve failure evidence selectively. A retry can help gather diagnostic context, but a passing retry does not by itself make an intermittent test reliable; investigate its trace and isolation assumptions.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Or skip the browser setup
If the goal is to capture a website screenshot rather than test application behavior, ScreenshotNeo offers a screenshot API and MCP server for developers. A single GET request returns an image or PDF. It does not replace Playwright for assertions, interactions, or browser-test coverage.
cURL example (see the ScreenshotNeo API documentation):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import 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)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, with response headers indicating the page verdict and billing status. 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 shots.
Sign up for ScreenshotNeo’s free plan with 1,000 screenshots a month and no card.
Frequently Asked Questions
Can Playwright run tests without opening a visible browser window?
Yes. The standard npx playwright test run is headless; use --headed when you need to see the browser.
Does a passing retry mean a flaky test is fixed?
No. A retry can provide evidence about an intermittent failure, but the test’s state setup, data isolation, and trace still need to be examined.
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.
