diff --git a/blog/mcp-release.mdx b/blog/mcp-release.mdx new file mode 100644 index 0000000..2924021 --- /dev/null +++ b/blog/mcp-release.mdx @@ -0,0 +1,199 @@ +--- +title: Testplane MCP +slug: mcp-release +hide_table_of_contents: false +date: 2025-06-16T17:00 +--- + +import Admonition from "@theme/Admonition"; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import SnapshotExample from "/docs/_partials/mcp-snapshot-example.mdx"; +import investigateVideoUrl from "/video/blog/mcp/investigate.mp4"; +import generateVideoUrl from "/video/blog/mcp/generate.mp4"; + +Рады представить Testplane MCP — проект, который позволяет AI-агентам быть в контексте происходящего в браузере, совершать действия и генерировать тесты с учетом реального состояния страницы. + +![](/img/blog/mcp/cover.png) + +{/* truncate */} + +## Какие возможности открывает Testplane MCP? + +### Значительное улучшение генерации тестов + +Представим, что мы добавили в приложение новую функциональность и теперь хотим сгенерировать тесты на неё с помощью AI-агента. Ранее, AI-агент мог лишь предположить как выглядит эта страница — селекторы, скорее всего, получились бы вымышленными, и тест требовал бы серьезных правок. + +Testplane MCP выводит этот процесс на новый уровень: AI-агент во время написания теста может открыть нужную страницу в браузере, посмотреть на её верстку или выполнить любые действия (например, нажать на кнопку или заполнить форму). + +В результате AI-агент может сгенерировать тест имея полный контекст происходящего в браузере — включая селекторы, которые действительно есть на странице. + +### Использование браузера AI-агентами + +Testplane MCP делает возможным автоматизировать повторяющиеся процессы. Например, можно построить воркфлоу для извлечения информации из фото чеков, после чего с помощью Testplane MCP заходить на панель управления своей организации и заполнять форму отчета с соответствующей информацией (наименование, количество, цена и т.д.). + +## Установка + +Необходимо запустить сервер из пакета `@testplane/mcp`. Для bleeding-edge сборок используйте тег `@next`, для стабильных — `@latest`: + +```shell +npx @testplane/mcp@next +``` + +Установка зависит от среды, в которой будет использоваться Testplane MCP. + + + + Откройте настройки Cursor (кнопка в правом верхнем углу IDE), в секции `MCP` нажмите на кнопку `Add new global MCP server`, добавьте в конфиг Testplane MCP как в примере ниже. + + ```json + { + "mcpServers": { + "testplane-mcp": { + "command": "npx", + "args": ["@testplane/mcp@next"] + } + } + } + ``` + + + + 1. Установите [расширение Cline](https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev). + 2. На вкладке расширения необходимо перейти на вкладу "MCP" и нажать "Configure MCP Servers". + ![](/img/blog/mcp/cline-setup.png) + 3. Добавьте в конфиг Testplane MCP как в примере ниже. + ```json + { + "mcpServers": { + "testplane-mcp": { + "command": "npx", + "args": ["@testplane/mcp@next"] + } + } + } + ``` + + + + Откройте настройки VS Code, введите в поиск `MCP`, нажмите на `Edit in settings.json`, добавьте в конфиг Testplane MCP как в примере ниже. + + ```json + { + "mcp": { + "inputs": [], + "servers": { + "testplane-mcp": { + "command": "npx", + "args": ["@testplane/mcp@next"] + } + } + } + } + ``` + + + + Откройте настройки [как показано в оф. документации](https://modelcontextprotocol.io/quickstart/user), добавьте в конфиг Testplane MCP как в примере ниже. + + ```json + { + "mcpServers": { + "testplane-mcp": { + "command": "npx", + "args": ["@testplane/mcp@next"] + } + } + } + ``` + + + + Откройте настройки [как показано в оф. документации](https://docs.windsurf.com/windsurf/cascade/mcp), добавьте в конфиг Testplane MCP как в примере ниже. + + ```json + { + "mcpServers": { + "testplane-mcp": { + "command": "npx", + "args": ["@testplane/mcp@next"] + } + } + } + ``` + + + + Откройте настройки [как показано в оф. документации](https://www.jetbrains.com/help/ai-assistant/configure-an-mcp-server.html), добавьте в конфиг Testplane MCP как в примере ниже. + + ```json + { + "mcpServers": { + "testplane-mcp": { + "command": "npx", + "args": ["@testplane/mcp@next"] + } + } + } + ``` + + + + +После установки AI-агент сможет использовать Testplane MCP, можно прямо указать на это в промпте: "Используй testplane mcp, чтобы открыть страницу ...". + +## Использование + +Рассмотрим кейс разработки интернет-магазина книг. Представим, что у нас появилась новая фича — отображение оценок книг и мы хотим сгенерировать тесты на эту фичу. + +Сначала попросим AI-агента проанализировать страницу и составить план тестирования. + + + +
+ +Теперь попробуем сгенерировать тесты и запустить их. + + + +
+ +Как мы видим, AI-агент с первого раза сгенерировал тесты, которые проходят и содержат корректные селекторы. + +Вы можете попробовать такой промпт для генерации тестов с использованием Testplane MCP: + +> Используй testplane mcp, чтобы открыть страницу `https://ya.ru`, выполни поиск по запросу "котики", проверь, что результаты поиска отображаются. +> +> Не пиши лишние комментарии в тестах, кроме сложных краевых случаев. Пиши тесты в соответствии со стилем проекта. +> +> Старайся использовать семантические селекторы, например, по атрибутам `data-testid` или тексту элемента вместо сложных CSS-селекторов. + +## Особенности реализации + +Testplane MCP — не единственная реализация возможности взаимодействия AI-агента с браузером. + +На данный момент Testplane MCP обеспечивает следующие преимущества: + +- Очень компактные и гибкие снапшоты страниц, модели не нужно работать со скриншотами. Это значительная экономия токенов API LLM. + + Как пример — полный исходник `https://ya.ru` занимает ~260,000 символов, а компактный снапшот — лишь ~9,000. + +
+ + Пример снапшота + + + +
+ +- Бесшовная интеграция с экосистемой Testplane, которая в будущем будет только улучшаться. Например, каждый ответ сервера содержит код, который был запущен, чтобы модель могла встроить его в тесты. + +Следите за новыми релизами в нашем блоге и в разделе [Release Notes на GitHub](https://github.com/gemini-testing/testplane-mcp/releases), а в случае обнаружения проблем приходите в [issue GitHub][gh-issues] или наш [чат в Telegram](https://t.me/testplane) — мы вам обязательно поможем! + +[gh-issues]: https://github.com/gemini-testing/testplane-mcp/issues diff --git a/docs/_partials/mcp-snapshot-example.mdx b/docs/_partials/mcp-snapshot-example.mdx new file mode 100644 index 0000000..a6ef9f5 --- /dev/null +++ b/docs/_partials/mcp-snapshot-example.mdx @@ -0,0 +1,115 @@ +```yaml +- body: + - main.body__wrapper: + - div.headline: + - div.headline__personal: + - a.home-link2.alice.headline__personal-item.home-link2_color_quaternary[aria-label=Алиса href="https://alice.yandex.ru/?utm_source=yandex&utm_campaign=morda_header_oknyx&utm_medium=interface"]: + - svg.alice__icon + - div: + - div: + - a.home-link2.headline__personal-item.headline__personal-item_services[aria-label=Сервисы href=https://yandex.ru/all title=Сервисы role=button]: + - div.headline__personal-icon: + - svg + - a.home-link2.headline__personal-enter.home-link2_color_black[href="https://passport.yandex.ru/auth?retpath=https%3A%2F%2Fsso.passport.yandex.ru%2Fpush%3Fretpath%3Dhttp..."] "Войти" + - div: + - div.usermenu-portal: + - div: + - a.home-link2.headline__personal-menu.headline__personal-item[aria-label="Профиль, вход не выполнен" role=button tabindex=0 href="https://passport.yandex.ru/auth?origin=morda&retpath=https%3A%2F%2Fya.ru%2F%3Fnr%3D1%26redirect_ts%3..."]: + - div.headline__personal-icon: + - svg + - div[@hidden]: + - div.alerts[role=complementary aria-label=Уведомления]: + - h1.a11y-hidden[@hidden] "Уведомления" + - div.alert: + - a.home-link2.alert__content.home-link2_color_inherit[href="https://yandex.ru/pogoda/146?lat=44.948237&lon=34.100318&utm_content=GroupedTomorrow&utm_medium=aler..."]: + - "div.alert__left-content-wrapper[aria-label=\"Завтра: дождь, грозы · +15⁠…⁠+19⁠° · слабый ветер 3⁠–⁠5 м⁠/⁠с, порывы до 11 м⁠/⁠с\"]": + - span.alert__text "Завтра: дождь, грозы · +15⁠…⁠+19⁠° · слабый ветер 3⁠–⁠5 м⁠/⁠с, порывы до 11 м⁠/⁠с" + - button.alert__close[aria-label=Закрыть @hidden] + - div.body__content: + - form.mini-suggest.i-mini-bem.mini-suggest_search_yes.mini-suggest_personal_yes.mini-suggest_request_xhr.mini-suggest_favicon_yes.mini-suggest_hide-on-scroll_yes.mini-suggest_direct_yes.mini-suggest_re-request_yes.mini-suggest_direct-disclaimer_yes.mini-suggest_autofocus_yes.mini-suggest_delete-on-hover_yes.mini-suggest_grouping_yes.mini-suggest_theme_tile.mini-suggest_prevent-empty_yes.mini-suggest_entity-suggest_yes.mini-suggest_overlay_yaru.mini-suggest_type-icon_yes.mini-suggest_redesigned-navs_yes.mini-suggest_redesign-type_block.mini-suggest_expanding_yes.mini-suggest_reasoning_yes.mini-suggest_redesign-serp_yes.search3.search3_redesign-type_block.search3_keyboard_yes.search3_voice_yes.search3_camera_yes.mini-suggest_js_inited[action=https://ya.ru/search/ role=search aria-label="Поиск в интернете"]: + - div.search3__inner-wrapper: + - div: + - section.reasoning-section.reasoning-section_on-top_yes.reasoning-section_justify_center: + - ul.reasoning-section__list: + - li.reasoning-section__item.reasoning-section__item_type_rect: + - a.home-link2.reasoning-section__item-link.home-link2_color_inherit[href="https://yandex.ru/finance?utm_source=subclasses_product&utm_content=fin_5&utm_campaign=morda_web&per..."]: + - span.reasoning-section__item-title "Финансы" + - li.reasoning-section__item.reasoning-section__item_type_rect: + - a.home-link2.reasoning-section__item-link.home-link2_color_inherit[href="https://yandex.ru/products?utm_source=subclasses_product&utm_content=ecom&utm_campaign=morda_web&per..."]: + - span.reasoning-section__item-title "Товары" + - li.reasoning-section__item.reasoning-section__item_type_rect: + - a.home-link2.reasoning-section__item-link.home-link2_color_inherit[href="https://yandex.ru/realty?utm_source=subclasses_realty&utm_content=realty&utm_campaign=morda_web&pers..."]: + - span.reasoning-section__item-title "Квартиры" + - div.search3__inner: + - label.search3__input-wrapper-wrapper[for=text]: + - div.search3__input-wrapper: + - div.search3__input-outer-container: + - div.search3__input-inner-container: + - input.search3__input.mini-suggest__control[aria-label=Запрос name placeholder="Подробно опишите сложную задачу или вопрос" @hidden] + - textarea.search3__input.mini-suggest__input#text[placeholder="Подробно опишите сложную задачу или вопрос" name=text role=combobox] + - svg.search3__magnifier + - div.search3__action-buttons.search3__action-buttons_submit-button-icon_yes: + - div.search3__reasoning-root: + - div.search3__reasoning: + - div.reasoning-dropdown__root: + - div.reasoning-dropdown: + - button.reasoning-dropwdown__button[type=button aria-label=Подробнее title=Подробнее]: + - svg.search3__reasoning-qmark + - div: + - button.search3__keyboard.search3__action[title=Клавиатура type=button @hidden]: + - svg.search3__svg_keyboard + - div.search3__voice-wrapper: + - button.Button.VoiceInput.search3__voice.search3__voice_type_depot.VoiceInput_futuris[aria-label="Голосовой поиск" type=button title="Голосовой поиск"]: + - span.Button-Text: + - svg.VoiceInput-Icon + - div: + - button.search3__action.search3__camera#image-search[title="Поиск по картинке" type=button]: + - svg.search3__svg_camera + - button.search3__button.search3__button_icon_yes.mini-suggest__button[type=submit tabindex=-1 aria-label=Найти @hidden]: + - svg + - input[type=hidden name=lr value=146 @value=146 @hidden] + - input[type=hidden name=msid value=1749915681851623-7074561989186018597-balancer-l7leveler-kubr-yp-vla-119-BAL @value=1749915681851623-7074561989186018597-balancer-l7leveler-kubr-yp-vla-119-BAL @hidden] + - input[type=hidden name=search_source value=yaru_desktop_common @value=yaru_desktop_common @hidden] + - input[type=hidden name=search_domain value=yaru @value=yaru @hidden] + - aside.informers3[aria-label=Информеры]: + - a.home-link2.informers3__item.informers3-weather.home-link2_color_quaternary.home-link2_hover_tertiary[aria-label="Погода в Симферополе 21°, Облачно с прояснениями" href="https://yandex.ru/pogoda/146?lat=44.948237&lon=34.100318&utm_campaign=informer&utm_content=main_info..."]: + - div.informers3-weather__text "+21°" + - div: + - a.home-link2.informers3__pollen.informers3__item.informers3__pollen_level_yellow.informers3__pollen_animate_yes[aria-label="Низкая активность злаков" href="https://yandex.ru/pogoda/allergies?allergen=cereals&lat=44.948237&lon=34.100318&utm_campaign=informe..."]: + - div.simple-tooltip.force-dark.informers-tooltip.simple-tooltip_hidden_yes.simple-tooltip_direction_right[@hidden] "Низкая активность злаков" + - section.informers3__stocks: + - h2.a11y-hidden "Курсы ЦБ РФ" + - div.informers3__stocks-item-wrapper: + - a.home-link2.informers3__stocks-item.home-link2_color_quaternary.home-link2_hover_tertiary[aria-label="USD ЦБ 79,00" href="https://ya.ru/search/?lr=146&search_source=ya_morda_stocks&text=USD+%D0%A6%D0%91&wiz=finance"]: + - span "USD 79,00" + - div.informers3__stocks-item-wrapper: + - a.home-link2.informers3__stocks-item.home-link2_color_quaternary.home-link2_hover_tertiary[aria-label="EUR ЦБ 90,01" href="https://ya.ru/search/?lr=146&search_source=ya_morda_stocks&text=EUR+%D0%A6%D0%91&wiz=finance"]: + - span "EUR 90,01" + - div.informers3__stocks-item-wrapper: + - a.home-link2.informers3__stocks-item.home-link2_color_quaternary.home-link2_hover_tertiary[aria-label="YDEX 3998,50" href="https://ya.ru/search/?lr=146&search_source=ya_morda_stocks&text=YDEX&wiz=finance"]: + - span "YDEX 3998,50" + - a.home-link2.informers3__geo.home-link2_color_quaternary.home-link2_hover_tertiary[aria-label="Ваш город определён как Симферополь" href="https://ya.ru/tune/geo?retpath=https%3A%2F%2Fya.ru%2F%3Fnr%3D1%26redirect_ts%3D1749915681.00000&nosy..."] "Симферополь" + - div.main-home-banner: + - div[@hidden]: + - div.main-home-banner__content.banner-tgo.banner-tgo_title_m: + - div.banner-tgo__content: + - div.banner-tgo__title "Простой переход на Яндекс Браузер" + - div.banner-tgo__subtitle: + - div.banner-tgo__domain "yandex.ru" + - span.home-link2.banner-tgo__mark "Реклама • 0+" + - a.home-link2.banner-tgo__link[aria-label="Простой переход на Яндекс Браузер" href=https://yandex.ru/an/count/WgyejI_zOoVX2Lci0WqL00Eca4kmIQS4p0bKyOO9wCsxD-yN0juA2EWchcZT7ALIUK0NwFEvt...] + - div.direct-close-block.direct-close-block_state_idle.direct-close-block_tgo: + - button.direct-close-block__close-button.direct-close-block__close-button_idle[aria-label="Действия с рекламой"]: + - div.direct-close-block__close-icon: + - svg + - div.ladybug: + - span.home-link2.ladybug__item.ladybug__butterfly#butterfly: + - div#butterfly-button: + - div: + - div.YndxBug.Bug__container1k5BDO.Bug__container_position_left35lf2v: + - div.YndxBug-Icon.Bug__icon3lvpsr: + - svg[@hidden] + - div[@hidden]: + - div.page-info[@hidden] "{\"static\":\"2025-06-11-855\",\"content\":\"big\",\"domain\":\"ru\",\"nodeVersion\":\"v22.10.0\"}" + - span#requestId[@hidden] "1749915681851623-7074561989186018597-balancer-l7leveler-kubr-yp-vla-119-BAL" +``` diff --git a/docs/testplane-mcp.mdx b/docs/testplane-mcp.mdx new file mode 100644 index 0000000..bc2e034 --- /dev/null +++ b/docs/testplane-mcp.mdx @@ -0,0 +1,185 @@ +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import SnapshotExample from "/docs/_partials/mcp-snapshot-example.mdx"; +import investigateVideoUrl from "/video/blog/mcp/investigate.mp4"; +import generateVideoUrl from "/video/blog/mcp/generate.mp4"; + +# Testplane MCP + +**Testplane MCP** — a project that allows AI agents to interact with browsers in real-time, analyze page states, and generate tests based on actual DOM structure. + +## Capabilities + +### Enhanced test generation + +AI agents can open pages in browsers, analyze their layout, and perform actions (clicks, form filling) during test writing. This enables generating tests with correct selectors that actually exist on the page. + +### Browser process automation + +Testplane MCP enables automating repetitive tasks, such as extracting information from payment receipt images and then filling out forms on web pages. + +## Installation + +Run the server from the `@testplane/mcp` package: + +```shell +npx @testplane/mcp@next +``` + +Use the `@latest` tag for stable versions, `@next` for experimental ones. + +### Environment setup + + + + Open Cursor settings, in the `MCP` section click `Add new global MCP server` and add the configuration: + + ```json + { + "mcpServers": { + "testplane-mcp": { + "command": "npx", + "args": ["@testplane/mcp@next"] + } + } + } + ``` + + + + 1. Install the [Cline extension](https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev) + 2. Go to the "MCP" tab and click "Configure MCP Servers" + 3. Add the configuration: + ```json + { + "mcpServers": { + "testplane-mcp": { + "command": "npx", + "args": ["@testplane/mcp@next"] + } + } + } + ``` + + + + In VS Code settings, search for `MCP`, click `Edit in settings.json` and add: + + ```json + { + "mcp": { + "inputs": [], + "servers": { + "testplane-mcp": { + "command": "npx", + "args": ["@testplane/mcp@next"] + } + } + } + } + ``` + + + + Open settings according to the [official documentation](https://modelcontextprotocol.io/quickstart/user) and add: + + ```json + { + "mcpServers": { + "testplane-mcp": { + "command": "npx", + "args": ["@testplane/mcp@next"] + } + } + } + ``` + + + + Follow the [official documentation](https://docs.windsurf.com/windsurf/cascade/mcp) and add the configuration: + + ```json + { + "mcpServers": { + "testplane-mcp": { + "command": "npx", + "args": ["@testplane/mcp@next"] + } + } + } + ``` + + + + According to the [official documentation](https://www.jetbrains.com/help/ai-assistant/configure-an-mcp-server.html) add: + + ```json + { + "mcpServers": { + "testplane-mcp": { + "command": "npx", + "args": ["@testplane/mcp@next"] + } + } + } + ``` + + + + +## Usage + +Let's consider the case of developing an online bookstore. Imagine we have a new feature — displaying book ratings and we want to generate tests for this feature. + +First, let's ask the AI agent to analyze the page and create a testing plan. + + + +
+ +Now let's try to generate tests and run them. + + + +
+ +As we can see, the AI agent generated tests on the first try that pass and contain correct selectors. + +You can try this prompt for generating tests using Testplane MCP: + +> Use testplane mcp to open the page `https://ya.ru`, perform a search for "cats", and verify that search results are displayed. +> +> Don't write unnecessary comments in tests, except for complex edge cases. Write tests following the project's style guide. +> +> Try to use semantic selectors, for example, by `data-testid` attributes or element text instead of complex CSS selectors. + +## Implementation Details + +### Compact snapshots + +Testplane MCP creates compact page snapshots instead of using screenshots, which significantly saves LLM API tokens. + +**Example:** the full source code of `https://ya.ru` contains ~260,000 characters, while a compact snapshot contains only ~9,000. + +
+ Snapshot example + + + +
+ +### Ecosystem integration + +Each server response contains the executed code, allowing the AI agent to embed it into generated tests, ensuring seamless integration with the Testplane ecosystem. + +## Links + +- [Release Notes](https://github.com/gemini-testing/testplane-mcp/releases) +- [GitHub Issues](https://github.com/gemini-testing/testplane-mcp/issues) +- [Telegram chat](https://t.me/testplane) diff --git a/i18n/en/docusaurus-plugin-content-blog/mcp-release.mdx b/i18n/en/docusaurus-plugin-content-blog/mcp-release.mdx new file mode 100644 index 0000000..7e2c916 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-blog/mcp-release.mdx @@ -0,0 +1,199 @@ +--- +title: Testplane MCP +slug: mcp-release +hide_table_of_contents: false +date: 2025-06-16T17:00 +--- + +import Admonition from "@theme/Admonition"; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import SnapshotExample from "/docs/_partials/mcp-snapshot-example.mdx"; +import investigateVideoUrl from "/video/blog/mcp/investigate.mp4"; +import generateVideoUrl from "/video/blog/mcp/generate.mp4"; + +We're excited to present Testplane MCP — a project that allows AI agents to be aware of what's happening in the browser, perform actions, and generate tests based on the real state of the page. + +![](/img/blog/mcp/cover.png) + +{/* truncate */} + +## What capabilities does Testplane MCP unlock? + +### Significant improvement in test generation + +Imagine you've added new functionality to your application and now want to generate tests for it using an AI agent. Previously, an AI agent could only guess what this page looks like — the selectors would likely be fictional, and the test would require serious edits. + +Testplane MCP takes this process to a new level: while writing tests, the AI agent can open the required page in a browser, look at its layout, or perform any actions (such as clicking a button or filling out a form). + +As a result, the AI agent can generate tests with full context of what's happening in the browser — including selectors that actually exist on the page. + +### Browser usage by AI agents + +Testplane MCP makes it possible to automate repetitive processes. For example, you can build a workflow to extract information from receipt photos, then use Testplane MCP to access your organization's management panel and fill out report forms with the corresponding information (item names, quantities, prices, etc.). + +## Installation + +You need to run the server from the `@testplane/mcp` package. For bleeding-edge builds use the `@next` tag, for stable ones use `@latest`: + +```shell +npx @testplane/mcp@next +``` + +Installation depends on the environment where Testplane MCP will be used. + + + + Open Cursor settings (button in the top right corner of the IDE), in the `MCP` section click on the `Add new global MCP server` button, add Testplane MCP to the config as in the example below. + + ```json + { + "mcpServers": { + "testplane-mcp": { + "command": "npx", + "args": ["@testplane/mcp@next"] + } + } + } + ``` + + + + 1. Install the [Cline extension](https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev). + 2. On the extension tab, you need to go to the "MCP" tab and click "Configure MCP Servers". + ![](/img/blog/mcp/cline-setup.png) + 3. Add Testplane MCP to the config as in the example below. + ```json + { + "mcpServers": { + "testplane-mcp": { + "command": "npx", + "args": ["@testplane/mcp@next"] + } + } + } + ``` + + + + Open VS Code settings, search for `MCP`, click on `Edit in settings.json`, add Testplane MCP to the config as in the example below. + + ```json + { + "mcp": { + "inputs": [], + "servers": { + "testplane-mcp": { + "command": "npx", + "args": ["@testplane/mcp@next"] + } + } + } + } + ``` + + + + Open settings [as shown in the official documentation](https://modelcontextprotocol.io/quickstart/user), add Testplane MCP to the config as in the example below. + + ```json + { + "mcpServers": { + "testplane-mcp": { + "command": "npx", + "args": ["@testplane/mcp@next"] + } + } + } + ``` + + + + Open settings [as shown in the official documentation](https://docs.windsurf.com/windsurf/cascade/mcp), add Testplane MCP to the config as in the example below. + + ```json + { + "mcpServers": { + "testplane-mcp": { + "command": "npx", + "args": ["@testplane/mcp@next"] + } + } + } + ``` + + + + Open settings [as shown in the official documentation](https://www.jetbrains.com/help/ai-assistant/configure-an-mcp-server.html), add Testplane MCP to the config as in the example below. + + ```json + { + "mcpServers": { + "testplane-mcp": { + "command": "npx", + "args": ["@testplane/mcp@next"] + } + } + } + ``` + + + + +After installation, the AI agent will be able to use Testplane MCP. You can directly mention this in the prompt: "Use testplane mcp to open the page ...". + +## Usage + +Let's consider the case of developing an online bookstore. Imagine we have a new feature — displaying book ratings and we want to generate tests for this feature. + +First, let's ask the AI agent to analyze the page and create a testing plan. + + + +
+ +Now let's try to generate tests and run them. + + + +
+ +As we can see, the AI agent generated tests on the first try that pass and contain correct selectors. + +You can try this prompt for generating tests using Testplane MCP: + +> Use testplane mcp to open the page `https://ya.ru`, perform a search for "cats", and verify that search results are displayed. +> +> Don't write unnecessary comments in tests, except for complex edge cases. Write tests following the project's style guide. +> +> Try to use semantic selectors, for example, by `data-testid` attributes or element text instead of complex CSS selectors. + +## Implementation Details + +Testplane MCP is not the only implementation that enables AI agent interaction with browsers. + +Currently, Testplane MCP provides the following advantages: + +- Very compact and flexible page snapshots, models don't need to work with screenshots. This significantly saves LLM API token usage. + + As an example — the full source code of `https://ya.ru` takes ~260,000 characters, while a compact snapshot takes only ~9,000. + +
+ + Snapshot example + + + +
+ +- Seamless integration with the Testplane ecosystem, which will only improve in the future. For example, each server response contains the code that was executed, so the model can embed it into tests. + +Follow new releases in our blog and in the [Release Notes section on GitHub](https://github.com/gemini-testing/testplane-mcp/releases), and if you encounter any issues, come to [GitHub issues][gh-issues] or our [Telegram chat](https://t.me/testplane) — we'll definitely help you! + +[gh-issues]: https://github.com/gemini-testing/testplane-mcp/issues diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/testplane-mcp.mdx b/i18n/ru/docusaurus-plugin-content-docs/current/testplane-mcp.mdx new file mode 100644 index 0000000..4e297cf --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/testplane-mcp.mdx @@ -0,0 +1,185 @@ +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import SnapshotExample from "/docs/_partials/mcp-snapshot-example.mdx"; +import investigateVideoUrl from "/video/blog/mcp/investigate.mp4"; +import generateVideoUrl from "/video/blog/mcp/generate.mp4"; + +# Testplane MCP + +**Testplane MCP** — проект, который позволяет AI-агентам взаимодействовать с браузером в реальном времени, анализировать состояние страниц и генерировать тесты на основе актуальной DOM-структуры. + +## Возможности + +### Улучшенная генерация тестов + +AI-агент может открывать страницы в браузере, анализировать их верстку и выполнять действия (клики, заполнение форм) во время написания тестов. Это позволяет генерировать тесты с корректными селекторами, которые действительно существуют на странице. + +### Автоматизация браузерных процессов + +Testplane MCP позволяет автоматизировать повторяющиеся задачи, например, извлечение информации из изображений платежных чеков с последующим заполнением форм на веб-страницах. + +## Установка + +Запустите сервер из пакета `@testplane/mcp`: + +```shell +npx @testplane/mcp@next +``` + +Для стабильных версий используйте тег `@latest`, для экспериментальных — `@next`. + +### Настройка среды + + + + Откройте настройки Cursor, в секции `MCP` нажмите `Add new global MCP server` и добавьте конфигурацию: + + ```json + { + "mcpServers": { + "testplane-mcp": { + "command": "npx", + "args": ["@testplane/mcp@next"] + } + } + } + ``` + + + + 1. Установите [расширение Cline](https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev) + 2. Перейдите на вкладку "MCP" и нажмите "Configure MCP Servers" + 3. Добавьте конфигурацию: + ```json + { + "mcpServers": { + "testplane-mcp": { + "command": "npx", + "args": ["@testplane/mcp@next"] + } + } + } + ``` + + + + В настройках VS Code найдите `MCP`, нажмите `Edit in settings.json` и добавьте: + + ```json + { + "mcp": { + "inputs": [], + "servers": { + "testplane-mcp": { + "command": "npx", + "args": ["@testplane/mcp@next"] + } + } + } + } + ``` + + + + Откройте настройки согласно [официальной документации](https://modelcontextprotocol.io/quickstart/user) и добавьте: + + ```json + { + "mcpServers": { + "testplane-mcp": { + "command": "npx", + "args": ["@testplane/mcp@next"] + } + } + } + ``` + + + + Следуйте [официальной документации](https://docs.windsurf.com/windsurf/cascade/mcp) и добавьте конфигурацию: + + ```json + { + "mcpServers": { + "testplane-mcp": { + "command": "npx", + "args": ["@testplane/mcp@next"] + } + } + } + ``` + + + + Согласно [официальной документации](https://www.jetbrains.com/help/ai-assistant/configure-an-mcp-server.html) добавьте: + + ```json + { + "mcpServers": { + "testplane-mcp": { + "command": "npx", + "args": ["@testplane/mcp@next"] + } + } + } + ``` + + + + +## Использование + +Рассмотрим кейс разработки интернет-магазина книг. Представим, что у нас появилась новая фича — отображение оценок книг и мы хотим сгенерировать тесты на эту фичу. + +Сначала попросим AI-агента проанализировать страницу и составить план тестирования. + + + +
+ +Теперь попробуем сгенерировать тесты и запустить их. + + + +
+ +Как мы видим, AI-агент с первого раза сгенерировал тесты, которые проходят и содержат корректные селекторы. + +Вы можете попробовать такой промпт для генерации тестов с использованием Testplane MCP: + +> Используй testplane mcp, чтобы открыть страницу `https://ya.ru`, выполни поиск по запросу "котики", проверь, что результаты поиска отображаются. +> +> Не пиши лишние комментарии в тестах, кроме сложных краевых случаев. Пиши тесты в соответствии со стилем проекта. +> +> Старайся использовать семантические селекторы, например, по атрибутам `data-testid` или тексту элемента вместо сложных CSS-селекторов. + +## Особенности реализации + +### Компактные снапшоты + +Testplane MCP создает компактные снапшоты страниц вместо использования скриншотов, что значительно экономит токены LLM API. + +**Пример:** полный исходный код `https://ya.ru` содержит ~260,000 символов, тогда как компактный снапшот — только ~9,000. + +
+ Пример снапшота + + + +
+ +### Интеграция с экосистемой + +Каждый ответ сервера содержит исполненный код, что позволяет AI-агенту встраивать его в генерируемые тесты, обеспечивая бесшовную интеграцию с экосистемой Testplane. + +## Ссылки + +- [Release Notes](https://github.com/gemini-testing/testplane-mcp/releases) +- [GitHub Issues](https://github.com/gemini-testing/testplane-mcp/issues) +- [Telegram чат](https://t.me/testplane) diff --git a/sidebars.ts b/sidebars.ts index 563d322..4c81b30 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -13,6 +13,11 @@ const sidebars: SidebarsConfig = { id: "command-line/index", label: "CLI", }, + { + type: "doc", + id: "testplane-mcp", + label: "Testplane MCP", + }, { type: "category", label: "Commands", diff --git a/static/img/blog/mcp/cline-setup.png b/static/img/blog/mcp/cline-setup.png new file mode 100644 index 0000000..7fd8aef Binary files /dev/null and b/static/img/blog/mcp/cline-setup.png differ diff --git a/static/img/blog/mcp/cover.png b/static/img/blog/mcp/cover.png new file mode 100644 index 0000000..fa5f4b6 Binary files /dev/null and b/static/img/blog/mcp/cover.png differ diff --git a/static/video/blog/mcp/generate.mp4 b/static/video/blog/mcp/generate.mp4 new file mode 100644 index 0000000..5dd4f97 Binary files /dev/null and b/static/video/blog/mcp/generate.mp4 differ diff --git a/static/video/blog/mcp/investigate.mp4 b/static/video/blog/mcp/investigate.mp4 new file mode 100644 index 0000000..6cf7789 Binary files /dev/null and b/static/video/blog/mcp/investigate.mp4 differ