Beginner Chapter 2 · 10 min read

Installation & Setup

Install Playwright for JavaScript, Python, or Java, configure your project, and understand the generated file structure.

Prerequisites

Before installing Playwright you need Node.js 18+ (for JavaScript/TypeScript), Python 3.8+ (for Python), or JDK 11+ with Maven or Gradle (for Java). Playwright downloads its own browser binaries, so you do not need Chrome or Firefox pre-installed. Make sure you have at least 1 GB of free disk space for the browser binaries.

Tip: Run node -v, python --version, or java -version to confirm your runtime is ready before proceeding.

Installing Playwright

Each language ecosystem has its own standard package manager. For JavaScript the npm init playwright@latest command scaffolds a complete project with a sample test, a configuration file, and a GitHub Actions workflow. For Python you install via pip and then download the browsers separately. For Java you add the dependency to your pom.xml and browsers are downloaded on first run.

Project Structure

After initialisation you will find a predictable layout: tests live in a tests/ (or src/test/) directory, fixtures and helpers go in a utils/ or fixtures/ folder, and screenshots/traces are written to a test-results/ directory. Understanding this structure from the start makes it much easier to organise a large test suite.

File / Folder	Purpose
playwright.config.ts	Central config — browsers, base URL, timeouts
tests/	Test files (*.spec.ts)
tests/fixtures/	Custom fixtures and helpers
test-results/	Artifacts: screenshots, videos, traces
.github/workflows/	CI pipeline (auto-generated)

install-commands.sh

# 1. Scaffold a new Playwright project (interactive)
npm init playwright@latest

# 2. Or add to an existing project
npm install --save-dev @playwright/test

# 3. Download browser binaries
npx playwright install

# 4. Run all tests
npx playwright test

# 5. Run tests in headed mode (see the browser)
npx playwright test --headed

# 6. Run a single test file
npx playwright test tests/login.spec.ts

playwright.config.ts

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox',  use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit',   use: { ...devices['Desktop Safari'] } },
  ],
});

pom.xml

<!-- Add to pom.xml dependencies -->
<dependency>
  <groupId>com.microsoft.playwright</groupId>
  <artifactId>playwright</artifactId>
  <version>1.44.0</version>
</dependency>

<!-- Install browsers via Maven plugin -->
<plugin>
  <groupId>com.microsoft.playwright</groupId>
  <artifactId>playwright-maven-plugin</artifactId>
  <version>1.44.0</version>
  <executions>
    <execution>
      <goals><goal>install</goal></goals>
    </execution>
  </executions>
</plugin>

<!-- Run: mvn test -->

install-commands.sh

# 1. Install the Playwright Python package
pip install playwright

# 2. Download browser binaries
playwright install

# 3. Install pytest plugin for test discovery
pip install pytest-playwright

# 4. Run all tests
pytest

# 5. Run headed (see the browser)
pytest --headed

# 6. Run tests on a specific browser
pytest --browser firefox

conftest.py

# conftest.py — global pytest configuration
import pytest

@pytest.fixture(scope="session")
def browser_context_args(browser_context_args):
    return {
        **browser_context_args,
        "base_url": "http://localhost:3000",
        "viewport": {"width": 1280, "height": 720},
        "record_video_dir": "test-results/videos",
    }

Playwright Beginner Installation & Setup

PreviousIntroduction to Playwright Next Writing Your First Test

Written by PV