Recommended Free Tools
Playwright Test lets you automate real browser journeys—open a page, interact with it, and check that the expected result appears—in Chromium, Firefox, or WebKit. Start with npm init playwright@latest, add a test built around user-facing locators and assertions, then run it locally and in CI with the matching browser binaries installed.
What Playwright Test does
Playwright Test is an end-to-end testing framework with a test runner, assertions, test isolation, parallel execution, and debugging tools. It supports Chromium, Firefox, and WebKit on Windows, Linux, and macOS, and can run locally or in CI in headed or headless mode. Projects let you run tests with different browser, device, or environment configurations. See the Playwright introduction and browser documentation.
Use it to verify a user-visible flow rather than merely checking that a server responds: for example, navigate to a page, submit a form, and assert that a confirmation is visible. It is not necessary to start with every browser and device configuration; choose coverage according to the site’s audience and the risks your tests need to catch.
Install Playwright and its browsers
-
From the project directory, run the initializer:
npm init playwright@latestIt can create a new project or add Playwright to an existing npm project. Follow the prompts to choose JavaScript or TypeScript, the test directory, whether to add a GitHub Actions workflow, and whether to install browser binaries. The scaffold includes
playwright.config.tsand an example test.Windows 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 reinstallCrashes, 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 minuteSpecial offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
If you did not install browsers during setup, or need to refresh them, run:
npx playwright installOn CI or a system that also needs operating-system packages, use:
npx playwright install --with-deps -
After upgrading the Playwright package, rerun browser installation. Each Playwright version expects corresponding browser binaries. Browser versions and system requirements change, so check the documentation for the version installed in your project.
Official setup details are in the installation guide and browser documentation.
Write a first website test
Put a test like this in the test directory created by the initializer (the default scaffold includes an example test file):
import { test, expect } from '@playwright/test';
test('opens the installation page', async ({ page }) => {
await page.goto('https://playwright.dev/');
await page.getByRole('link', { name: 'Get started' }).click();
await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});The test navigates to a page, finds a link by its accessible role and name, clicks it, and checks for the resulting heading. The example targets Playwright’s own site; replace the URL and expected elements with the journey your site should support.
Assertions such as toHaveTitle, toHaveURL, and toBeVisible express expected page state. Playwright’s async assertions retry while waiting for the condition to become true. Browser actions also wait for actionability checks before they run, so a fixed sleep is usually unnecessary and can make a test less reliable. The Writing tests guide explains the test pattern and waits.
Choose locators that survive interface changes
A locator identifies the element a test will inspect or operate on. Prefer selectors tied to how people perceive and use the page, rather than brittle implementation details.
| Locator | Useful for |
|---|---|
page.getByRole() |
Buttons, links, headings, and other accessible roles. |
page.getByLabel() |
Labeled form controls. |
page.getByText() |
Visible text. |
page.getByPlaceholder() |
Fields identified by placeholder text. |
page.getByTestId() |
Elements covered by a test-ID contract your team deliberately maintains. |
Use UI mode’s locator picker or the Playwright Inspector to explore candidates, then keep a locator whose meaning is clear and stable. See the locator guide and test-running documentation.
Configure browser and device coverage
A Playwright project is a logical group of tests sharing configuration. Projects can run the same tests against different browsers or devices, or separate tests by environment, timeout, retries, or selection. Playwright documents Chromium, Firefox, WebKit, branded Chrome and Edge channels, and emulated mobile and tablet devices. Available options are version-sensitive; consult the project documentation and browser documentation for your installed version.
A practical way to build coverage is to begin with one browser for faster feedback, then add other browser engines and mobile emulation where your product’s supported audience or risk warrants them. More configurations can expose compatibility issues, but they also add work and may increase CI resource use. There is no single setup that every site needs.
Run tests and inspect results locally
Run the configured suite from the project directory:
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesnpx playwright testTests run headless by default. Use --headed to show the browser, or select a configured project with --project, for example:
npx playwright test --project=chromium --headedFor an interactive view of tests and their steps, run:
npx playwright test --uiOpen the HTML report with:
npx playwright show-reportUI mode and the Inspector can help examine page state and investigate locator choices. See Running and debugging tests.
Run Playwright in CI
A CI job needs the application’s dependencies, the browser binaries and operating-system dependencies Playwright requires, and the test command. The documented sequence is:
-
Install your application dependencies.
-
Install Playwright browsers and required system packages, for example with
npx playwright install --with-deps. -
Run
npx playwright test. -
Preserve the HTML report as a CI artifact so failures can be examined after the job ends.
Playwright’s CI guide recommends one worker as a stability-oriented default. Sharding across jobs is another way to distribute a suite, while additional parallel workers can reduce elapsed time on suitable self-hosted systems. More workers also use more resources, and the right balance depends on the pipeline and tests. The CI documentation includes a GitHub Actions example.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Capture traces to diagnose failures
Tracing records test activity for later inspection. To capture a trace on the first retry after a failure, configure retries and tracing in playwright.config.ts:
import { defineConfig } from '@playwright/test';
export default defineConfig({
retries: 1,
use: { trace: 'on-first-retry' },
});Open a saved trace with:
npx playwright show-trace path/to/trace.zipYou can also access traces from the HTML report. The Trace Viewer provides a GUI for exploring recorded steps and page activity, which is particularly useful when a CI failure cannot be reproduced locally. See Trace Viewer and the CI guide.
Troubleshoot common Playwright problems
-
Browser executable or launch errors: the browser binaries may be missing or do not match the installed Playwright version. Run
npx playwright installafter installation or an upgrade; on CI systems missing OS packages, usenpx playwright install --with-deps. -
A locator times out or finds nothing: verify the page reached the expected state and the locator matches the current accessible role, label, text, or placeholder. Use UI mode or the Inspector to examine candidates; prefer a maintained test ID if the interface does not provide a stable user-facing locator.
-
A test passes locally but fails in CI: inspect the HTML report and, if configured, the trace from the retry. Check that CI installs the application dependencies and matching browsers, and consider whether resource contention makes the current worker count unstable.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
A click or assertion is flaky: replace fixed sleeps with locator-based actions and retrying assertions about the expected state. Review the trace to determine whether the page, locator, or action differed from expectations.
Or skip the browser setup
If you need a screenshot rather than an interactive end-to-end test, ScreenshotNeo can return a website screenshot with one API request. It is not a replacement for Playwright’s browser journeys and assertions.
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. Cookie banners and consent notices, newsletter popups, and chat widgets are removed before capture; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers say which verdict and billing status applied. Its MCP server lets AI agents use screenshot tools. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Every feature is available on every plan.
Sign up for 1,000 free screenshots a month, no card required.
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.
