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

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

Функции

• Скриншоты всей страницы : захват целых веб-страниц или только области просмотра.

• Скриншоты элементов : выбор определенных элементов с помощью селекторов CSS

• Несколько форматов : поддержка форматов PNG, JPEG и WebP

• Настраиваемые параметры : установка размера области просмотра, качества изображения, условий ожидания и задержек.

• Кодировка Base64 : возвращает снимки экрана в виде изображений в кодировке Base64 для легкой интеграции.

• Поддержка аутентификации : ручной вход в систему и сохранение файлов cookie

• Интеграция с браузером по умолчанию : используйте браузер вашей системы по умолчанию для более естественного опыта.

• Сохранение сеанса : поддержание сеансов браузера открытыми для многоэтапных рабочих процессов.

Related MCP server: Puppeteer MCP Server

Установка

# Install globally
npm install -g screenshot-webpage-mcp

# Or use locally in a project
npm install screenshot-webpage-mcp

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

Инструменты

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

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

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

{
  "url": "https://example.com/login",
  "waitMinutes": 5,
  "successIndicator": ".dashboard-welcome",
  "useDefaultBrowser": true
}

• url (обязательно): URL-адрес страницы входа

• waitMinutes (необязательно): Максимальное время ожидания входа в систему в минутах (по умолчанию: 5)

• successIndicator (необязательно): селектор CSS или шаблон URL, указывающий на успешный вход в систему

• useDefaultBrowser (необязательно): использовать ли системный браузер по умолчанию (по умолчанию: true)

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

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

{
  "url": "https://example.com/dashboard",
  "fullPage": true,
  "width": 1920,
  "height": 1080,
  "format": "png",
  "quality": 80,
  "waitFor": "networkidle2",
  "delay": 500,
  "useSavedAuth": true,
  "reuseAuthPage": true,
  "useDefaultBrowser": true,
  "visibleBrowser": true
}

• 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": "https://example.com/dashboard",
  "selector": ".user-profile",
  "waitForSelector": true,
  "format": "png",
  "quality": 80,
  "padding": 10,
  "useSavedAuth": true,
  "useDefaultBrowser": true,
  "visibleBrowser": true
}

• 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": "https://example.com"
}

• 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. Фаза ручного входа

{
  "name": "login-and-wait",
  "parameters": {
    "url": "https://example.com/login",
    "waitMinutes": 3,
    "successIndicator": ".dashboard-welcome",
    "useDefaultBrowser": true
  }
}

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

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

{
  "name": "screenshot-page",
  "parameters": {
    "url": "https://example.com/account",
    "fullPage": true,
    "useSavedAuth": true,
    "reuseAuthPage": true,
    "useDefaultBrowser": true,
    "visibleBrowser": true
  }
}

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

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

{
  "name": "screenshot-element",
  "parameters": {
    "url": "https://example.com/dashboard",
    "selector": ".user-profile-section",
    "useSavedAuth": true,
    "useDefaultBrowser": true,
    "visibleBrowser": true
  }
}

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

{
  "name": "clear-auth-cookies",
  "parameters": {
    "url": "https://example.com"
  }
}

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

Режим 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 регистрирует полезные сообщения об ошибках в консоли при возникновении проблем. Проверьте эти сообщения для получения информации об устранении неполадок.