# Playwright

Look at Kiln's UI in a real browser, and run its end-to-end tests.

- Repository: https://github.com/Kiln-AI/Kiln (5247 stars)
- Category: Design
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Kiln-AI/Kiln --skill playwright -g -a claude-code -y`
Codex: `npx skills add Kiln-AI/Kiln --skill playwright -g -a codex -y`
Cursor: `npx skills add Kiln-AI/Kiln --skill playwright -g -a cursor -y`
Gemini CLI: `npx skills add Kiln-AI/Kiln --skill playwright -g -a gemini-cli -y`

## Description

Look at Kiln's UI in a real browser, and run its end-to-end tests. Use when checking UI you are changing, taking a screenshot of the app, driving the app with playwright-cli, starting the dev sandbox with playwright_server.sh, running or debugging `npm run tests:e2e`, or working with the seeded fixture project that gives the app's screens data to render.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Using Playwright with Kiln

Two separate things share one browser install:

- **`playwright-cli`**, a browser you drive from the shell, for looking at the UI
  you are changing and taking screenshots of it. This is what you want when
  building UI.
- **`npm run tests:e2e`**, the end-to-end suite, in `app/web_ui/tests/e2e`.

If neither works, the install is probably missing: `bash .config/utils/setup_env.sh
--add-playwright` adds the browser and `playwright-cli` (~800 MB together). See that
script's `--help` for what a cloud environment needs.

## Looking at the UI

Start a server, open the app, and land on a page with data in it:

```bash
.agents/scripts/playwright_server.sh start     # prints http://localhost:6544
```

`start` prints the next three commands with the seeded ids already filled in. Run
all three, in that order, the app redirects to a task picker without the
`localStorage` state, whatever URL you ask for:

```bash
playwright-cli open http://localhost:6544
playwright-cli localstorage-set ui_state \
  '{"current_project_id":"<id>","current_task_id":"<id>","selected_model":null}'
playwright-cli goto http://localhost:6544
```

Then `goto` any deep link you like. Run `.agents/scripts/playwright_server.sh status`
if you are not sure the server is running.

When you are done, close the browser and stop the server:

```bash
playwright-cli close
.agents/scripts/playwright_server.sh stop
```

The sandbox keeps its data in `app/web_ui/.agent_dev_home` and is seeded from a
committed fixture project, so the screens have content instead of an onboarding
wizard. It never touches real Kiln projects.

## A provider may be connected, spend it carefully

If `OPENROUTER_QA_KEY` is set in the environment, seeding writes it into the
sandbox's settings and the app comes up with OpenRouter connected, so live model
calls work. `start` reports it when it is there, assume nothing is connected
until it says so.

The rest: https://github.com/Kiln-AI/Kiln/blob/HEAD/.agents/skills/playwright/SKILL.md