# How to setup Playwright end to end tests?

<details>

<summary>Step 1: Install</summary>

From frontend folder:

```
cd frontend
npm install -D @playwright/test
npx playwright install
```

#### What this actually does

**1️⃣ npm install -D @playwright/test**

* Installs Playwright’s test runner
* Adds it to devDependencies
* Gives you:
  * test(), expect()
  * Playwright config
  * CLI commands (npx playwright test)

This is the testing framework.

**2️⃣ npx playwright install**

* Downloads browser binaries:
  * Chromium
  * Firefox
  * WebKit
* These are not npm packages, they are large external binaries

This step is required for tests to run.

</details>

<details>

<summary>Step 2: Create playwright.config.ts  </summary>

*If this file was not created automatically, add it manually:*

In frontend/ create a file:

{% code title="playwright.config.ts" overflow="wrap" %}

```javascript
import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  use: {
    baseURL: 'http://localhost:5173',
    headless: true,
  },
});
```

{% endcode %}

`playwright.config.ts` tells Playwright:

* where tests live (tests/)
* which browser(s) to use
* what base URL to open (later we’ll set this)

</details>

<details>

<summary>Step 3: Create tests folder + test file</summary>

```
mkdir frontend/tests
touch frontend/tests/myapp.spec.ts
```

</details>

<details>

<summary>Step 4: First test (very small)</summary>

{% code title="myapp.spec.ts" overflow="wrap" %}

```javascript
import { test, expect } from '@playwright/test';

test('My app loads', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByText('My App Name')).toBeVisible();
});
```

{% endcode %}

</details>

<details>

<summary>Optional: Step 5: Edit a test command</summary>

{% code title="package.json" overflow="wrap" %}

```javascript
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test": "playwright test" // add this
  }
}
```

{% endcode %}

Then you can run:

```
npm test
```

</details>

<details>

<summary>Step 6: Run it</summary>

You need two terminals:

#### Terminal 1 (app running)

```
npm run dev
```

#### Terminal 2 (tests)

```
npx playwright test
```

</details>

### Minimal setup

```
frontend/
  ├─ tests/
  │   └─ myapp.spec.ts   ← your test file
  ├─ playwright.config.ts
  ├─ package.json
  └─ src/
```

### How to verify Playwright is installed correctly

```
npx playwright test --version
```

If you see a version → @playwright/test\@1.xx.x → installed