# Setting Up Both Tools — Playwright & Cypress

Source: https://www.skillbyai.com/en/e2e-testing/f-setup

> Scaffolding a project for each.

## 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).

```bash
# 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.

```typescript
// 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.

**Quiz:** What does setting baseURL (Playwright) or baseUrl (Cypress) allow?

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

*Answer:* Visiting relative paths such as "/" or "/login" in tests. One place to point the whole suite at an environment.