Setting Up Both Tools

Installers and config files

For Playwright, npm init playwright@latest asks a few questions and creates playwright.config.ts, an example test folder and optionally a GitHub Actions workflow, then downloads browser binaries (you can also run npx playwright install later). For Cypress, install it as a dev dependency and run npx cypress open; the Launchpad offers to scaffold cypress.config.ts, a cypress/ folder with e2e, fixtures and support, and lets you choose E2E or component testing. In both tools set a baseURL so tests can visit relative paths, and keep the app running (or let the tool start it) before tests run.

Install and first run

Commands for each tool (flags can change; check the docs for your version).

# Playwright
npm init playwright@latest          # scaffold config, example tests, browsers
npx playwright test                 # run all tests headless
npx playwright test --ui            # interactive UI mode
npx playwright show-report          # open the HTML report

# Cypress
npm install --save-dev cypress
npx cypress open                    # Launchpad: scaffold and run interactively
npx cypress run                     # run headless, e.g. in CI

Minimal configuration files

baseURL and a dev server for Playwright; baseUrl for Cypress.

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

export default defineConfig({
  testDir: './tests',
  use: { baseURL: 'http://localhost:3000' },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
  ],
  webServer: { command: 'npm run start', url: 'http://localhost:3000', reuseExistingServer: !process.env.CI },
});

// cypress.config.ts
import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: { baseUrl: 'http://localhost:3000' },
});

Let the runner start the app

Playwright's webServer option starts your dev server and waits for the URL before tests run. For Cypress, a helper such as the start-server-and-test package does the same job in npm scripts.

Quick check: What does setting baseURL (Playwright) or baseUrl (Cypress) allow?

• Automatically generating tests
• Running tests without a browser
• Skipping the need for a running app
• Visiting relative paths such as "/" or "/login" in tests