Skip to content

Commit 386b083

Browse files
shadowusrshadowusr
authored
docs: write a blog post about testplane mcp (#75)
* docs: write a blog post about testplane mcp * docs: fix tg broken link * fix: fix review issues, fix videos and add docs pages
1 parent d097a8b commit 386b083

File tree

10 files changed

+888
-0
lines changed

10 files changed

+888
-0
lines changed

‎blog/mcp-release.mdx

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
---
2+
title: Testplane MCP
3+
slug: mcp-release
4+
hide_table_of_contents: false
5+
date: 2025-06-16T17:00
6+
---
7+
8+
import Admonition from "@theme/Admonition";
9+
import Tabs from "@theme/Tabs";
10+
import TabItem from "@theme/TabItem";
11+
import SnapshotExample from "/docs/_partials/mcp-snapshot-example.mdx";
12+
import investigateVideoUrl from "/video/blog/mcp/investigate.mp4";
13+
import generateVideoUrl from "/video/blog/mcp/generate.mp4";
14+
15+
Рады представить Testplane MCP — проект, который позволяет AI-агентам быть в контексте происходящего в браузере, совершать действия и генерировать тесты с учетом реального состояния страницы.
16+
17+
![](/img/blog/mcp/cover.png)
18+
19+
{/* truncate */}
20+
21+
## Какие возможности открывает Testplane MCP?
22+
23+
### Значительное улучшение генерации тестов
24+
25+
Представим, что мы добавили в приложение новую функциональность и теперь хотим сгенерировать тесты на неё с помощью AI-агента. Ранее, AI-агент мог лишь предположить как выглядит эта страница — селекторы, скорее всего, получились бы вымышленными, и тест требовал бы серьезных правок.
26+
27+
Testplane MCP выводит этот процесс на новый уровень: AI-агент во время написания теста может открыть нужную страницу в браузере, посмотреть на её верстку или выполнить любые действия (например, нажать на кнопку или заполнить форму).
28+
29+
В результате AI-агент может сгенерировать тест имея полный контекст происходящего в браузере — включая селекторы, которые действительно есть на странице.
30+
31+
### Использование браузера AI-агентами
32+
33+
Testplane MCP делает возможным автоматизировать повторяющиеся процессы. Например, можно построить воркфлоу для извлечения информации из фото чеков, после чего с помощью Testplane MCP заходить на панель управления своей организации и заполнять форму отчета с соответствующей информацией (наименование, количество, цена и т.д.).
34+
35+
## Установка
36+
37+
Необходимо запустить сервер из пакета `@testplane/mcp`. Для bleeding-edge сборок используйте тег `@next`, для стабильных — `@latest`:
38+
39+
```shell
40+
npx @testplane/mcp@next
41+
```
42+
43+
Установка зависит от среды, в которой будет использоваться Testplane MCP.
44+
45+
<Tabs>
46+
<TabItem value="cursor" label="Cursor">
47+
Откройте настройки Cursor (кнопка в правом верхнем углу IDE), в секции `MCP` нажмите на кнопку `Add new global MCP server`, добавьте в конфиг Testplane MCP как в примере ниже.
48+
49+
```json
50+
{
51+
"mcpServers": {
52+
"testplane-mcp": {
53+
"command": "npx",
54+
"args": ["@testplane/mcp@next"]
55+
}
56+
}
57+
}
58+
```
59+
</TabItem>
60+
61+
<TabItem value="cline" label="VS Code + Cline">
62+
1. Установите [расширение Cline](https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev).
63+
2. На вкладке расширения необходимо перейти на вкладу "MCP" и нажать "Configure MCP Servers".
64+
![](/img/blog/mcp/cline-setup.png)
65+
3. Добавьте в конфиг Testplane MCP как в примере ниже.
66+
```json
67+
{
68+
"mcpServers": {
69+
"testplane-mcp": {
70+
"command": "npx",
71+
"args": ["@testplane/mcp@next"]
72+
}
73+
}
74+
}
75+
```
76+
</TabItem>
77+
78+
<TabItem value="copilot" label="VS Code + Copilot">
79+
Откройте настройки VS Code, введите в поиск `MCP`, нажмите на `Edit in settings.json`, добавьте в конфиг Testplane MCP как в примере ниже.
80+
81+
```json
82+
{
83+
"mcp": {
84+
"inputs": [],
85+
"servers": {
86+
"testplane-mcp": {
87+
"command": "npx",
88+
"args": ["@testplane/mcp@next"]
89+
}
90+
}
91+
}
92+
}
93+
```
94+
</TabItem>
95+
96+
<TabItem value="claude" label="Claude Desktop">
97+
Откройте настройки [как показано в оф. документации](https://modelcontextprotocol.io/quickstart/user), добавьте в конфиг Testplane MCP как в примере ниже.
98+
99+
```json
100+
{
101+
"mcpServers": {
102+
"testplane-mcp": {
103+
"command": "npx",
104+
"args": ["@testplane/mcp@next"]
105+
}
106+
}
107+
}
108+
```
109+
</TabItem>
110+
111+
<TabItem value="windsurf" label="Windsurf">
112+
Откройте настройки [как показано в оф. документации](https://docs.windsurf.com/windsurf/cascade/mcp), добавьте в конфиг Testplane MCP как в примере ниже.
113+
114+
```json
115+
{
116+
"mcpServers": {
117+
"testplane-mcp": {
118+
"command": "npx",
119+
"args": ["@testplane/mcp@next"]
120+
}
121+
}
122+
}
123+
```
124+
</TabItem>
125+
126+
<TabItem value="jetbrains" label="Jetbrains">
127+
Откройте настройки [как показано в оф. документации](https://www.jetbrains.com/help/ai-assistant/configure-an-mcp-server.html), добавьте в конфиг Testplane MCP как в примере ниже.
128+
129+
```json
130+
{
131+
"mcpServers": {
132+
"testplane-mcp": {
133+
"command": "npx",
134+
"args": ["@testplane/mcp@next"]
135+
}
136+
}
137+
}
138+
```
139+
</TabItem>
140+
141+
</Tabs>
142+
143+
После установки AI-агент сможет использовать Testplane MCP, можно прямо указать на это в промпте: "Используй testplane mcp, чтобы открыть страницу ...".
144+
145+
## Использование
146+
147+
Рассмотрим кейс разработки интернет-магазина книг. Представим, что у нас появилась новая фича — отображение оценок книг и мы хотим сгенерировать тесты на эту фичу.
148+
149+
Сначала попросим AI-агента проанализировать страницу и составить план тестирования.
150+
151+
<video src={investigateVideoUrl} width="100%" controls="controls">
152+
Тег video не поддерживается вашим браузером.
153+
<a href="video/blog/mcp/investigate.mp4">Скачайте видео</a>.
154+
</video>
155+
156+
<br />
157+
158+
Теперь попробуем сгенерировать тесты и запустить их.
159+
160+
<video src={generateVideoUrl} width="100%" controls="controls">
161+
Тег video не поддерживается вашим браузером.
162+
<a href="video/blog/mcp/generate.mp4">Скачайте видео</a>.
163+
</video>
164+
165+
<br />
166+
167+
Как мы видим, AI-агент с первого раза сгенерировал тесты, которые проходят и содержат корректные селекторы.
168+
169+
Вы можете попробовать такой промпт для генерации тестов с использованием Testplane MCP:
170+
171+
> Используй testplane mcp, чтобы открыть страницу `https://ya.ru`, выполни поиск по запросу "котики", проверь, что результаты поиска отображаются.
172+
>
173+
> Не пиши лишние комментарии в тестах, кроме сложных краевых случаев. Пиши тесты в соответствии со стилем проекта.
174+
>
175+
> Старайся использовать семантические селекторы, например, по атрибутам `data-testid` или тексту элемента вместо сложных CSS-селекторов.
176+
177+
## Особенности реализации
178+
179+
Testplane MCP — не единственная реализация возможности взаимодействия AI-агента с браузером.
180+
181+
На данный момент Testplane MCP обеспечивает следующие преимущества:
182+
183+
- Очень компактные и гибкие снапшоты страниц, модели не нужно работать со скриншотами. Это значительная экономия токенов API LLM.
184+
185+
Как пример — полный исходник `https://ya.ru` занимает ~260,000 символов, а компактный снапшот — лишь ~9,000.
186+
187+
<details>
188+
189+
<summary>Пример снапшота</summary>
190+
191+
<SnapshotExample />
192+
193+
</details>
194+
195+
- Бесшовная интеграция с экосистемой Testplane, которая в будущем будет только улучшаться. Например, каждый ответ сервера содержит код, который был запущен, чтобы модель могла встроить его в тесты.
196+
197+
Следите за новыми релизами в нашем блоге и в разделе [Release Notes на GitHub](https://github.com/gemini-testing/testplane-mcp/releases), а в случае обнаружения проблем приходите в [issue GitHub][gh-issues] или наш [чат в Telegram](https://t.me/testplane) — мы вам обязательно поможем!
198+
199+
[gh-issues]: https://github.com/gemini-testing/testplane-mcp/issues

0 commit comments

Comments
 (0)