Skip to content

Commit 5cb333b

Browse files
Devansh013Devansh013
committed
new smartui and automation mcp server docs
1 parent cced054 commit 5cb333b

File tree

2 files changed

+355
-0
lines changed

2 files changed

+355
-0
lines changed

‎docs/automation-mcp-server.md‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
---
2+
id: automation-mcp-server
3+
title: Introducing Automation MCP Server
4+
hide_title: false
5+
sidebar_label: Automation MCP Server
6+
description: Simplify test failure triaging with Automation MCP Server on LambdaTest. Powered by Model Context Protocol (MCP), it connects AI assistants to your test data for faster, smarter debugging.
7+
8+
keywords:
9+
- automation testing
10+
- automation mcp server
11+
- automated testing
12+
- lambdatest
13+
- MCP
14+
- MCP server
15+
url: https://www.lambdatest.com/support/docs/automation-mcp-server
16+
site_name: LambdaTest
17+
slug: automation-mcp-server
18+
---
19+
20+
import CodeBlock from '@theme/CodeBlock';
21+
import {YOUR_LAMBDATEST_USERNAME, YOUR_LAMBDATEST_ACCESS_KEY} from "@site/src/component/keys";
22+
23+
<script type="application/ld+json"
24+
dangerouslySetInnerHTML={{ __html: JSON.stringify({
25+
"@context": "https://schema.org",
26+
"@type": "BreadcrumbList",
27+
"itemListElement": [{
28+
"@type": "ListItem",
29+
"position": 1,
30+
"name": "Home",
31+
"item": "https://www.lambdatest.com"
32+
},{
33+
"@type": "ListItem",
34+
"position": 2,
35+
"name": "Support",
36+
"item": "https://www.lambdatest.com/support/docs/"
37+
},{
38+
"@type": "ListItem",
39+
"position": 3,
40+
"name": "Languages and Framework",
41+
"item": "https://www.lambdatest.com/support/docs/automation-mcp-server"
42+
}]
43+
})
44+
}}
45+
></script>
46+
47+
# Getting Started with Automation MCP Server
48+
Automation MCP Server simplifies test failure triaging for all automation test cases executed on LambdaTest. By leveraging the Model Context Protocol (MCP), it enables seamless integration between AI assistants and your test execution data on LambdaTest—significantly reducing triage and troubleshooting time.
49+
50+
51+
<!-- Get a comprehensive overview of HyperExecute's capabilities by watching our introductory video.
52+
53+
<div className="ytframe">
54+
<div className="youtube" data-embed="tLe5VPcGDxs">
55+
<div className="play-button"></div>
56+
</div>
57+
</div> -->
58+
59+
## What is Model Context Protocol (MCP)?
60+
The Model Context Protocol (MCP) acts like a “USB-C for AI integrations,” creating a universal language between AI models and applications. This standardized interface allows AI assistants to connect with diverse software tools, making it much easier to expand capabilities across your digital workflow.
61+
62+
## Key Benefits of Automation MCP Server
63+
64+
Here are the key benefits of using the Automation MCP Server:
65+
66+
1. Access your test execution data on LambdaTest directly from your IDE/editor.
67+
2. Triage and troubleshoot test failures to identify the root cause (RCA).
68+
3. Fix your test code based on the RCA and accelerate your development.
69+
4. Generate new test cases using execution data from LambdaTest.
70+
5. Leverage network logs, Selenium logs, and console logs to pinpoint bottlenecks and failures.
71+
72+
## Connecting to SmartUI MCP Server​
73+
74+
### Connecting with Cline
75+
76+
Cline (The Collaborative AI Coder) is an advanced, AI-powered coding assistant that integrates seamlessly into your development workflow. It provides intelligent code suggestions and documentation help—and now, with MCP support, it can interface with tools like LambdaTest Automation MCP to enhance your testing capabilities.
77+
78+
Cline allows natural language interaction with your codebase—just describe what you want, instead of manually configuring it.
79+
80+
#### Installing Cline in VS Code:
81+
82+
**Step 1:** Open VS Code.<br />
83+
**Step 2:** Click on the Extensions icon in the Activity Bar on the side of the window (or press `Ctrl+Shift+X`).<br />
84+
**Step 3:** Search for **Cline** in the Extensions Marketplace.
85+
86+
<img loading="lazy" src={require('../assets/images/hyperexecute-mcp/installing-cline.webp').default} alt="automation-dashboard" width="1920" height="868" className="doc_img"/>
87+
88+
**Step 4:** Click **Install** on the Cline – The Collaborative AI Coder extension.<br />
89+
**Step 5:** Once installed, you'll see the Cline icon in your VS Code sidebar.<br />
90+
**Step 6:** Click on the Cline icon to open the Cline panel.<br />
91+
**Step 7:** Complete any authentication steps required during first-time setup.
92+
93+
### Interacting with Automation MCP Server
94+
95+
Once connected, you can begin using Cline to interact with the Automation MCP Server. A typical workflow:
96+
97+
**Step 1:** Open your project in VS Code.
98+
**Step 2:** Open the Cline panel.
99+
**Step 3:** Type the following prompt:
100+
101+
> “Analyze the LambdaTest TestID. Review the command logs, network logs, and console logs to identify the cause of the test failure. Suggest a code fix based on your findings.”
102+
103+
**Step 4:** Cline will:
104+
105+
- Pull command, network, and console logs from the LambdaTest cloud.
106+
- Identify your testing framework and test code.
107+
- Investigate the cause of failure and share the RCA.
108+
- Create change requests/suggestions in the code to fix the failure or enhance error handling.
109+
- Save the code changes to your project directory.
110+
111+
**Step 5:** Review the suggested changes and make any final adjustments before re-running your tests on the LambdaTest platform.
112+
113+
You can also ask Cline more specific questions like:
114+
115+
- *"What are the possible causes of failure, and what else can be done to mitigate them?"*
116+
- *"What does the suggested code change do?"*
117+
118+
Cline’s natural language interface allows you to work on triaging and debugging Selenium tests directly alongside your code—highlighting the specific sections responsible for the failure.
119+
120+
121+
## Supported Tools
122+
123+
Automation MCP Server provides five core tools:
124+
125+
1. **Automation Test Details:** Fetches detailed information about a specific TestID from the LambdaTest cloud.
126+
2. **Automation Command Logs:** Retrieves execution logs for Selenium commands run on LambdaTest.
127+
3. **Automation Network Logs:** Accesses test network logs, offering insights into browser traffic and behavior.
128+
4. **Automation Console Logs:** Fetches browser console logs, surfacing error-level messages and warnings.
129+
5. **Automation MCP Server:** Core interface that powers the above tools and connects your AI assistant to LambdaTest data.
130+
131+
132+
<nav aria-label="breadcrumbs">
133+
<ul className="breadcrumbs">
134+
<li className="breadcrumbs__item">
135+
<a className="breadcrumbs__link" href="https://www.lambdatest.com">
136+
Home
137+
</a>
138+
</li>
139+
<li className="breadcrumbs__item">
140+
<a className="breadcrumbs__link" target="_self" href="https://www.lambdatest.com/support/docs/">
141+
Support
142+
</a>
143+
</li>
144+
<li className="breadcrumbs__item breadcrumbs__item--active">
145+
<span className="breadcrumbs__link">
146+
Automation MCP Server
147+
</span>
148+
</li>
149+
</ul>
150+
</nav>

‎docs/smartui-mcp-server.md‎

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
---
2+
id: smartui-mcp-server
3+
title: Introducing SmartUI MCP Server
4+
hide_title: false
5+
sidebar_label: SmartUI MCP Server
6+
description: Debug visual regressions faster with SmartUI MCP Server—get natural-language insights, human-like summaries, visual change detection, and root cause analysis from SmartUI comparison runs.
7+
keywords:
8+
- smartui
9+
- visual testing
10+
- visual regression testing
11+
- lambdatest
12+
- MCP
13+
- MCP server
14+
url: https://www.lambdatest.com/support/docs/smartui-mcp-server
15+
site_name: LambdaTest
16+
slug: smartui-mcp-server
17+
---
18+
19+
import CodeBlock from '@theme/CodeBlock';
20+
import {YOUR_LAMBDATEST_USERNAME, YOUR_LAMBDATEST_ACCESS_KEY} from "@site/src/component/keys";
21+
22+
<script type="application/ld+json"
23+
dangerouslySetInnerHTML={{ __html: JSON.stringify({
24+
"@context": "https://schema.org",
25+
"@type": "BreadcrumbList",
26+
"itemListElement": [{
27+
"@type": "ListItem",
28+
"position": 1,
29+
"name": "Home",
30+
"item": "https://www.lambdatest.com"
31+
},{
32+
"@type": "ListItem",
33+
"position": 2,
34+
"name": "Support",
35+
"item": "https://www.lambdatest.com/support/docs/"
36+
},{
37+
"@type": "ListItem",
38+
"position": 3,
39+
"name": "Languages and Framework",
40+
"item": "https://www.lambdatest.com/support/docs/smartui-mcp-server"
41+
}]
42+
})
43+
}}
44+
></script>
45+
46+
# Getting Started with SmartUI MCP Server
47+
The SmartUI MCP Server allows you to debug visual regressions using SmartUI comparison runs, returning natural-language insights such as human-like summaries, visual change detection, and root cause analysis. It is built on [Model Context Protocol (MCP)](https://modelcontextprotocol.io/) and connects to the LambdaTest SmartUI infrastructure via `comparisonId`.
48+
49+
50+
<!-- Get a comprehensive overview of HyperExecute's capabilities by watching our introductory video.
51+
52+
<div className="ytframe">
53+
<div className="youtube" data-embed="tLe5VPcGDxs">
54+
<div className="play-button"></div>
55+
</div>
56+
</div> -->
57+
58+
## How Does It Work?​
59+
60+
This MCP server processes SmartUI visual comparison data by calling specific analysis tools with a comparisonId. Each tool simulates a different debugging layer—pixel diff, layout, DOM structure, and human perception.
61+
62+
The server fetches the visual assets (screenshots, DOM snapshots, metadata) and returns natural-language outputs such as:
63+
64+
- "The CTA button lost color contrast, impacting accessibility."
65+
66+
- "Header layout shifted left due to padding changes."
67+
68+
## Key Benefits of SmartUI MCP Server
69+
70+
Here are the key benefits of using the SmartUI MCP Server:
71+
72+
- **No Manual Debugging:** Automatically detects visual regressions and UI layout shifts from screenshots and DOM changes.
73+
- **Human-Like Interpretation:** Simulates how a real user perceives visual changes using cognitive and Gestalt principles.
74+
- **Context-Aware Fixes:** Suggests accurate UI fixes based on visual evidence (React, HTML, CSS).
75+
- **Rapid RCA:** Identifies exact UI elements responsible for changes and provides the root cause in plain language.
76+
- **Layered Visual Analysis:** Run independent or combined analysis: pixel-level, layout, DOM structure, and perceptual.
77+
- **MCP-Native Integration:** Seamlessly works with LambdaTest’s MCP-enabled environments and SmartUI workflows.
78+
- **Developer-Ready Summaries:** Outputs are designed for frontend teams—easy to read, act, and commit to code.
79+
80+
## Prerequisites
81+
82+
To use the SmartUI MCP Server:
83+
84+
1. Run SmartUI visual tests via LambdaTest and obtain the comparisonId.
85+
2. Use an MCP-compatible client (e.g., cline) to call the tools.
86+
87+
## Connecting to SmartUI MCP Server​
88+
89+
### Connecting with Cline
90+
91+
Cline (The Collaborative AI Coder) is an advanced AI-powered coding assistant that integrates directly into your development workflow. It provides intelligent code suggestions and documentation assistance, and now, with MCP support, you can interface with external tools like SmartUI to enhance your testing capabilities. Cline offers natural language interactions with your codebase, allowing you to simply describe what you need rather than manually configuring everything.
92+
93+
#### Installing Cline in VS Code:
94+
95+
**Step 1:** Open VS Code.<br />
96+
**Step 2:** Click on the Extensions icon in the Activity Bar on the side of the window (or press `Ctrl+Shift+X`).<br />
97+
**Step 3:** Search for **Cline** in the Extensions Marketplace.
98+
99+
<img loading="lazy" src={require('../assets/images/hyperexecute-mcp/installing-cline.webp').default} alt="automation-dashboard" width="1920" height="868" className="doc_img"/>
100+
101+
**Step 4:** Click **Install** on the Cline – The Collaborative AI Coder extension.<br />
102+
**Step 5:** Once installed, you'll see the Cline icon in your VS Code sidebar.<br />
103+
**Step 6:** Click on the Cline icon to open the Cline panel.<br />
104+
**Step 7:** Complete any authentication steps required during first-time setup.
105+
106+
### Connecting Cline to HyperExecute MCP Server
107+
108+
#### VS Code Configuration:
109+
110+
**Step 1:** In VS Code, click on the Cline icon in the sidebar to open the Cline panel.<br />
111+
**Step 2:** Under the **MCP Servers** section, click **Remote Servers**.
112+
<img loading="lazy" src={require('../assets/images/hyperexecute-mcp/vs-code-config.webp').default} alt="automation-dashboard" width="1920" height="868" className="doc_img"/>
113+
114+
**Step 3:** Add Server Name as **MCP-HyperExecute**.<br />
115+
**Step 4:** Enter the following URL in the server URL field: `http://mcp-api.lambdatest.com/automation?&username=[your-lt-username]&accessKey=[your-lt-access-key]` <br />
116+
**Step 5:** Replace [your-lt-username] and [your-lt-access-key] with your LambdaTest credentials. <br />
117+
**Step 6:** Click on **Add Server**.
118+
119+
120+
121+
## Supported Tools
122+
123+
The following tools return human-readable summaries and require only a comparisonId as input.
124+
125+
1. `getSmartUIResources`:
126+
127+
Fetches all assets for a SmartUI visual comparison run.
128+
129+
**Input:**
130+
```
131+
{
132+
"comparisonId": "string"
133+
}
134+
```
135+
136+
**Output:**
137+
138+
A human-friendly description of which assets were found (e.g., screenshots, DOM JSONs), and suggestions if any are missing.
139+
140+
2. `summarizePixelDiff`:
141+
142+
Summarizes raw pixel differences between baseline and current screenshots.
143+
144+
**Example Output:**
145+
146+
> "Significant pixel differences were detected in the hero banner and footer. These likely stem from background color changes and text shifts."
147+
148+
3. `summarizeLayoutDiff`:
149+
150+
Identifies spacing, alignment, and size-related layout issues.
151+
152+
**Example Output:**
153+
154+
> "The login button has moved 16px downward compared to the baseline. This affects the visual balance of the form."
155+
156+
4. `summarizeDomDiff`:
157+
158+
Describes what changed in the DOM structure and attributes.
159+
160+
**Example Output:**
161+
162+
> "The `aria-label` for the submit button has been removed. The button also now includes an extra `disabled` attribute."
163+
164+
5. `analyzeHumanDiff`:
165+
166+
Simulates how a human eye would perceive the change. Focuses on color, emphasis, and Gestalt principles.
167+
168+
**Example Output:**
169+
170+
> "The pricing table appears visually heavier due to a font weight increase. This disrupts the balance between sections."
171+
172+
6. `analyzeSmartUIRun`:
173+
174+
Runs a multi-layer analysis across pixel, layout, DOM, and perception layers. Best used when you want a full debugging summary.
175+
176+
**Example Output:**
177+
178+
> "The 'Subscribe' CTA lost its background color and dropped in emphasis. This is likely due to a CSS override on `.cta-btn`. Padding changes have also affected alignment. Suggest restoring background and resetting layout values."
179+
180+
## Error Handling
181+
182+
If the `comparisonId` is invalid or resources are missing, a message like the following will be returned:
183+
184+
> "Error analyzing SmartUI run: comparisonId not found or visual resources are incomplete."
185+
186+
187+
<nav aria-label="breadcrumbs">
188+
<ul className="breadcrumbs">
189+
<li className="breadcrumbs__item">
190+
<a className="breadcrumbs__link" href="https://www.lambdatest.com">
191+
Home
192+
</a>
193+
</li>
194+
<li className="breadcrumbs__item">
195+
<a className="breadcrumbs__link" target="_self" href="https://www.lambdatest.com/support/docs/">
196+
Support
197+
</a>
198+
</li>
199+
<li className="breadcrumbs__item breadcrumbs__item--active">
200+
<span className="breadcrumbs__link">
201+
SmartUI MCP Server
202+
</span>
203+
</li>
204+
</ul>
205+
</nav>

0 commit comments

Comments
 (0)