Webpage Screenshot MCP Server

Скриншот веб-страницы MCP Server

Сервер MCP (Model Context Protocol), который делает снимки экрана веб-страниц с помощью Puppeteer. Этот сервер позволяет агентам ИИ визуально проверять веб-приложения и видеть их прогресс при создании веб-приложений.

Функции

• Скриншоты всей страницы : захват целых веб-страниц или только области просмотра.
• Скриншоты элементов : выбор определенных элементов с помощью селекторов CSS
• Несколько форматов : поддержка форматов PNG, JPEG и WebP
• Настраиваемые параметры : установка размера области просмотра, качества изображения, условий ожидания и задержек.
• Кодировка Base64 : возвращает снимки экрана в виде изображений в кодировке Base64 для легкой интеграции.
• Поддержка аутентификации : ручной вход в систему и сохранение файлов cookie
• Интеграция с браузером по умолчанию : используйте браузер вашей системы по умолчанию для более естественного опыта.
• Сохранение сеанса : поддержание сеансов браузера открытыми для многоэтапных рабочих процессов.

Установка

Использование

Инструменты

Этот сервер MCP предоставляет несколько инструментов:

1. войти и ждать

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

• url (обязательно): URL-адрес страницы входа
• waitMinutes (необязательно): Максимальное время ожидания входа в систему в минутах (по умолчанию: 5)
• successIndicator (необязательно): селектор CSS или шаблон URL, указывающий на успешный вход в систему
• useDefaultBrowser (необязательно): использовать ли системный браузер по умолчанию (по умолчанию: true)

2. скриншот-страница

Делает снимок экрана указанного URL-адреса и возвращает его в виде изображения, закодированного в base64.

• url (обязательно): URL-адрес веб-страницы для скриншота.
• fullPage (необязательно): захватывать ли всю страницу или только область просмотра (по умолчанию: true)
• width (необязательно): ширина области просмотра в пикселях (по умолчанию: 1920)
• height (необязательно): высота области просмотра в пикселях (по умолчанию: 1080)
• format (необязательно): Формат изображения - «png», «jpeg» или «webp» (по умолчанию: «png»)
• quality (необязательно): качество изображения (0-100), применимо только для jpeg и webp
• waitFor (необязательно): Когда следует считать страницу загруженной — «load», «domcontentloaded», «networkidle0» или «networkidle2» (по умолчанию: «networkidle2»).
• delay (необязательно): дополнительная задержка в миллисекундах после загрузки страницы (по умолчанию: 0)
• useSavedAuth (необязательно): использовать ли сохраненные файлы cookie от предыдущего входа (по умолча��ию: true)
• reuseAuthPage (необязательно): использовать ли существующую аутентифицированную страницу (по умолчанию: false)
• useDefaultBrowser (необязательно): использовать ли системный браузер по умолчанию (по умолчанию: false)
• visibleBrowser (необязательно): показывать ли окно браузера (по умолчанию: false)

3. скриншот-элемент

Делает снимок экрана определенного элемента на веб-странице с помощью селектора CSS.

• url (обязательно): URL-адрес веб-страницы
• selector (обязательно): селектор CSS для элемента, скриншот которого нужно сделать
• waitForSelector (необязательно): следует ли ждать появления селектора (по умолчанию: true)
• format (необязательно): Формат изображения - «png», «jpeg» или «webp» (по умолчанию: «png»)
• quality (необязательно): качество изображения (0-100), применимо только для jpeg и webp
• padding (необязательно): отступ вокруг элемента в пикселях (по умолчанию: 0)
• useSavedAuth (необязательно): использовать ли сохраненные файлы cookie от предыдущего входа (по умолчанию: true)
• useDefaultBrowser (необязательно): использовать ли системный браузер по умолчанию (по умолчанию: false)
• visibleBrowser (необязательно): показывать ли окно браузера (по умолчанию: false)

4. очистить-авторизацию-cookies

Удаляет сохраненные файлы cookie аутентификации для определенного домена или всех доменов.

• url (необязательно): URL домена для очистки куки. Если не указано, очищает все куки.

Режим браузера по умолчанию

Режим браузера по умолчанию позволяет вам использовать обычный браузер вашей системы (Chrome, Edge и т. д.) вместо встроенного Chromium Puppeteer. Это полезно для:

1. Использование существующих сеансов и расширений браузера
2. Вход на веб-сайты вручную с использованием сохраненных учетных данных
3. Более естественный просмотр многоэтапных рабочих процессов
4. Тестирование в той же среде браузера, что и у ваших пользователей

Чтобы включить режим браузера по умолчанию, установите useDefaultBrowser: true и visibleBrowser: true в параметрах вашего инструмента.

Как работает режим браузера по умолчанию

При включении режима браузера по умолчанию:

1. Инструмент попытается найти браузер вашей системы по умолчанию (Chrome, Edge и т. д.)
2. Запускает ваш браузер с включенной удаленной отладкой на случайном порту.
3. Puppeteer подключается к этому экземпляру браузера вместо запуска своего собственного
4. Ваши существующие профили, расширения и файлы cookie доступны во время сеанса.
5. Окно браузера остается видимым, поэтому вы можете взаимодействовать с ним вручную.

Этот режим особенно полезен для рабочих процессов, требующих аутентификации или сложного взаимодействия с пользователем.

Постоянство браузера

Сервер MCP может поддерживать постоянный сеанс браузера при нескольких вызовах инструментов:

1. При использовании login-and-wait сеанс браузера остается открытым.
2. Последующие вызовы screenshot-page или screenshot-element с reuseAuthPage: true будут использовать ту же страницу.
3. Это позволяет реализовать многоэтапные рабочие процессы без необходимости повторной аутентификации.

Управление файлами cookie

Файлы cookie автоматически сохраняются для каждого посещаемого вами домена:

1. После использования login-and-wait файлы cookie сохраняются в каталоге .mcp-screenshot-cookies в вашей домашней папке.
2. Эти файлы cookie автоматически загружаются при повторном посещении того же домена с useSavedAuth: true
3. Вы можете очистить файлы cookie с помощью инструмента clear-auth-cookies

Пример рабочего процесса: защищенные скриншоты страниц

Вот пример рабочего процесса создания снимков экрана страниц, требующих аутентификации:

1. Фаза ручного входа

Это откроет ваш браузер по умолчанию со страницей входа. Вы можете вручную войти в систему, и после завершения (либо путем обнаружения индикатора успеха, либо после перехода со страницы входа) сеансовые куки будут сохранены.

2. Делайте снимки экрана, используя сохраненную сессию

Это позволит сделать снимок экрана страницы учетной записи с использованием сохраненных вами файлов cookie аутентификации в том же окне браузера.

3. Делайте скриншоты определенных элементов

4. Очистить куки-файлы по завершении

Этот рабочий процесс позволяет вам взаимодействовать с защищенными страницами так, как если бы вы были обычным пользователем, выполняя полную процедуру аутентификации в браузере по умолчанию.

Режим Headless против Видимого

• Режим Headless ( visibleBrowser: false ): более быстрый и подходящий для автоматизированных рабочих процессов, где не требуется взаимодействие с пользователем.
• Видимый режим ( visibleBrowser: true ): показывает окно браузера, позволяя взаимодействовать с пользователем и вручную проверять. Требуется для useDefaultBrowser: true .

Поддержка платформы

Функция обнаружения браузера по умолчанию работает на:

• macOS : распознает Chrome, Edge и Safari
• Windows : обнаруживает Chrome и Edge через реестр или общие пути установки.
• Linux : обнаруживает Chrome и Chromium с помощью системных команд

Поиск неисправностей

Распространенные проблемы

1. Браузер по умолчанию не найден : если система не может найти ваш браузер по умолчанию, она вернется к встроенному в Puppeteer браузеру Chromium.
2. Проблемы с подключением : если возникают проблемы с подключением к порту отладки браузера, проверьте, не использует ли этот порт другой экземпляр.
3. Проблемы с файлами cookie : если аутентификация не работает, попробуйте очистить файлы cookie с помощью инструмента clear-auth-cookies .

Отладка

Сервер MCP регистрирует полезные сообщения об ошибках в консоли при возникновении проблем. Проверьте эти сообщения для получения информации об устранении неполадок.