Installing Playwright and dependencies

Before anything else, you must ensure your system is prepared to run Playwright. Playwright is built on top of Node.js, so verifying that Node and npm (or yarn) are available is the first step.

Installing Node.js

Most modern development systems already have Node installed, but if not, download it from nodejs.org. We recommend using the Long-Term Support (LTS) version. You can verify your installation with the following:

node -v
npm -v

These commands should return version numbers that confirm Node.js and npm are installed. If you’re managing multiple Node versions, consider using nvm or a similar version manager.

Initializing your project

Create a new project directory and initialize it as an npm project:

mkdir playwright-quick-setup
cd playwright-quick-setup
npm init -y

This command creates a package.json file, which is needed to manage your project’s dependencies.

Installing Playwright

As we discussed earlier in this chapter, there are two main ways to install Playwright: Playwright Library and Playwright Test.

To install the Playwright Library, you can use the following command:

npm install playwright

This installs the core Playwright library, which gives you the browser automation API. It’s suitable if you want to use Playwright’s automation capabilities programmatically or integrate it with other testing frameworks.

If you prefer an integrated testing solution, install the following:

npm install --save-dev @playwright/test

This installs the Playwright Test package, which includes a built-in test runner, assertions, and features like parallel execution.

Use this approach when you’re adding Playwright Test to an existing project that already has a testing setup or if you prefer to configure Playwright manually. You will also need to set up the playwright.config.ts file and organize the test structure on your own.

If you want a guided setup with configuration and examples, or want to save time by letting Playwright scaffold the project for you, use the following:

npm init playwright@latest

This command initializes a new Playwright project with the Playwright Test framework. It sets up a complete testing environment, including the following:

• Installing @playwright/test as a dev dependency
• Creating a sample configuration file (playwright.config.ts)
• Generating example test files (such as tests/example.spec.ts)
• Optionally installing browser binaries (if you choose to do so during the setup prompts)

So, if you need to build tests using the bundled test runner, go with Playwright Test; otherwise, if you’re integrating into a different test framework, the core API is often enough. Now that your environment is set up, we can move on to building and running your first Playwright test.