К основному содержанию
скилл CX Codex

ce-test-browser — скилл для Claude Code: что делает и как установить

Запускает браузерные тесты для страниц, затронутых текущей веткой или pull request. Определяет порт dev-сервера и проверяет интерактивность интерфейса.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add EveryInc/compound-engineering-plugin --skill ce-test-browser -a claude-code
Открыть на GitHub

Что делает ce-test-browser

Скилл сопоставляет изменённые файлы из git diff или конкретного пуллреквеста со списком веб-страниц проекта. Для запуска требуется работающий локальный сервер. Номер порта утилита вычисляет через scripts/resolve-port.sh: сначала проверяет аргумент --port, затем скрипты в package.json, файлы .env или выбирает порт 3000.

Для управления браузером скилл ищет встроенный браузер среды разработки, а при его отсутствии переключается на agent-browser. Использовать отдельный Playwright или Puppeteer запрещено правилами драйвера. В ручном режиме агент спросит, открывать ли окно браузера, а при ошибках предложит сразу исправить код. В режиме конвейера все внешние сценарии вроде входа через OAuth или оплаты помечаются статусом Skip без остановки процесса.

Какие задачи решает

  • проверить затронутые правками страницы в браузере
  • определить порт локального сервера разработки из конфигурации
  • протестировать интерфейс без ручной настройки сторонней автоматизации
  • сформировать отчёт со статусами Pass, Fail и Skip для каждого маршрута

Примеры запросов агенту

  • Проверь в браузере страницы, которые затронуты текущей веткой
  • Запусти браузерные тесты для пуллреквеста 42 с параметром --port 3000
  • Протестируй интерфейс для ветки feature/checkout

Как установить ce-test-browser

1Через Skills CLI (Vercel)

npx skills add EveryInc/compound-engineering-plugin --skill ce-test-browser -a claude-code

2Вручную: положить файлы

~/.claude/skills/ce-test-browser/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/ce-test-browser/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о ce-test-browser

Как установить ce-test-browser в Claude Code?

Выполните команду npx skills add EveryInc/compound-engineering-plugin --skill ce-test-browser -a claude-code. Конфигурация сохранится по пути ~/.claude/skills/ce-test-browser/SKILL.md.

Что делает скилл ce-test-browser?

Он определяет затронутые изменениями страницы, открывает их в браузере и проверяет ключевые элементы. В конце формируется отчёт со статусами Pass, Fail или Skip.

Какие браузерные движки поддерживает скилл?

Инструмент отдаёт приоритет встроенному браузеру среды разработки, а в качестве запасного варианта использует agent-browser. Использование отдельных пакетов Playwright или Puppeteer исключено.

Исходный текст

SKILL.md · MIT
---
name: ce-test-browser
description: Run browser tests for pages affected by the current branch or PR. Use when asked to run or check browser tests for the current change.
argument-hint: "[PR number, branch name, 'current', or --port PORT]"
---

# Browser Test Skill

Run end-to-end browser tests on pages affected by a PR or branch using the best approved browser driver available in the active harness.

**Done:** the run ends by reporting what it found — either the summary, with every affected route marked Pass, Fail, or Skip and each Skip carrying its reason, or, when a preflight blocker stops testing before any route can be exercised, the blocker and what would clear it. Reaching neither, or dropping a route from the summary because nobody could reach it, is the failure this done condition exists to prevent.

## Modes

- **Manual (default):** the user controls the dev server. When the fallback driver is `agent-browser`, ask whether to run headed or headless.
- **Pipeline (`mode:pipeline`):** invoked by LFG or another automated runner. The run is unattended — never block on a question. Read `references/pipeline-orchestration.md` from this skill's directory and follow it; it overrides port selection (step 4, Determine the dev server port), dev-server startup (step 5, Verify the dev server is running), and visibility prompts (step 6, Set visibility), running the same port script with `--free` inside the block that starts the server.

## Browser Driver Policy

Select the driver before the first browser action:

1. **Prefer a host-native integrated browser.** Use a browser-control surface embedded in or directly owned by the active harness when it can navigate local URLs, inspect rendered and interactive state, click/fill/press, capture screenshots, and inspect console errors. A separately configured browser extension or integration is not host-native. Load and follow the selected capability's own instructions before browser work.
2. **Otherwise fall back to `agent-browser`.** Read `references/agent-browser-driver.md` before running any command.
3. **Do not introduce a third browser stack.** Never install or substitute standalone Playwright, Puppeteer, a separately configured browser extension or MCP, or other ad hoc browser automation. A Playwright API exposed inside the selected host-native browser remains host-native; it is not standalone Playwright.

Use one driver for the entire run. A selected host-native driver may fall back to `agent-browser` only if initialization fails before the first route is tested. After testing begins, do not mix driver sessions, element references, screenshots, or authentication state.

## Workflow

Read `references/route-and-report.md` from this skill's directory before step 3 (Map changed files to routes). It carries the route-mapping patterns, the port and server commands, the per-page checks, the two human-facing prompts, and the summary format.

1. **Select the driver** per the policy above and record it. This also requires a git repository with changes to test.
2. **Determine test scope** from the argument: a PR number → `gh pr view [number] --json files -q '.files[].path'`; `current` or empty → `git diff --name-only main...HEAD`; a branch name → `git diff --name-only main...[branch]`.
3. **Map changed files to routes** and build the list of URLs to test.
4. **Determine the dev server port.** `scripts/resolve-port.sh` resolves it and prints the port alone on stdout: an explicit port argument; else a `--port` flag in a `package.json` dev/start script; else `PORT=` in `.env`, `.env.local`, or `.env.development`; else `3000`. Pass an explicit port when the user gave `--port N`, or when your active project instructions already in context state the dev-server port. Do not grep instruction files for one: prose mentions in docs, examples, and troubleshooting are unreliable and false-positive-prone, while config files and `.env` are trustworthy. Each mode runs the script in the shell call that needs the port, so no port value has to survive between shell calls or be transcribed out of prose; the reference gives the command. Manual mode uses that port as-is: the user controls their own server, so do not scan for alternatives.
5. **Verify the dev server is running** before asking the headed/headless question — a manual run with no server stops here, so asking first would waste the question.
6. **Set visibility, then verify the root.** Visibility is independent from unattended execution:
   - **Host-native integrated browser:** keep its normal integrated surface visible and non-blocking so the user can watch progress when useful. Do not repeatedly steal focus as routes change. This applies in both manual and pipeline modes.
   - **`agent-browser` fallback, pipeline mode:** run headless without asking.
   - **`agent-browser` fallback, manual mode:** ask the user whether to run headed or headless using the host's blocking question tool already in the current tool list (match by capability, not by a host-specific name). Presence in the current tool list is proof the tool exists; never call a user-facing question tool to discover whether it exists. If a matching tool is listed but unloaded, use the host's tool-discovery primitive to load that capability — do not search for another host's tool name. Fall back to presenting options on the host's user-visible chat surface only when no such tool is in the list or a real question call errors. Never silently skip the question.

   Then navigate to `http://localhost:<port>`, capture its rendered or interactive state, and confirm the root is served before iterating.
7. **Test each affected page** — navigate, inspect fresh state, exercise the critical interactions, capture evidence.
8. **Human verification** where a flow needs external interaction (OAuth, email, payments, SMS, third-party APIs): pause and ask. **Pipeline mode does not pause** — log each such flow as Skip with the reason and continue.
9. **Handle failures** by capturing the error state and the exact repro, then asking whether to fix now or skip. **Pipeline mode does not ask** — log the failure and continue.
10. **Report the summary** in the format the reference gives.

## Driver Reference

When `agent-browser` is selected as the fallback, read `references/agent-browser-driver.md` from this skill's directory before running its commands. Host-native drivers follow their harness-provided instructions instead.

© EveryInc · MIT · EveryInc/compound-engineering-plugin

Похожие скиллы

Всё по теме «Тесты и QA» →
improve-codebase-architecture Matt Pocock Скилл ищет архитектурные узкие места в кодовой базе и показывает варианты углубления модулей в HTML-отчёте. Подойдёт для ревью перед рефакторингом. 1 163 035установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок tdd Matt Pocock Скилл управляет циклом красный-зелёный в TDD: проверяет, что тесты пишутся до кода, держит их на уровне публичных интерфейсов и не завязывает на внутреннюю структуру. 1 141 062установок skill-creator официальный anthropics Помогает создать новый скилл, доработать существующий и проверить результат через тестовые промпты и оценки. 414 180установок agent-browser vercel-labs Скилл управляет браузером через CLI: открывает страницы, заполняет формы, нажимает кнопки и проверяет веб-приложения. Подходит для задач, где агенту нужно действовать в интерфейсе. CX Codex +1 1 200 000установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок

Из того же набора34

ce-resolve-pr-feedback Скилл разбирает комментарии ревьюеров в пул-реквесте, вносит правки и закрывает обсуждения. Пригодится, когда на PR уже накопились замечания. CX Codex +1 3 200установок ce-worktree Скилл заводит отдельное рабочее дерево git, чтобы правки не трогали основной чекаут. Пригодится, когда нужно поработать в стороне от текущей ветки. CX Codex +1 3 100установок ce-strategy Скилл создаёт или обновляет STRATEGY.md с описанием продукта, его пользователей, метрик и направлений работы. Пригодится при запуске продукта или смене курса. CX Codex +1 3 000установок ce-proof Публикует локальные markdown-файлы в Proof — редактор для совместной работы над спеками, планами и черновиками. CX Codex +1 3 000установок ce-product-pulse Собирает одностраничный отчёт о продукте за заданный интервал: использование, производительность, ошибки. Полезен, когда нужно быстро понять, что происходит в проекте. CX Codex +1 2 900установок ce-test-xcode Собирает и запускает iOS-приложение в симуляторе через XcodeBuildMCP, сохраняя логи и скриншоты проверок перед передачей кода. CX Codex +1 2 900установок ce-riffrec-feedback-analysis Превращает записанный продуктовый фидбек в структурированные баги и требования. Берёт видео, скрины или заметки из Riffrec и выдаёт готовый отчёт для других агентов. CX Codex +1 2 800установок ce-polish Доводит рабочую фичу через фидбек в браузере: ты говоришь, что хочешь исправить, скилл правит код, hot reload показывает результат. CX Codex +1 1 100установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой