Skip to content

Commit 1cf051a

Browse files
pushkarbwpushkarbw
committed
Update README
1 parent 7673f5b commit 1cf051a

File tree

1 file changed

+145
-145
lines changed

1 file changed

+145
-145
lines changed

‎README.md‎

Lines changed: 145 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,10 @@ Manage, execute, debug tests, and even fix code using plain English prompts.
3535
#### Reduced context switching:
3636
Stay in flow—keep all project context in one place and trigger actions directly from your IDE or LLM.
3737

38+
### **One Click MCP Setup**
39+
40+
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install_Server-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](http://mcp.browserstack.com/one-click-setup?client=vscode)   [![Install in Cursor](https://img.shields.io/badge/Cursor-Install_Server-24bfa5?style=flat-square&color=000000&logo=visualstudiocode&logoColor=white)](http://mcp.browserstack.com/one-click-setup?client=cursor)
41+
3842
## 💡 Usage Examples
3943

4044
### 📱 Manual App Testing
@@ -136,7 +140,143 @@ Generate test cases from PRDs, convert manual tests to low-code automation, and
136140
```
137141
138142
143+
## 🛠️ Installation
144+
145+
### **One Click MCP Setup**
146+
147+
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install_Server-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](http://mcp.browserstack.com/one-click-setup?client=vscode)   [![Install in Cursor](https://img.shields.io/badge/Cursor-Install_Server-24bfa5?style=flat-square&color=000000&logo=visualstudiocode&logoColor=white)](http://mcp.browserstack.com/one-click-setup?client=cursor)
148+
149+
150+
### **Alternate ways to Setup MCP server**
151+
152+
1. **Create a BrowserStack Account**
153+
154+
- Sign up for [BrowserStack](https://www.browserstack.com/users/sign_up) if you don't have an account already.
155+
156+
- ℹ️ If you have an open-source project, we'll be able to provide you with a [free plan](https://www.browserstack.com/open-source).
157+
158+
159+
- Once you have an account (and purchased appropriate plan), note down your `username` and `access_key` from [Account Settings](https://www.browserstack.com/accounts/profile/details).
160+
161+
2. Ensure you are using Node version >= `18.0`. Check your node version using `node --version`. Recommended version: `v22.15.0` (LTS)
162+
163+
3. **Install the MCP Server**
164+
165+
- VSCode (Copilot - Agent Mode): `.vscode/mcp.json`:
166+
167+
- Locate or Create the Configuration File:
168+
In the root directory of your project, look for a folder named .vscode. This folder is usually hidden so you will need to find it as mentioned in the expand.
169+
170+
- If this folder doesn't exist, create it.
171+
172+
- Inside the .vscode folder, create a new file named mcp.json
173+
174+
- Add the Configuration: Open the mcp.json file and then add the following JSON content.
175+
176+
- Replace the username and <access_key> with your BrowserStack credentials.
177+
178+
```json
179+
{
180+
"servers": {
181+
"browserstack": {
182+
"command": "npx",
183+
"args": ["-y", "@browserstack/mcp-server@latest"],
184+
"env": {
185+
"BROWSERSTACK_USERNAME": "<username>",
186+
"BROWSERSTACK_ACCESS_KEY": "<access_key>"
187+
}
188+
}
189+
}
190+
}
191+
```
192+
193+
- In VSCode, make sure to click on `Start` button in the MCP Server to start the server.
194+
![Start MCP Server](assets/vscode_install.png)
195+
196+
197+
#### ** Alternate way to setup MCP on VSCode Copilot
198+
199+
1. Click on the gear icon to Select Tools
200+
<div align="center">
201+
<img src="assets/select_tools.png" alt="Select Tools" height="100">
202+
</div>
203+
2. A tool menu would appear at the top-centre, scroll down on the menu at the top and then Click on Add MCP Server
204+
<div align="center">
205+
<img src="assets/add_mcp_server.png" alt="Add MCP Server" height="100">
206+
</div>
207+
3. Select NPM package option (Install fron an NPM package) - 3rd in the list
208+
<div align="center">
209+
<img src="assets/select_npm_package.png" alt="Select NPM Package" height="100">
210+
</div>
211+
4. Enter NPM Package Name (@browserstack/mcp-server)
212+
<div align="center">
213+
<img src="assets/enter_npm_package.png" alt="Enter NPM Package" height="100">
214+
</div>
215+
5. Enter browserstack user name and access key
216+
217+
218+
219+
220+
* For Cursor: `.cursor/mcp.json`:
221+
222+
```json
223+
{
224+
"mcpServers": {
225+
"browserstack": {
226+
"command": "npx",
227+
"args": ["-y", "@browserstack/mcp-server@latest"],
228+
"env": {
229+
"BROWSERSTACK_USERNAME": "<username>",
230+
"BROWSERSTACK_ACCESS_KEY": "<access_key>"
231+
}
232+
}
233+
}
234+
}
235+
```
236+
237+
- Claude Desktop: `~/claude_desktop_config.json`:
238+
239+
```json
240+
{
241+
"mcpServers": {
242+
"browserstack": {
243+
"command": "npx",
244+
"args": ["-y", "@browserstack/mcp-server@latest"],
245+
"env": {
246+
"BROWSERSTACK_USERNAME": "<username>",
247+
"BROWSERSTACK_ACCESS_KEY": "<access_key>"
248+
}
249+
}
250+
}
251+
}
252+
```
253+
- Cline
254+
255+
Click the “MCP Servers” icon in the navigation bar
256+
Select the “Installed” tab. Click the “Configure MCP Servers” button at the bottom of the pane.
257+
258+
```json
259+
{
260+
"mcpServers": {
261+
"browserstack": {
262+
"command": "npx",
263+
"args": ["-y", "@browserstack/mcp-server@latest"],
264+
"env": {
265+
"BROWSERSTACK_USERNAME": "<username>",
266+
"BROWSERSTACK_ACCESS_KEY": "<access_key>"
267+
}
268+
}
269+
}
270+
}
271+
```
272+
273+
### Installing via Smithery
274+
275+
To install BrowserStack Test Platform Server for Claude Desktop automatically via [Smithery](https://smithery.ai/server/@browserstack/mcp-server):
139276
277+
```bash
278+
npx -y @smithery/cli install @browserstack/mcp-server --client claude
279+
```
140280
141281
142282
### 💡 List of BrowserStack MCP Tools
@@ -202,7 +342,7 @@ Returns with Folder ID, Project ID and Test Management Link to access the TM Pro
202342
**Prompt example**
203343
204344
```text
205-
Upload test cases from '/Users/pushkar/testcases.pdf' to the 'Shopping App' project in Test Management
345+
Upload test cases from '/Users/xyz/testcases.pdf' to the 'Shopping App' project in Test Management
206346
```
207347
208348
---
@@ -242,7 +382,7 @@ Returns with Folder ID, Project ID and Test Management Link to access the TM Pro
242382
**Prompt example**
243383
244384
```text
245-
Open my app on iPhone 15 Pro Max with iOS 17. App path is /Users/pushkar/app.ipa
385+
Open my app on iPhone 15 Pro Max with iOS 17. App path is /Users/xyz/app.ipa
246386
```
247387
248388
---
@@ -264,7 +404,7 @@ Returns with Folder ID, Project ID and Test Management Link to access the TM Pro
264404
**Prompt example**
265405
266406
```text
267-
Take a screenshot of my app on Google Pixel 6 with Android 14 while testing on App Automate. App file path: /Users/pushkar/app-debug.apk
407+
Take a screenshot of my app on Google Pixel 6 with Android 14 while testing on App Automate. App file path: /Users/xyz/app-debug.apk
268408
```
269409
270410
* `runAppTestsOnBrowserStack` — Run automated mobile tests (Espresso/XCUITest, etc.) on real devices.
@@ -289,7 +429,7 @@ Returns with Folder ID, Project ID and Test Management Link to access the TM Pro
289429
**Prompt example**
290430
291431
```text
292-
Run accessibility scan named 'HomePage Audit' for www.example.com
432+
Run accessibility scan for "www.example.com"
293433
```
294434
295435
---
@@ -314,150 +454,10 @@ Returns with Folder ID, Project ID and Test Management Link to access the TM Pro
314454
**Prompt example**
315455
316456
```text
317-
Upload PRD from /Users/pushkar/Desktop/login-flow.pdf and use BrowserStack AI to generate test cases
457+
Upload PRD from /Users/xyz/Desktop/login-flow.pdf and use BrowserStack AI to generate test cases
318458
```
319459
320460
321-
322-
323-
## 🛠️ Installation
324-
325-
### **One Click MCP Setup**
326-
327-
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install_Server-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](http://mcp.browserstack.com/one-click-setup?client=vscode) &nbsp; [![Install in Cursor](https://img.shields.io/badge/Cursor-Install_Server-24bfa5?style=flat-square&color=000000&logo=visualstudiocode&logoColor=white)](http://mcp.browserstack.com/one-click-setup?client=cursor)
328-
329-
330-
### **Alternate ways to Setup MCP server**
331-
332-
1. **Create a BrowserStack Account**
333-
334-
- Sign up for [BrowserStack](https://www.browserstack.com/users/sign_up) if you don't have an account already.
335-
336-
- ℹ️ If you have an open-source project, we'll be able to provide you with a [free plan](https://www.browserstack.com/open-source).
337-
338-
339-
- Once you have an account (and purchased appropriate plan), note down your `username` and `access_key` from [Account Settings](https://www.browserstack.com/accounts/profile/details).
340-
341-
2. Ensure you are using Node version >= `18.0`. Check your node version using `node --version`. Recommended version: `v22.15.0` (LTS)
342-
343-
3. **Install the MCP Server**
344-
345-
- VSCode (Copilot - Agent Mode): `.vscode/mcp.json`:
346-
347-
- Locate or Create the Configuration File:
348-
In the root directory of your project, look for a folder named .vscode. This folder is usually hidden so you will need to find it as mentioned in the expand.
349-
350-
- If this folder doesn't exist, create it.
351-
352-
- Inside the .vscode folder, create a new file named mcp.json
353-
354-
- Add the Configuration: Open the mcp.json file and then add the following JSON content.
355-
356-
- Replace the username and <access_key> with your BrowserStack credentials.
357-
358-
```json
359-
{
360-
"servers": {
361-
"browserstack": {
362-
"command": "npx",
363-
"args": ["-y", "@browserstack/mcp-server@latest"],
364-
"env": {
365-
"BROWSERSTACK_USERNAME": "<username>",
366-
"BROWSERSTACK_ACCESS_KEY": "<access_key>"
367-
}
368-
}
369-
}
370-
}
371-
```
372-
373-
- In VSCode, make sure to click on `Start` button in the MCP Server to start the server.
374-
![Start MCP Server](assets/vscode_install.png)
375-
376-
377-
#### ** Alternate way to setup MCP on VSCode Copilot
378-
379-
1. Click on the gear icon to Select Tools
380-
<div align="center">
381-
<img src="assets/select_tools.png" alt="Select Tools" height="100">
382-
</div>
383-
2. A tool menu would appear at the top-centre, scroll down on the menu at the top and then Click on Add MCP Server
384-
<div align="center">
385-
<img src="assets/add_mcp_server.png" alt="Add MCP Server" height="100">
386-
</div>
387-
3. Select NPM package option (Install fron an NPM package) - 3rd in the list
388-
<div align="center">
389-
<img src="assets/select_npm_package.png" alt="Select NPM Package" height="100">
390-
</div>
391-
4. Enter NPM Package Name (@browserstack/mcp-server)
392-
<div align="center">
393-
<img src="assets/enter_npm_package.png" alt="Enter NPM Package" height="100">
394-
</div>
395-
5. Enter browserstack user name and access key
396-
397-
398-
399-
400-
* For Cursor: `.cursor/mcp.json`:
401-
402-
```json
403-
{
404-
"mcpServers": {
405-
"browserstack": {
406-
"command": "npx",
407-
"args": ["-y", "@browserstack/mcp-server@latest"],
408-
"env": {
409-
"BROWSERSTACK_USERNAME": "<username>",
410-
"BROWSERSTACK_ACCESS_KEY": "<access_key>"
411-
}
412-
}
413-
}
414-
}
415-
```
416-
417-
- Claude Desktop: `~/claude_desktop_config.json`:
418-
419-
```json
420-
{
421-
"mcpServers": {
422-
"browserstack": {
423-
"command": "npx",
424-
"args": ["-y", "@browserstack/mcp-server@latest"],
425-
"env": {
426-
"BROWSERSTACK_USERNAME": "<username>",
427-
"BROWSERSTACK_ACCESS_KEY": "<access_key>"
428-
}
429-
}
430-
}
431-
}
432-
```
433-
- Cline
434-
435-
Click the “MCP Servers” icon in the navigation bar
436-
Select the “Installed” tab. Click the “Configure MCP Servers” button at the bottom of the pane.
437-
438-
```json
439-
{
440-
"mcpServers": {
441-
"browserstack": {
442-
"command": "npx",
443-
"args": ["-y", "@browserstack/mcp-server@latest"],
444-
"env": {
445-
"BROWSERSTACK_USERNAME": "<username>",
446-
"BROWSERSTACK_ACCESS_KEY": "<access_key>"
447-
}
448-
}
449-
}
450-
}
451-
```
452-
453-
### Installing via Smithery
454-
455-
To install BrowserStack Test Platform Server for Claude Desktop automatically via [Smithery](https://smithery.ai/server/@browserstack/mcp-server):
456-
457-
```bash
458-
npx -y @smithery/cli install @browserstack/mcp-server --client claude
459-
```
460-
461461
## 🤝 Recommended MCP Clients
462462
463463
- We recommend using **Github Copilot or Cursor** for automated testing + debugging use cases.

0 commit comments

Comments
 (0)