Skip to main content
Glama
deenesjakoruzh
microsoft

Playwright MCP Server

Official
by microsoft
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Local

Драматург MCP

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

Основные характеристики

  • Быстрый и легкий . Использует дерево доступности Playwright, а не пиксельный ввод.

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

  • Детерминированное применение инструмента . Избегает неоднозначности, характерной для подходов, основанных на скриншотах.

Требования

  • Node.js 18 или новее

  • VS Code, Cursor, Windsurf, Claude Desktop или любой другой MCP-клиент

Начиная

Сначала установите сервер Playwright MCP с вашим клиентом. Типичная конфигурация выглядит так:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

Вы также можете установить сервер Playwright MCP с помощью VS Code CLI:

# For VS Code
code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

После установки сервер Playwright MCP будет доступен для использования с вашим агентом GitHub Copilot в VS Code.

Перейдите в Cursor Settings -> MCP -> Add new MCP Server . Назовите по своему вкусу, используйте тип command с командой npx @playwright/mcp . Вы также можете проверить конфигурацию или добавить аргументы, подобные команде, нажав Edit .

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

Следуйте документации Windsuff MCP. Используйте следующую конфигурацию:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

Следуя руководству по установке MCP, используйте следующую конфигурацию:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

Конфигурация

Сервер Playwright MCP поддерживает следующие аргументы. Они могут быть предоставлены в конфигурации JSON выше, как часть списка "args" :

> npx @playwright/mcp@latest --help
  --allowed-origins <origins>  semicolon-separated list of origins to allow the
                               browser to request. Default is to allow all.
  --blocked-origins <origins>  semicolon-separated list of origins to block the
                               browser from requesting. Blocklist is evaluated
                               before allowlist. If used without the allowlist,
                               requests not matching the blocklist are still
                               allowed.
  --block-service-workers      block service workers
  --browser <browser>          browser or chrome channel to use, possible
                               values: chrome, firefox, webkit, msedge.
  --caps <caps>                comma-separated list of capabilities to enable,
                               possible values: tabs, pdf, history, wait, files,
                               install. Default is all.
  --cdp-endpoint <endpoint>    CDP endpoint to connect to.
  --config <path>              path to the configuration file.
  --device <device>            device to emulate, for example: "iPhone 15"
  --executable-path <path>     path to the browser executable.
  --headless                   run browser in headless mode, headed by default
  --host <host>                host to bind server to. Default is localhost. Use
                               0.0.0.0 to bind to all interfaces.
  --ignore-https-errors        ignore https errors
  --isolated                   keep the browser profile in memory, do not save
                               it to disk.
  --no-image-responses         do not send image responses to the client.
  --no-sandbox                 disable the sandbox for all process types that
                               are normally sandboxed.
  --output-dir <path>          path to the directory for output files.
  --port <port>                port to listen on for SSE transport.
  --proxy-bypass <bypass>      comma-separated domains to bypass proxy, for
                               example ".com,chromium.org,.domain.com"
  --proxy-server <proxy>       specify proxy server, for example
                               "http://myproxy:3128" or "socks5://myproxy:8080"
  --save-trace                 Whether to save the Playwright Trace of the
                               session into the output directory.
  --storage-state <path>       path to the storage state file for isolated
                               sessions.
  --user-agent <ua string>     specify user agent string
  --user-data-dir <path>       path to the user data directory. If not
                               specified, a temporary directory will be created.
  --viewport-size <size>       specify browser viewport size in pixels, for
                               example "1280, 720"
  --vision                     Run server that uses screenshots (Aria snapshots
                               are used by default)

Профиль пользователя

Вы можете запустить Playwright MCP с постоянным профилем как обычный браузер (по умолчанию) или в изолированных контекстах для сеансов тестирования.

Постоянный профиль

Вся информация о входе в систему будет храниться в постоянном профиле, вы можете удалить его между сеансами, если хотите очистить состояние офлайн. Постоянный профиль находится в следующих местах, и вы можете переопределить его с помощью аргумента --user-data-dir .

# Windows
%USERPROFILE%\AppData\Local\ms-playwright\mcp-{channel}-profile

# macOS
- ~/Library/Caches/ms-playwright/mcp-{channel}-profile

# Linux
- ~/.cache/ms-playwright/mcp-{channel}-profile

Изолированный

В изолированном режиме каждый сеанс запускается в изолированном профиле. Каждый раз, когда вы просите MCP закрыть браузер, сеанс закрывается, и все состояние хранилища для этого сеанса теряется. Вы можете предоставить начальное состояние хранилища браузеру через contextOptions конфигурации или через аргумент --storage-state . Узнайте больше о состоянии хранилища здесь .

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--isolated",
        "--storage-state={path/to/storage.json}
      ]
    }
  }
}

Файл конфигурации

Сервер Playwright MCP можно настроить с помощью файла конфигурации JSON. Вы можете указать файл конфигурации с помощью параметра командной строки --config :

npx @playwright/mcp@latest --config path/to/config.json
{
  // Browser configuration
  browser?: {
    // Browser type to use (chromium, firefox, or webkit)
    browserName?: 'chromium' | 'firefox' | 'webkit';

    // Keep the browser profile in memory, do not save it to disk.
    isolated?: boolean;

    // Path to user data directory for browser profile persistence
    userDataDir?: string;

    // Browser launch options (see Playwright docs)
    // @see https://playwright.dev/docs/api/class-browsertype#browser-type-launch
    launchOptions?: {
      channel?: string;        // Browser channel (e.g. 'chrome')
      headless?: boolean;      // Run in headless mode
      executablePath?: string; // Path to browser executable
      // ... other Playwright launch options
    };

    // Browser context options
    // @see https://playwright.dev/docs/api/class-browser#browser-new-context
    contextOptions?: {
      viewport?: { width: number, height: number };
      // ... other Playwright context options
    };

    // CDP endpoint for connecting to existing browser
    cdpEndpoint?: string;

    // Remote Playwright server endpoint
    remoteEndpoint?: string;
  },

  // Server configuration
  server?: {
    port?: number;  // Port to listen on
    host?: string;  // Host to bind to (default: localhost)
  },

  // List of enabled capabilities
  capabilities?: Array<
    'core' |    // Core browser automation
    'tabs' |    // Tab management
    'pdf' |     // PDF generation
    'history' | // Browser history
    'wait' |    // Wait utilities
    'files' |   // File handling
    'install' | // Browser installation
    'testing'   // Testing
  >;

  // Enable vision mode (screenshots instead of accessibility snapshots)
  vision?: boolean;

  // Directory for output files
  outputDir?: string;

  // Network configuration
  network?: {
    // List of origins to allow the browser to request. Default is to allow all. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked.
    allowedOrigins?: string[];

    // List of origins to block the browser to request. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked.
    blockedOrigins?: string[];
  };
 
  /**
   * Do not send image responses to the client.
   */
  noImageResponses?: boolean;
}

Автономный MCP-сервер

При запуске браузера Headed в системе без дисплея или из рабочих процессов IDE запустите сервер MCP из среды с DISPLAY и передайте флаг --port , чтобы включить транспорт SSE.

npx @playwright/mcp@latest --port 8931

Затем в конфигурации клиента MCP задайте url -адрес конечной точки SSE:

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8931/sse"
    }
  }
}

ПРИМЕЧАНИЕ: На данный момент реализация Docker поддерживает только безголовый Chromium.

{
  "mcpServers": {
    "playwright": {
      "command": "docker",
      "args": ["run", "-i", "--rm", "--init", "--pull=always", "mcr.microsoft.com/playwright/mcp"]
    }
  }
}

Вы можете создать образ Docker самостоятельно.

docker build -t mcr.microsoft.com/playwright/mcp .
import http from 'http';

import { createConnection } from '@playwright/mcp';
import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js';

http.createServer(async (req, res) => {
  // ...

  // Creates a headless Playwright MCP server with SSE transport
  const connection = await createConnection({ browser: { launchOptions: { headless: true } } });
  const transport = new SSEServerTransport('/messages', res);
  await connection.connect(transport);

  // ...
});

Инструменты

Инструменты доступны в двух режимах:

  1. Режим моментальных снимков (по умолчанию): использует моментальные снимки доступности для повышения производительности и надежности.

  2. Режим Vision : использует снимки экрана для визуального взаимодействия.

Чтобы использовать Vision Mode, добавьте флаг --vision при запуске сервера:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--vision"
      ]
    }
  }
}

Режим Vision лучше всего работает с компьютерными моделями, которые способны взаимодействовать с элементами, используя координатное пространство XY, судя по предоставленному снимку экрана.

  • снимок_браузера

    • Название: Снимок страницы

    • Описание: Сделать снимок доступности текущей страницы, это лучше, чем снимок экрана

    • Параметры: Нет

    • Только для чтения: правда

  • браузер_щелчок

    • Название: Щелчок

    • Описание: Выполнить щелчок на веб-странице.

    • Параметры:

      • element (строка): понятное человеку описание элемента, используемое для получения разрешения на взаимодействие с элементом

      • ref (string): Точная ссылка на целевой элемент из снимка страницы

    • Только для чтения: ложно

  • браузер_перетаскивание

    • Название: Перетаскивание мыши

    • Описание: Выполнение перетаскивания между двумя элементами.

    • Параметры:

      • startElement (строка): понятное человеку описание исходного элемента, используемое для получения разрешения на взаимодействие с элементом.

      • startRef (string): Точная ссылка на исходный элемент из снимка страницы

      • endElement (строка): понятное человеку описание целевого элемента, используемое для получения разрешения на взаимодействие с элементом.

      • endRef (строка): точная ссылка на целевой элемент из снимка страницы

    • Только для чтения: ложно

  • браузер_hover

    • Название: Наведение мыши

    • Описание: Наведите курсор на элемент на странице.

    • Параметры:

      • element (строка): понятное человеку описание элемента, используемое для получения разрешения на взаимодействие с элементом

      • ref (string): Точная ссылка на целевой элемент из снимка страницы

    • Только для чтения: правда

  • тип_браузера

    • Название: Введите текст

    • Описание: Введите текст в редактируемый элемент.

    • Параметры:

      • element (строка): понятное человеку описание элемента, используемое для получения разрешения на взаимодействие с элементом

      • ref (string): Точная ссылка на целевой элемент из снимка страницы

      • text (строка): Текст для ввода в элемент.

      • submit (логическое значение, необязательно): следует ли отправить введенный текст (нажмите Enter после этого)

      • slowly (boolean, необязательно): Вводить ли по одному символу за раз. Полезно для запуска обработчиков клавиш на странице. По умолчанию весь текст заполняется сразу.

    • Только для чтения: ложно

  • выбор_опции_браузера

    • Название: Выберите вариант

    • Описание: Выберите вариант в раскрывающемся списке.

    • Параметры:

      • element (строка): понятное человеку описание элемента, используемое для получения разрешения на взаимодействие с элементом

      • ref (string): Точная ссылка на целевой элемент из снимка страницы

      • values (массив): Массив значений для выбора в раскрывающемся списке. Это может быть одно значение или несколько значений.

    • Только для чтения: ложно

  • браузер_нажмите_клавишу

    • Название: Нажмите клавишу

    • Описание: Нажмите клавишу на клавиатуре.

    • Параметры:

      • key (строка): название клавиши, которую нужно нажать, или символ, который нужно сгенерировать, например, ArrowLeft``a

    • Только для чтения: ложно

  • браузер_ожидание_для

    • Название: Подождите

    • Описание: Ожидание появления или исчезновения текста или истечения указанного времени.

    • Параметры:

      • time (число, необязательно): время ожидания в секундах

      • text (строка, необязательно): Текст, которого нужно ждать

      • textGone (строка, необязательно): Текст, которого нужно дождаться, чтобы исчезнуть.

    • Только для чтения: правда

  • загрузка_файла_браузера

    • Название: Загрузить файлы

    • Описание: Загрузите один или несколько файлов.

    • Параметры:

      • paths (массив): Абсолютные пути к файлам для загрузки. Может быть одним файлом или несколькими файлами.

    • Только для чтения: ложно

  • диалог_обработки_браузера

    • Название: Обработка диалога

    • Описание: Обработка диалога.

    • Параметры:

      • accept (логическое значение): принимать ли диалог.

      • promptText (строка, необязательно): Текст подсказки в случае диалогового окна подсказки.

    • Только для чтения: ложно

  • браузер_навигация

    • Название: Перейти к URL-адресу

    • Описание: Перейдите по URL-адресу

    • Параметры:

      • url (строка): URL-адрес для перехода

    • Только для чтения: ложно

  • браузер_навигация_назад

    • Название: Вернуться назад

    • Описание: Вернуться на предыдущую страницу

    • Параметры: Нет

    • Только для чтения: правда

  • браузер_навигация_вперед

    • Название: Идти вперед

    • Описание: Перейти на следующую страницу

    • Параметры: Нет

    • Только для чтения: правда

  • браузер_сделать_скриншот

    • Название: Сделать снимок экрана

    • Описание: Сделать снимок экрана текущей страницы. Вы не можете выполнять действия на основе снимка экрана, используйте для действий browser_snapshot.

    • Параметры:

      • raw (boolean, необязательно): Возвращать ли без сжатия (в формате PNG). Значение по умолчанию — false, что возвращает изображение JPEG.

      • filename (строка, необязательно): Имя файла для сохранения снимка экрана. По умолчанию page-{timestamp}.{png|jpeg} если не указано иное.

      • element (строка, необязательно): понятное человеку описание элемента, используемое для получения разрешения на снимок экрана элемента. Если не указано, снимок экрана будет сделан из области просмотра. Если элемент указан, необходимо указать также ссылку.

      • ref (строка, необязательно): Точная ссылка на целевой элемент из снимка страницы. Если не указано, снимок экрана будет сделан из области просмотра. Если указано ref, элемент также должен быть указан.

    • Только для чтения: правда

  • браузер_pdf_сохранить

    • Название: Сохранить как PDF

    • Описание: Сохранить страницу как PDF

    • Параметры:

      • filename (строка, необязательно): Имя файла для сохранения PDF-файла. По умолчанию page-{timestamp}.pdf если не указано иное.

    • Только для чтения: правда

  • запросы_браузера_сети

    • Название: Список сетевых запросов

    • Описание: Возвращает все сетевые запросы с момента загрузки страницы.

    • Параметры: Нет

    • Только для чтения: правда

  • сообщения_консоли_браузера

    • Название: Получить консольные сообщения

    • Описание: Возвращает все сообщения консоли.

    • Параметры: Нет

    • Только для чтения: правда

  • браузер_установить

    • Заголовок: Установка браузера, указанного в конфиге

    • Описание: Установите браузер, указанный в конфигурации. Вызовите его, если вы получили ошибку о том, что браузер не установлен.

    • Параметры: Нет

    • Только для чтения: ложно

  • браузер_закрыть

    • Заголовок: Закрыть браузер

    • Описание: Закрыть страницу

    • Параметры: Нет

    • Только для чтения: правда

  • изменение_размера_браузера

    • Название: Изменение размера окна браузера

    • Описание: Изменение размера окна браузера.

    • Параметры:

      • width (число): Ширина окна браузера.

      • height (число): Высота окна браузера.

    • Только для чтения: правда

  • список_вкладок_браузера

    • Название: Список вкладок

    • Описание: Список вкладок браузера

    • Параметры: Нет

    • Только для чтения: правда

  • браузер_вкладка_новая

    • Заголовок: Открыть новую вкладку

    • Описание: Открыть новую вкладку

    • Параметры:

      • url (строка, необязательно): URL для перехода на новую вкладку. Если не указано, новая вкладка будет пустой.

    • Только для чтения: правда

  • выбор_вкладки_браузера

    • Название: Выберите вкладку

    • Описание: Выберите вкладку по индексу

    • Параметры:

      • index (номер): индекс вкладки для выбора.

    • Только для чтения: правда

  • закрыть_вкладку_браузера

    • Заголовок: Закрыть вкладку

    • Описание: Закрыть вкладку

    • Параметры:

      • index (число, необязательно): индекс вкладки для закрытия. Закрывает текущую вкладку, если не указано.

    • Только для чтения: ложно

  • браузер_генерировать_драматург_тест

    • Название: Сгенерируйте тест драматурга

    • Описание: Создать тест драматурга для заданного сценария.

    • Параметры:

      • name (строка): Название теста

      • description (строка): Описание теста

      • steps (массив): шаги теста

    • Только для чтения: правда

  • захват_экрана_браузера

    • Название: Сделать снимок экрана

    • Описание: Сделать снимок экрана текущей страницы.

    • Параметры: Нет

    • Только для чтения: правда

  • экран_браузера_перемещение_мыши

    • Название: Перемещение мыши

    • Описание: Переместить мышь в указанную позицию.

    • Параметры:

      • element (строка): понятное человеку описание элемента, используемое для получения разрешения на взаимодействие с элементом

      • x (число): координата X

      • y (число): координата Y

    • Только для чтения: правда

  • щелчок_по_экрану_браузера

    • Название: Щелчок

    • Описание: Щелкните левой кнопкой мыши.

    • Параметры:

      • element (строка): понятное человеку описание элемента, используемое для получения разрешения на взаимодействие с элементом

      • x (число): координата X

      • y (число): координата Y

    • Только для чтения: ложно

  • перетаскивание_экрана_браузера

    • Название: Перетаскивание мыши

    • Описание: Перетащите левой кнопкой мыши

    • Параметры:

      • element (строка): понятное человеку описание элемента, используемое для получения разрешения на взаимодействие с элементом

      • startX (число): Начальная координата X

      • startY (число): начальная координата Y

      • endX (число): Конечная координата X

      • endY (число): Конечная координата Y

    • Только для чтения: ложно

  • тип_экрана_браузера

    • Название: Введите текст

    • Описание: Введите текст

    • Параметры:

      • text (строка): Текст для ввода в элемент.

      • submit (логическое значение, необязательно): следует ли отправить введенный текст (нажмите Enter после этого)

    • Только для чтения: ложно

  • браузер_нажмите_клавишу

    • Название: Нажмите клавишу

    • Описание: Нажмите клавишу на клавиатуре.

    • Параметры:

      • key (строка): название клавиши, которую нужно нажать, или символ, который нужно сгенерировать, например, ArrowLeft``a

    • Только для чтения: ложно

  • браузер_ожидание_для

    • Название: Подождите

    • Описание: Ожидание появления или исчезновения текста или истечения указанного времени.

    • Параметры:

      • time (число, необязательно): время ожидания в секундах

      • text (строка, необязательно): Текст, которого нужно ждать

      • textGone (строка, необязательно): Текст, которого нужно дождаться, чтобы исчезнуть.

    • Только для чтения: правда

  • загрузка_файла_браузера

    • Название: Загрузить файлы

    • Описание: Загрузите один или несколько файлов.

    • Параметры:

      • paths (массив): Абсолютные пути к файлам для загрузки. Может быть одним файлом или несколькими файлами.

    • Только для чтения: ложно

  • диалог_обработки_браузера

    • Название: Обработка диалога

    • Описание: Обработка диалога.

    • Параметры:

      • accept (логическое значение): принимать ли диалог.

      • promptText (строка, необязательно): Текст подсказки в случае диалогового окна подсказки.

    • Только для чтения: ложно

Install Server
A
security – no known vulnerabilities
A
license - permissive license
A
quality - confirmed to work

How are these scores calculated?

Resources

Tools

View all tools

Appeared in Searches

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/microsoft/playwright-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server