# visual-qa-testing

Открывает страницу во встроенном браузере Cursor, делает скриншот, читает консоль и сетевые запросы. Пригодится сразу после правок интерфейса.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 642 установки · ★ 866
- Автор: spencerpauly
- Лицензия: CC0-1.0 · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/spencerpauly/awesome-cursor-skills/tree/HEAD/resources/visual-qa-testing/SKILL.md
- Обновлён: 2026-08-02
- HTML: https://affpapa.org/nevibecode/skills/visual-qa-testing

## Что делает

Скилл проводит визуальный QA-проход по веб-приложению, не выходя из Cursor. Он опирается на встроенный браузер `cursor-ide-browser` (MCP), который умеет открывать URL, снимать скриншоты, читать сообщения консоли, смотреть сетевые запросы и кликать по элементам.

Порядок такой: убедиться, что dev-сервер запущен, иначе поднять его в фоне через `npm run dev` и дождаться строки с localhost. Дальше `browser_navigate` открывает нужный маршрут, `browser_take_screenshot` снимает полную страницу, `browser_console_messages` показывает ошибки вроде `TypeError`, `ReferenceError` или расхождений при гидратации React, а `browser_network_requests` — ответы 4xx/5xx, CORS и лишние дубли запросов. Если правка затрагивает кнопки, формы или модалки, в ход идут `browser_click`, `browser_fill` и `browser_hover`, после чего снимок делается заново.

Перед кликом скилл советует вызывать `browser_snapshot`, чтобы получить верные ссылки на элементы. Для проверки адаптива есть `browser_resize`, а `browser_navigate` с `position: "side"` открывает браузер рядом с кодом. Учтите: всё это работает только там, где доступен встроенный браузер Cursor, — в других редакторах шаги придётся повторять вручную.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill visual-qa-testing -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/visual-qa-testing/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/visual-qa-testing/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill visual-qa-testing -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/visual-qa-testing/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill visual-qa-testing -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/visual-qa-testing/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install spencerpauly/awesome-cursor-skills visual-qa-testing
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/visual-qa-testing/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill visual-qa-testing -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/spencerpauly/awesome-cursor-skills --path resources/visual-qa-testing
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/visual-qa-testing/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill visual-qa-testing -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/spencerpauly/awesome-cursor-skills/tree/HEAD/resources/visual-qa-testing/SKILL.md

## Когда брать
- проверить, как выглядит страница после правки вёрстки
- поймать ошибки JavaScript в консоли до релиза
- найти упавшие запросы к API и ответы 4xx/5xx
- протестировать кнопку, форму или модалку кликом в браузере
- посмотреть страницу на другом размере вьюпорта

## Примеры запросов агенту
- сделай визуальный QA главной страницы и покажи скриншот
- проверь консоль и сетевые запросы на /settings после моих правок
- кликни по кнопке сохранения и сними скриншот результата

## Похожие
- [workflow-progress-screenshots](https://affpapa.org/nevibecode/skills/workflow-progress-screenshots.md) — скилл · 341 установка
- [frontend-visual-qa](https://affpapa.org/nevibecode/skills/frontend-visual-qa.md) — скилл · 572 установки
- [setup-visual-testing](https://affpapa.org/nevibecode/commands/setup-visual-testing.md) — команда · 300 установок
- [dogfood](https://affpapa.org/nevibecode/skills/teknium-teknium1-hermes-agent-dogfood.md) — скилл · 6400 установок
- [visual-testing](https://affpapa.org/nevibecode/skills/visual-testing.md) — скилл · 1200 установок
- [visual-regression-testing](https://affpapa.org/nevibecode/skills/visual-regression-testing.md) — скилл · 718 установок

Из того же набора: [spencerpauly/awesome-cursor-skills](https://affpapa.org/nevibecode/by/spencerpauly/awesome-cursor-skills.md) — 60 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md