# Set up Playwright

Source: https://career-ops.org/docs/introduction/guides/set-up-playwright (canonical HTML, identical content)

> Install and configure Playwright for browser automation.



This guide walks through three setup steps that give career-ops its browser automation capabilities:

**Install the Playwright package**
Install the Playwright Node package

**Download Chromium**
Download the Chromium browser Playwright controls

**Configure the Playwright MCP**
Configure the Playwright MCP so Claude can operate the browser during the apply step

> **Before you start**
Complete the [Quick Start](https://career-ops.org/docs.md) guide. Node.js 18 or later (22.5+ recommended) must be installed and you must be inside the career-ops root folder.

***

## Install the Playwright package [#install-the-playwright-package]

Run `npm install` from the career-ops root folder:

```bash title="Terminal"
npm install
```

This installs Playwright and all other project dependencies declared in `package.json`. Skip this step if you already ran it during initial setup.

## Download Chromium [#download-chromium]

Playwright needs its own copy of Chromium to automate. The installer normally downloads it automatically right after dependencies; if `npm run doctor` reports it missing, download it by running:

```bash title="Terminal"
npx playwright install chromium
```

This is a one-time step. You do not need to repeat it after `npm` updates.

## Configure the Playwright MCP [#configure-the-playwright-mcp]

The Playwright MCP lets Claude control the browser directly during the `/career-ops apply` step — navigating to job application forms, reading field labels, and suggesting answers.

### Register the MCP server [#register-the-mcp-server]

Run this command from anywhere to register the Playwright MCP with Claude Code:

```bash title="Terminal"
claude mcp add playwright npx @playwright/mcp@latest
```

This is the one-step registration method from the [Playwright MCP docs](https://playwright.dev/docs/getting-started-mcp). It writes the server entry to your Claude settings automatically.

### Manual configuration (alternative) [#manual-configuration-alternative]

If you prefer to configure it by hand, add the following entry to `.claude/settings.local.json` in the career-ops root, or your global Claude settings:

```json title=".claude/settings.local.json"
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["y", "@playwright/mcp@latest"]
    }
  }
}
```

Restart Claude Code after saving the file. career-ops will then have access to `browser_navigate` and `browser_snapshot` during apply sessions.

***

## Verify the setup [#verify-the-setup]

Run the doctor script to confirm all three components are in place:

```bash title="Terminal"
npm run doctor
```

Look for confirmation that Playwright, Chromium, and the MCP server are all ready. If the check passes, setup is complete.

***

## Watch the browser fill out the form [#watch-the-browser-fill-out-the-form]

By default, Playwright runs in headless mode — it reads and fills the form in the background without opening a visible window.

To watch the browser open and fill out the form live, add an instruction to the apply command:

**Claude Code**
```bash
/career-ops apply {company_name} open up with playwright the browser and fill out the entire form
```

**Codex**
```bash
Run the /career-ops apply command with the {company_name} argument. Then, use the Playwright MCP to open a browser window and fill out the entire form live.
```

**OpenCode**
```bash
Run the /career-ops apply command with the {company_name} argument. Then, use the Playwright MCP to open a browser window and fill out the entire form live.
```

**Qwen CLI**
```bash
Run the /career-ops apply command with the {company_name} argument. Then, use the Playwright MCP to open a browser window and fill out the entire form live.
```

Without that instruction, career-ops still uses Playwright and the MCP — it just operates silently in the background.

## What each component enables [#what-each-component-enables]

| Component          | Purpose                                                                                                                                  |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
| Playwright package | Core library that drives browser automation                                                                                              |
| Chromium           | Renders pages, generates print-quality PDFs via `/career-ops pdf`, checks whether job postings are still live, and powers full ATS scans |
| Playwright MCP     | Allows career-ops to navigate forms and suggest field answers during `/career-ops apply`                                                 |