Playwright can launch browsers from a single install.
Let’s get Playwright installed and running a quick test across Chrome, Firefox, and WebKit (Safari’s engine).
First, you need Node.js. If you don’t have it, grab it from nodejs.org. Once Node.js is installed, open your terminal or command prompt and create a new directory for your project. Navigate into that directory:
mkdir playwright-test-project
cd playwright-test-project
Now, initialize a Node.js project. This creates a package.json file to manage your dependencies:
npm init -y
Next, install Playwright. This command fetches the Playwright library and downloads the browser binaries for Chromium, Firefox, and WebKit:
npm install @playwright/test
This single command is the magic. It installs the Playwright Node.js library and also downloads the specific, stable versions of Chromium, Firefox, and WebKit that Playwright is designed to work with. These aren’t just any browser versions; they are curated and tested by the Playwright team to ensure consistent behavior across different environments.
Now, let’s create a simple test file. Create a file named example.spec.js in your project directory and paste the following code:
// example.spec.js
const { test, expect } = require('@playwright/test');
test('should navigate to example.com and check title', async ({ page }) => {
await page.goto('https://example.com/');
await expect(page).toHaveTitle('Example Domain');
});
This test is straightforward: it navigates to https://example.com/ and asserts that the page’s title is exactly "Example Domain".
To run this test against all installed browsers, use the Playwright Test runner:
npx playwright test
When you run this command, Playwright Test will automatically detect the installed browsers and execute your example.spec.js test against each of them. You’ll see output indicating the test is running in Chromium, then Firefox, then WebKit.
Here’s what’s happening under the hood: Playwright Test is configured by default to run tests in parallel across all available browsers. The npx playwright test command invokes the Playwright Test runner, which reads your test files. For each test file, it iterates through the configured browsers (which, by default, include the ones Playwright installed: chromium, firefox, webkit) and launches a new browser instance for each. It then executes the test steps within that browser context, communicating with the browser via the DevTools Protocol or similar browser-specific APIs. The page object provided in the test function is an abstraction over these browser interactions, allowing you to control the browser, navigate pages, interact with elements, and make assertions.
The expect(page).toHaveTitle('Example Domain'); line uses Playwright’s built-in assertion library. This library is designed to work seamlessly with Playwright’s asynchronous operations, automatically retrying assertions if they fail initially, which is crucial for handling dynamic web content.
One of the most powerful aspects is how Playwright manages browser versions. When you run npm install @playwright/test, it downloads specific, stable versions of Chromium, Firefox, and WebKit. This means your tests will run against the exact same browser binaries every time, regardless of what might be installed on your system or updated by the browser vendors. This reproducibility is a massive advantage for debugging flaky tests. If a test passes in one browser but fails in another, it’s not because of different browser versions but likely due to browser-specific rendering or JavaScript engine differences that Playwright is designed to expose.
If you want to target a specific browser, you can use the --browser flag:
npx playwright test --browser chromium
npx playwright test --browser firefox
npx playwright test --browser webkit
This is incredibly useful when you’re debugging an issue that only appears in a particular browser. You can narrow down your focus without running the full suite.
After running tests, Playwright generates a report. You can view the detailed results, including screenshots and trace logs, by running:
npx playwright show-report
This opens an HTML report in your browser, letting you visually inspect each test run, see where it passed or failed, and even replay the test execution step-by-step using the trace viewer. This trace viewer is invaluable for understanding the exact sequence of events that led to a failure.
The next step is learning how to interact with page elements beyond just checking the title.