How do you set up a Playwright project?

A clean setup has four parts: the package, the browser binaries, the config file and a tests directory. The config is the source of truth for how tests run locally and in CI, so keep environment-dependent settings such as retries and workers conditional.

npm i -D @playwright/test
npx playwright install
npx playwright test

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

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

Settings worth deciding early

• How the app is started, through webServer or an external orchestration step
• Whether tests run fully in parallel or only file by file
• Retries and workers for CI versus local development
• Trace, screenshot and video policy for debugging artifacts
• Browser and device projects, including a mobile viewport if relevant
• A reporter that matches how the team reads failures, such as HTML, JUnit or GitHub

Use npx playwright test --ui locally for a watch-style interface, and keep auth state, test results and reports out of version control. Generated config from npm init playwright@latest is a useful starting point, but it should be reviewed rather than accepted blindly.