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