How to install Playwright

Prerequisites

To get started with Playwright, you should have:

Getting Started with Playwright

Let’s begin by installing Playwright, then let’s explore the tool and validate that we can run the example tests that come when installing Playwright.

Install Playwright

Start by opening the terminal and creating a new directory for your project. You can also install Playwright in an existing project, but for this exercise, let’s create a new one and call it learn-playwright.

				
					mkdir learn-playwright

				
					// Navigate into the new directory:

cd learn-playwright

				
					// In this new empty directory, install Playwright and explore what got installed.

npm init playwright@latest

When prompted, choose / confirm:

TypeScript or JavaScript (default: TypeScript)
Tests folder name (default: tests, or e2e if tests already exists)
Add a GitHub Actions workflow (recommended for CI)
Install Playwright browsers (default: yes)

You can re-run the command later; it does not overwrite existing tests.

Output:

The output tells us that a new npm project was created with a package.json file, and that Playwright Test was installed. It also tells us the files that were created:

playwright.config.ts: The Playwright Test Configuration file.
.github/workflows/playwright.yml: GitHub Action for automating tests
tests/: Top-level folder that Playwright searches recursively for tests with an example test script.
tests-examples/: Staging folder with a demo todo app test script to try out.

package.json: The npm project file.

Validate Playwright test runner

To execute tests in Playwright, utilize the npx playwright test command. This command will run all tests located in the tests/ folder, which is the folder name specified in step 2 during the installation process.

				
					npx playwright test

Upon executing the command, the subsequent output is displayed:

The results indicate that six tests were executed utilizing five workers. By default, Playwright conducts tests concurrently by employing workers. The quantity of CPU cores present dictates the number of workers. Playwright utilizes half of the accessible CPU cores.

Let us access the HTML report to examine further details regarding the test execution.