visual-check

$npx mdskill add SteelMorgan/1c-agent-based-dev-framework/visual-check

Automates visual testing of 1C web forms by capturing screenshots, checking for JavaScript errors, and analyzing layout against a checklist.

  • Helps ensure 1C web forms meet visual and functional standards during development or quality assurance.
  • Integrates with browser automation tools for navigation, screenshot capture, and console message retrieval.
  • Uses a predefined checklist to evaluate form layout, alignment, controls, and usability aspects.
  • Delivers results as a report combining screenshot analysis and JavaScript error status.

SKILL.md

.github/skills/visual-checkView on GitHub ↗
---
name: visual-check
description: Визуальная проверка формы 1С через веб-клиент и браузерную автоматизацию. Делает скриншот, проверяет JS-ошибки в консоли, анализирует по чеклисту form-visual-requirements.
---

# Визуальная проверка форм (Visual Check)

Требуется: URL веб-клиента 1С (опубликованная база), учётные данные.

## Процесс проверки

### 1. Навигация к форме

Предпочитай Deep Linking — быстрее навигации через интерфейс.

- Список: `<base_url>/e1cib/list/<ТипМетаданных>.<Имя>`
- Новый объект: `<base_url>/e1cib/data/<ТипМетаданных>.<Имя>?ref=00000000-0000-0000-0000-000000000000`
- Существующий объект: `<base_url>/e1cib/data/<ТипМетаданных>.<Имя>?ref=<UUID>`

### 2. Авторизация (если перенаправил на вход)

`browser_snapshot` → `browser_fill` (логин/пароль по ref) → `browser_click` (Войти).

### 3. Снимок и консоль

После загрузки (дождаться исчезновения индикатора):
1. `browser_take_screenshot`
2. `browser_console_messages` — искать «Error», «Exception», «Uncaught»

### 4. Анализ по чеклисту `form-visual-requirements`

- Расположение и выравнивание (группировка, отступы, ширина)
- Элементы управления и подписи (метки, обрезка, заголовки, командная панель)
- Удобство (порядок обхода, ключевые поля, таблицы, горизонтальная прокрутка)
- Специфика типа объекта (справочники, документы, обработки)

**Отчёт:** результат анализа скриншота + наличие/отсутствие JS-ошибок.

## Capabilities

| Capability | Назначение |
|------------|------------|
| `browser_navigate` | Открытие URL формы |
| `browser_snapshot` | Структура страницы и ref-ы элементов |
| `browser_fill` | Заполнение полей |
| `browser_click` | Клик по элементам |
| `browser_take_screenshot` | Снимок формы |
| `browser_console_messages` | Проверка JS-ошибок |
| `browser_wait_for` | Ожидание загрузки |

## Типичные ошибки

| Ошибка | Обходной путь |
|--------|---------------|
| Скриншот пустой | `browser_wait_for` перед скриншотом |
| Deep Link не работает для нового | Список → «Создать» через `browser_click` |
| `browser_fill` не находит поле | `browser_snapshot` для актуальных ref-ов |
| JS-ошибки при нормальной форме | Зафиксировать — проявятся при сохранении |

---
depends_on:
  - framework/skills/bsl-practices/form-visual-requirements/SKILL.md
---

More from SteelMorgan/1c-agent-based-dev-framework

SkillDescription
1c-ai-agent-cliCLI 1C BSL Agent Framework — tools/install.py (clone, install). Используй при клонировании репозитория, установке компонентов в проект, настройке IDE (Cursor, Claude Code, Windsurf, VS Code+Continue).
agent-debugПаттерн отладочных сообщений для 1С BSL. Используй, когда стандартная диагностика (event-log, скриншоты) не даёт понять фактическое поведение системы — нужно вставить временные точки логирования в код, запустить тест и проанализировать записи ЖР.
agent-developmentCreate custom subagents for specialized AI tasks. Use when the user wants to create a new type of subagent, set up task-specific agents, configure code reviewers, debuggers, or domain-specific assistants with custom prompts.
agent-development-ext>
agent-git-workflowStandardizes git workflow for the AI agent in the sandbox devcontainer: work in agent/<task>-<yyyymmdd>, integrate via agent, never push to main/master, open PRs via GitHub CLI. Use when the user asks to create branches, push changes, open PRs, or follow this sandbox repo setup.
auto-skill-bootstrapDeterministic helper to inventory existing project skills, detect missing capability coverage, search skills.sh via Skills CLI, and (optionally) install missing skills under a trust policy. Uses skills-manifest.json + state.json to stay idempotent across changing requirements.
code-navigationНавигация по коду (Code Navigation). Навык учит агента **эффективно перемещаться по BSL-коду** с помощью LSP (Language Server Protocol).
config-operationsОперации с конфигурацией 1С (CF) — init, info, edit, validate. Используй при создании конфигурации, анализе структуры, изменении свойств и ChildObjects, валидации Configuration.xml.
epf-buildСобрать EPF/ERF из XML-исходников. Используй после внесения временных диагностических правок в разобранную обработку.
epf-dumpРазобрать EPF/ERF в XML-исходники. Используй, когда нужно быстро получить исходный код внешней обработки или отчета для анализа и временной модификации.