Merge branch 'main' into tra-insights

Author: tech-sushant

README.md

@@ -38,7 +38,15 @@ Stay in flow—keep all project context in one place and trigger actions directl
 ## ⚡️ One Click MCP Setup
 
 [![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)
-
+#### Note : Ensure you are using Node version >= `18.0` 
+- Check your node version using `node --version`. Recommended version: `v22.15.0` (LTS)
+- To Upgrade Node :
+- 1. On macOS `(Homebrew) - brew update && brew upgrade node  or if using (nvm) - nvm install 22.15.0 && nvm use 22.15.0 && nvm alias default 22.15.0`
+- 2. On Windows `(nvm-windows) : nvm install 22.15.0 && nvm use 22.15.0`
+- 👉 <a href="https://nodejs.org/en/download" target="_blank">Or directly download the Node.js LTS Installer</a>
+
+.
+        
 ## 💡 Usage Examples
 
 ### 📱 Manual App Testing
@@ -142,6 +150,10 @@ Generate test cases from PRDs, convert manual tests to low-code automation, and
 
 ## 🛠️ Installation
 
+### 📋 Prerequisites for MCP Setup
+#### Note : Ensure you are using Node version >= `18.0` 
+- Check your node version using `node --version`. Recommended version: `v22.15.0` (LTS)
+   
 ### **One Click MCP Setup**
 
 [![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)
@@ -158,7 +170,9 @@ Generate test cases from PRDs, convert manual tests to low-code automation, and
 
    - 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).
 
-2. Ensure you are using Node version >= `18.0`. Check your node version using `node --version`. Recommended version: `v22.15.0` (LTS)
+2. #### Note : Ensure you are using Node version >= `18.0` 
+    - Check your node version using `node --version`. Recommended version: `v22.15.0` (LTS)
+   
 
 3. **Install the MCP Server**
 
@@ -456,7 +470,64 @@ As of now we support 20 tools.
   ```text
   Upload PRD from /Users/xyz/Desktop/login-flow.pdf and use BrowserStack AI to generate test cases
   ```
+##  Remote MCP Setup
 
+   - VSCode (Copilot - Agent Mode): `.vscode/mcp.json`:
+    
+      - Locate or Create the Configuration File:
+      - 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.
+      - If this folder doesn't exist, create it.
+      - Inside the .vscode folder, create a new file named mcp.json
+      - To setup Remote BrowserStack MCP instead of local BrowserStack MCP you can add the following JSON content :
+         <div align="center">
+         <img src="assets/remotemcp_json_file.png" alt="Remote MCP JSON file" height="300" width="300">
+         </div>
+        
+        ### Alternative way to Setup Remote MCP
+
+      -  Step 1.Click on the gear icon to Select Tools
+      
+          <div align="center">
+          <img src="assets/select_tools.png" alt="Select Tools" height="300" width="300"> 
+          </div>
+          
+      -  Step 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
+      
+        <div align="center">
+        <img src="assets/add_mcp_server.png" alt="Add MCP Server" height="300" width="300"> 
+        </div>
+
+      - Step 3. Click on HTTP option
+         <div align="center">
+         <img src="assets/http_option.png" alt="HTTP Option" height="300" width="300">
+         </div>
+         
+      - Step 4. Paste Remote MCP Server URL : https://mcp.browserstack.com/mcp
+         <div align="center">
+         <img src="assets/server_url.png" alt="Remote MCP Server URL" height="300" width="300">
+         </div>
+         
+      - Step 5. Give server id as : browserstack
+      
+          <div align="center">
+          <img src="assets/server_id.png" alt="Remote MCP Server ID" height="300" width="300">
+          </div>
+          
+      - Step 6. In VSCode Click on start MCP Server and then click on "Allow"
+      
+          <div align="center">
+          <img src="assets/authentication1.png" alt="authentication1" height="300" width="300">
+          </div>
+          
+          <div align="center">
+          <img src="assets/authentication2.png" alt="authentication2" height="300" width="300">
+          </div>
+          
+          <div align="center">
+          <img src="assets/signin_success.png" alt="Sign_in_success" height="300" width="300">
+          </div>
+
+     
 
 ## 🤝 Recommended MCP Clients
 

assets/authentication1.png

@@ -34,37 +34,41 @@ export async function getDevicesAndBrowsers(
     fs.mkdirSync(CACHE_DIR, { recursive: true });
   }
 
-  let cache: any = {};
+  let cache: Record<string, any> = {};
 
+  // Load existing cache
   if (fs.existsSync(CACHE_FILE)) {
-    const stats = fs.statSync(CACHE_FILE);
-    if (Date.now() - stats.mtimeMs < TTL_MS) {
-      try {
-        cache = JSON.parse(fs.readFileSync(CACHE_FILE, "utf8"));
-        if (cache[type]) {
-          return cache[type];
-        }
-      } catch (error) {
-        console.error("Error parsing cache file:", error);
-        // Continue with fetching fresh data
-      }
+    try {
+      cache = JSON.parse(fs.readFileSync(CACHE_FILE, "utf8"));
+    } catch (err) {
+      console.error("Error parsing cache file:", err);
+      cache = {};
+    }
+
+    // Check per-product TTL
+    const cachedEntry = cache[type];
+    if (cachedEntry?.timestamp && Date.now() - cachedEntry.timestamp < TTL_MS) {
+      return cachedEntry.data;
     }
   }
 
+  // Fetch fresh data from BrowserStack
   const liveRes = await apiClient.get({ url: URLS[type], raise_error: false });
-
   if (!liveRes.ok) {
     throw new Error(
-      `Failed to fetch configuration from BrowserStack : ${type}=${liveRes.statusText}`,
+      `Failed to fetch configuration from BrowserStack: ${type} = ${liveRes.statusText}`,
     );
   }
 
-  cache = {
-    [type]: liveRes.data,
+  // Save to cache with timestamp and data directly under product key
+  cache[type] = {
+    timestamp: Date.now(),
+    data: liveRes.data,
   };
-  fs.writeFileSync(CACHE_FILE, JSON.stringify(cache), "utf8");
 
-  return cache[type];
+  fs.writeFileSync(CACHE_FILE, JSON.stringify(cache, null, 2), "utf8");
+
+  return liveRes.data;
 }
 
 // Rate limiter for started event (3H)

assets/authentication2.png

@@ -1 +1,2 @@
 export const signedUrlMap = new Map<string, object>();
+export const testFilePathsMap = new Map<string, string[]>();