From 4d42cb33a868862cf99ce948a0f9259d50ff1392 Mon Sep 17 00:00:00 2001 From: Vishal Shah Date: Thu, 5 Feb 2026 17:36:55 +0530 Subject: [PATCH 1/8] Initial Commit --- .cursor/plugin.json | 24 ++++ README.md | 312 +++++++++++++++++++++++++++++++++++++++++++- mcp.json | 12 ++ 3 files changed, 346 insertions(+), 2 deletions(-) create mode 100644 .cursor/plugin.json create mode 100644 mcp.json diff --git a/.cursor/plugin.json b/.cursor/plugin.json new file mode 100644 index 0000000..c2e23d8 --- /dev/null +++ b/.cursor/plugin.json @@ -0,0 +1,24 @@ +{ + "name": "browserstack", + "version": "1.0.0", + "description": "BrowserStack integration for Cursor. Test websites and mobile apps on real devices, run automated tests, debug failures, and manage test casesβ€”all using natural language.", + "author": { + "name": "BrowserStack", + "email": "support@browserstack.com", + "url": "https://www.browserstack.com" + }, + "keywords": [ + "browserstack", + "testing", + "automation", + "accessibility", + "quality-assurance", + "playwright", + "selenium", + "manual-testing", + "app-testing", + "real-devices" + ], + "logo": "https://github.com/browserstack/mcp-server/raw/main/assets/browserstack-logo.png", + "primaryColor": "#0070f0" +} diff --git a/README.md b/README.md index 36d0340..b858385 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,310 @@ -# browserstack-cursor-plugin -BrowserStack Cursor Plugin +# BrowserStack for Cursor + +Test websites and mobile apps on 3,500+ real devices and browsersβ€”directly from Cursor using natural language. No context switching and very easy to setup. + +## What You Can Do + +**Test anywhere, from anywhere** +- Open your localhost app on an iPhone 15 Pro Max +- Test your website on Safari 17 without owning a Mac +- Debug app crashes on Android 14 in real-time +- Run Playwright tests on 50+ browser/OS combinations + +**Stay in your flow** +- Ask in plain English: *"Test my site on Edge"* +- Get instant access to real devices +- Debug failed tests without leaving Cursor +- Fix accessibility issues with AI suggestions + +**Automate everything** +- Run test suites on BrowserStack infrastructure +- Generate test cases from product requirements +- Auto-heal flaky tests with AI +- Manage test cases and track results + +## Setup + +### Step 1: Install Node.js + +You need Node.js version 18 or higher (we recommend v22.15.0 LTS). + +Check your version: +```bash +node --version +``` + +If you need to install or update: +- **macOS**: `brew update && brew upgrade node` or [download here](https://nodejs.org/en/download) +- **Windows**: Download from [nodejs.org](https://nodejs.org/en/download) + +### Step 2: Get BrowserStack Credentials + +1. **Sign up** at [browserstack.com/users/sign_up](https://www.browserstack.com/users/sign_up) + - Free trial available, no credit card required + - Open source projects get free access + +2. **Get your credentials** from [Account Settings](https://www.browserstack.com/accounts/profile/details) + - You'll need your `Username` and `Access Key` + - Keep these handy for the next step + +### Step 3: Install the Plugin + +1. **Install from Cursor Marketplace** (or manually) + +2. **Add your credentials** to your environment: + + **On macOS/Linux:** + ```bash + # Open your shell profile + nano ~/.zshrc # or ~/.bashrc if you use bash + + # Add these lines at the end (replace with your actual credentials) + export BROWSERSTACK_USERNAME="your_username_here" + export BROWSERSTACK_ACCESS_KEY="your_access_key_here" + + # Save and reload + source ~/.zshrc + ``` + + **On Windows (PowerShell):** + ```powershell + # Open PowerShell profile + notepad $PROFILE + + # Add these lines + $env:BROWSERSTACK_USERNAME="your_username_here" + $env:BROWSERSTACK_ACCESS_KEY="your_access_key_here" + ``` + +3. **Restart Cursor** to activate the plugin + +4. **Verify installation** by asking Cursor: + ``` + "Open google.com on Chrome" + ``` + +βœ… That's it! You're ready to test. + +## Common Workflows + +### πŸš€ Quick Manual Testing + +Testing your local development site on different browsers: + +``` +πŸ’¬ "Open my website running on localhost:3000 on Safari 17" +πŸ’¬ "Test localhost:8080 on the latest Chrome on Windows 11" +πŸ’¬ "Open my site on Firefox on macOS" +``` + +**Use case**: You're developing a feature and need to check if it works on Safari, but you're on Windows. + +--- + +### πŸ“± Mobile App Testing + +Test your mobile app on real devices: + +``` +πŸ’¬ "Open my app on iPhone 15 Pro Max" + (Cursor will ask for your .ipa or .apk file path) + +πŸ’¬ "Test my app on Galaxy S24 with Android 14" +πŸ’¬ "My app crashes on iOS 17 when I tap the login button, help me debug" +``` + +**Use case**: You don't have physical access to an iPhone 15 Pro Max but need to verify the login flow works. + +--- + +### πŸ§ͺ Running Automated Tests + +Run your existing test suite on BrowserStack: + +``` +πŸ’¬ "Setup my Playwright tests to run on BrowserStack" +πŸ’¬ "Run my tests on Chrome, Firefox, and Safari" +πŸ’¬ "My test suite failed on BrowserStack session abc123, help me debug" +``` + +**Workflow example**: +1. You: *"Setup my Playwright tests to run on BrowserStack"* +2. Cursor updates your config files automatically +3. You: *"Run my tests on Chrome and Edge"* +4. BrowserStack runs your tests, Cursor shows you results +5. If tests fail: *"Help me debug the failures"* + +--- + +### β™Ώ Accessibility Scanning + +Catch accessibility issues before production: + +``` +πŸ’¬ "Scan accessibility issues on localhost:3000" +πŸ’¬ "What WCAG 2.1 issues are on my checkout page?" +πŸ’¬ "Fix the color contrast issues on my form" +``` + +**Use case**: You want to ensure your signup form is accessible before deploying. + +--- + +### πŸ“‹ Test Case Management + +Organize and track your testing: + +``` +πŸ’¬ "Create a Test Management project called 'Payment Flow'" +πŸ’¬ "Add a test case: Verify credit card payment with invalid CVV" +πŸ’¬ "List all high priority test cases in Payment Flow" +πŸ’¬ "Create a test run for smoke tests" +πŸ’¬ "Mark test case TC-123 as passed" +``` + +**Workflow example**: +1. Create project structure +2. Add test cases as you develop features +3. Create test runs before releases +4. Track results and generate reports + +--- + +### πŸ€– AI-Powered Testing + +**Generate test cases from requirements:** +``` +πŸ’¬ "Generate test cases from my PRD at /docs/login-feature.pdf" +``` + +**Auto-heal flaky tests:** +``` +πŸ’¬ "My login test keeps failing because the button selector changed. Fix it with self-healing." +``` + +**Convert manual tests to automation:** +``` +πŸ’¬ "Convert my manual test case TC-45 into a Playwright script" +``` + +--- + +## Real Examples + +### Example 1: Cross-Browser Bug Fix + +**Scenario**: Users report a broken layout on Safari. + +``` +πŸ’¬ "Open localhost:3000/dashboard on Safari 17 on macOS Sonoma" + β†’ BrowserStack opens a real Safari session + β†’ You see the layout is indeed broken + +πŸ’¬ "Take a screenshot of this page" + β†’ Screenshot saved to your project + +πŸ’¬ "Now open the same page on Chrome to compare" + β†’ Opens Chrome session + β†’ Layout works fine + +πŸ’¬ "What CSS properties might cause this Safari-specific issue?" + β†’ Cursor analyzes your code and suggests the problem +``` + +### Example 2: Mobile App Crash Debug + +**Scenario**: Your iOS app crashes on launch for some users. + +``` +πŸ’¬ "Open my app on iPhone 14 with iOS 16" + (Provide path: /Users/me/builds/app-v2.1.ipa) + β†’ App launches successfully + +πŸ’¬ "Try on iPhone 15 with iOS 17" + β†’ App crashes! + +πŸ’¬ "Get the crash logs for this session" + β†’ Cursor retrieves logs + +πŸ’¬ "Analyze these crash logs and suggest a fix" + β†’ Cursor identifies the issue and suggests code changes +``` + +### Example 3: Automated Test Failure Investigation + +**Scenario**: Your CI pipeline shows test failures on BrowserStack. + +``` +πŸ’¬ "My Automate build 'feature-branch-123' has 3 failed tests. What went wrong?" + β†’ Cursor fetches error logs and screenshots + +πŸ’¬ "Show me screenshots from the failed tests" + β†’ Screenshots displayed + +πŸ’¬ "The login button selector seems wrong. Update my test file with the correct selector." + β†’ Cursor updates your test file + +πŸ’¬ "Re-run the tests" + β†’ Tests pass βœ… +``` + +## What's Available + +**Manual Testing** +- Test websites on any browser/OS combination +- Test mobile apps on 3,500+ real devices +- Access localhost from cloud devices (no deployment needed) + +**Automated Testing** +- Run Playwright, Selenium, Cypress, and more +- Parallel test execution across browsers +- Get screenshots, videos, and logs automatically + +**Test Management** +- Create and organize test cases +- Track test execution and results +- Generate test reports + +**Accessibility Testing** +- WCAG 2.0/2.1/2.2 compliance scanning +- AI-powered fix suggestions +- Local and production site scanning + +**AI-Powered Features** +- Generate test cases from requirements documents +- Auto-heal flaky test selectors +- Convert manual tests to automation +- Intelligent failure analysis and debugging + +## Troubleshooting + +**Plugin not responding?** +- Verify your credentials are set correctly: `echo $BROWSERSTACK_USERNAME` +- Restart Cursor after adding credentials +- Check Node.js version: `node --version` (need 18+) + +**"Authentication failed" error?** +- Double-check your username and access key from [Account Settings](https://www.browserstack.com/accounts/profile/details) +- Make sure there are no extra spaces in your environment variables + +**Can't access localhost?** +- This works automatically! Just use `localhost:PORT` in your prompts +- BrowserStack creates a secure tunnel to your local machine + +**Behind a corporate firewall?** +- Contact your IT team to allowlist BrowserStack domains +- Or ask us about enterprise firewall configurations + +## Get Help + +- **Issues with the plugin**: [Open a GitHub issue](https://github.com/browserstack/mcp-server/issues) +- **BrowserStack platform questions**: [Contact Support](https://www.browserstack.com/contact) +- **Documentation**: [BrowserStack Docs](https://www.browserstack.com/docs) + +## Pricing + +- **Free Trial**: Test drive with limited minutes +- **Open Source**: Free for qualifying projects ([apply here](https://www.browserstack.com/open-source)) +- **Paid Plans**: From $29/month for individuals, custom enterprise pricing + +See [pricing details](https://www.browserstack.com/pricing) diff --git a/mcp.json b/mcp.json new file mode 100644 index 0000000..d0568c8 --- /dev/null +++ b/mcp.json @@ -0,0 +1,12 @@ +{ + "mcpServers": { + "browserstack": { + "command": "npx", + "args": ["-y", "@browserstack/mcp-server@latest"], + "env": { + "BROWSERSTACK_USERNAME": "${BROWSERSTACK_USERNAME}", + "BROWSERSTACK_ACCESS_KEY": "${BROWSERSTACK_ACCESS_KEY}" + } + } + } +} From 01435a328fcd9bd71487180a2d4ff0ab07331a78 Mon Sep 17 00:00:00 2001 From: Vishal Shah Date: Fri, 6 Feb 2026 00:30:48 +0530 Subject: [PATCH 2/8] Added TCG agent, a11y skill and visual fix skill --- agents/test-case-generator.md | 95 ++++++++++++++++++++++ skills/accessibility-fix/SKILL.md | 104 ++++++++++++++++++++++++ skills/visual-issue-fix/SKILL.md | 130 ++++++++++++++++++++++++++++++ 3 files changed, 329 insertions(+) create mode 100644 agents/test-case-generator.md create mode 100644 skills/accessibility-fix/SKILL.md create mode 100644 skills/visual-issue-fix/SKILL.md diff --git a/agents/test-case-generator.md b/agents/test-case-generator.md new file mode 100644 index 0000000..2221ba0 --- /dev/null +++ b/agents/test-case-generator.md @@ -0,0 +1,95 @@ +--- +name: test-case-generator +description: Generate comprehensive test cases from product requirements, user stories, or PRD documents using BrowserStack AI. +--- + +# Test Case Generator + +You help users generate test cases from requirements using BrowserStack's AI-powered test case generation. + +## When to Use + +- User provides product requirements or user stories +- User uploads a PRD document +- Need to create test cases for new features + +## Process + +### 1. Get Requirements + +Ask user to provide: +- Text description of the feature +- Or path to PRD file (PDF, image) + +### 2. Generate Test Cases + +Use BrowserStack AI to generate test cases: +``` +"Generate test cases for [feature description]" +"Generate test cases from PRD file at [file path]" +``` + +### 3. Organize in Test Management + +Create project structure: +``` +"Create Test Management project called '[Project Name]'" +"Add folder '[Feature Name]' to project" +``` + +### 4. Review and Add Test Cases + +The AI will generate test cases with: +- Test case title +- Steps to execute +- Expected results +- Priority level + +Review and add to Test Management: +``` +"Add these test cases to Test Management project" +``` + +## Example Workflow + +**User**: "Generate test cases for a login feature with email and Google OAuth" + +**Your approach**: +``` +I'll generate comprehensive test cases for your login feature. + +First, let me understand the requirements: +- Email/password login +- Google OAuth login +- Forgot password flow +- Any specific error scenarios? + +Then I'll use BrowserStack AI to generate test cases covering: +- Happy path (successful login) +- Error cases (wrong password, unregistered email) +- OAuth flow +- Edge cases (empty fields, SQL injection attempts) + +Once generated, I'll organize them in Test Management: +"Create Test Management project 'User Authentication'" +"Add test cases for email login scenarios" +"Add test cases for OAuth login scenarios" +``` + +## Test Case Structure + +Each generated test case includes: +- **Title**: Clear description (e.g., "Login - Valid Credentials - Success") +- **Priority**: Critical/High/Medium/Low +- **Preconditions**: What needs to be set up +- **Steps**: Numbered actions to perform +- **Expected Results**: What should happen +- **Tags**: @smoke, @regression, @p0, etc. + +## Tips for Better Test Cases + +- Be specific about requirements +- Include edge cases and error scenarios +- Mention any integrations (third-party services) +- Specify target platforms (web, mobile, specific browsers) +- Note any compliance requirements (security, accessibility) diff --git a/skills/accessibility-fix/SKILL.md b/skills/accessibility-fix/SKILL.md new file mode 100644 index 0000000..cddcbdf --- /dev/null +++ b/skills/accessibility-fix/SKILL.md @@ -0,0 +1,104 @@ +--- +name: accessibility-fix +description: Scan a webpage for accessibility issues, identify violations, generate code fixes, and verify the fixes work. Use when fixing WCAG compliance or accessibility bugs. +--- + +# Accessibility Fix Workflow + +## When to Use + +- User wants to fix accessibility issues on a page +- Need to ensure WCAG compliance +- Fixing specific accessibility bugs + +## Steps + +### 1. Run Accessibility Scan + +Ask for the URL to scan: +``` +"Run accessibility scan on [URL]" +``` + +Example: `"Run accessibility scan on localhost:3000"` + +### 2. Analyze Results + +Review the scan results and categorize issues: +- **Critical**: Blocks users (missing form labels, keyboard traps) +- **High**: Major barriers (poor color contrast, missing alt text) +- **Medium**: Best practices (heading hierarchy) + +### 3. Fix Issues in Code + +For each issue, provide specific code fix: + +**Missing Alt Text:** +```html + + + + +Company Logo +``` + +**Poor Color Contrast:** +```css +/* Before - Contrast 2.8:1 (fails) */ +color: #999; +background: #fff; + +/* After - Contrast 4.6:1 (passes) */ +color: #666; +background: #fff; +``` + +**Missing Form Label:** +```html + + + + + + +``` + +**Keyboard Navigation:** +```html + +
Click me
+ + + +``` + +### 4. Verify Fixes + +After user implements fixes: +``` +"Re-scan [URL] to verify accessibility issues are fixed" +``` + +### 5. Report Results + +Confirm what was fixed and any remaining issues. + +## Quick Reference + +**Common WCAG Requirements:** +- Images need alt text +- Color contrast β‰₯ 4.5:1 for text +- All interactive elements keyboard accessible +- Forms have labels +- Proper heading hierarchy (h1 β†’ h2 β†’ h3) + +## Example + +**User**: "Fix accessibility issues on my login page at localhost:3000/login" + +**Workflow**: +1. Scan: `"Run accessibility scan on localhost:3000/login"` +2. Identify: "Found 3 critical issues: missing form labels, poor contrast, no keyboard nav" +3. Fix: Provide code fixes for each issue +4. Verify: `"Re-scan localhost:3000/login"` +5. Confirm: "All critical issues resolved βœ“" diff --git a/skills/visual-issue-fix/SKILL.md b/skills/visual-issue-fix/SKILL.md new file mode 100644 index 0000000..64989df --- /dev/null +++ b/skills/visual-issue-fix/SKILL.md @@ -0,0 +1,130 @@ +--- +name: visual-issue-fix +description: Capture screenshots of a page across browsers, identify visual issues, fix them in code, and validate. Use for cross-browser layout bugs or visual regressions. +--- + +# Visual Issue Fix Workflow + +## When to Use + +- Layout broken in specific browser +- Visual bugs reported by users +- Cross-browser design inconsistencies +- Responsive design issues + +## Steps + +### 1. Capture Screenshots + +Open page on target browsers: +``` +"Open [URL] on Chrome" +"Open [URL] on Safari" +"Open [URL] on Firefox" +``` + +Take screenshots: +``` +"Take screenshot of the current page" +``` + +### 2. Identify Issues + +Compare screenshots and identify: +- Layout differences (alignment, spacing) +- Missing elements +- Broken styling (fonts, colors, borders) +- Responsive breakpoint problems + +### 3. Fix in Code + +Provide specific code fixes: + +**Flexbox Issue:** +```css +/* Before - Safari issue */ +.container { + display: flex; + gap: 20px; +} + +/* After - Works everywhere */ +.container { + display: flex; +} +.container > * { + margin-right: 20px; +} +``` + +**CSS Grid Issue:** +```css +/* Before - IE11 doesn't support */ +.grid { + display: grid; + grid-template-columns: repeat(3, 1fr); +} + +/* After - Fallback for old browsers */ +.grid { + display: flex; + flex-wrap: wrap; +} +@supports (display: grid) { + .grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + } +} +``` + +**Responsive Issue:** +```css +/* Before - Fixed width breaks on mobile */ +.sidebar { + width: 300px; +} + +/* After - Responsive */ +.sidebar { + width: 100%; +} +@media (min-width: 768px) { + .sidebar { + width: 300px; + } +} +``` + +### 4. Validate Fix + +After user implements fix: +``` +"Re-open [URL] on [browser] to verify the fix" +"Take screenshot to confirm layout is correct" +``` + +### 5. Test Other Browsers + +Ensure fix didn't break other browsers: +``` +"Test on Chrome, Firefox, Safari, and Edge" +``` + +## Quick Tips + +- Test on real devices, not just dev tools +- Check both desktop and mobile +- Verify at different screen sizes +- Look for vendor prefix needs (-webkit-, -moz-) + +## Example + +**User**: "My navigation is broken in Safari" + +**Workflow**: +1. Capture: `"Open localhost:3000 on Safari"` + `"Take screenshot"` +2. Identify: "Navigation items overlapping - flexbox gap issue" +3. Fix: Provide CSS fix replacing gap with margins +4. Validate: `"Re-open localhost:3000 on Safari"` - confirm fixed +5. Cross-check: Test on Chrome, Firefox to ensure no regression From 3038fd24310d34d6c5b32cc89cd9c6a84666a64f Mon Sep 17 00:00:00 2001 From: Vishal Shah Date: Fri, 6 Feb 2026 10:18:41 +0530 Subject: [PATCH 3/8] Added skills and agents to README.md --- README.md | 150 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 145 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index b858385..c95dfa8 100644 --- a/README.md +++ b/README.md @@ -95,10 +95,13 @@ Testing your local development site on different browsers: πŸ’¬ "Open my website running on localhost:3000 on Safari 17" πŸ’¬ "Test localhost:8080 on the latest Chrome on Windows 11" πŸ’¬ "Open my site on Firefox on macOS" +πŸ’¬ "Take a screenshot of this page" ``` **Use case**: You're developing a feature and need to check if it works on Safari, but you're on Windows. +**Pro tip**: If you find a visual bug, use the **Visual Issue Fix** skill to get browser-specific fixes. + --- ### πŸ“± Mobile App Testing @@ -138,16 +141,18 @@ Run your existing test suite on BrowserStack: ### β™Ώ Accessibility Scanning -Catch accessibility issues before production: +Catch accessibility issues before production (uses **Accessibility Fix** skill): ``` πŸ’¬ "Scan accessibility issues on localhost:3000" -πŸ’¬ "What WCAG 2.1 issues are on my checkout page?" -πŸ’¬ "Fix the color contrast issues on my form" +πŸ’¬ "Fix accessibility problems on my checkout page" +πŸ’¬ "Check WCAG 2.1 AA compliance for my signup form" ``` **Use case**: You want to ensure your signup form is accessible before deploying. +**What happens**: The skill scans your page, identifies violations, provides specific code fixes, and verifies after you implement them. + --- ### πŸ“‹ Test Case Management @@ -172,14 +177,21 @@ Organize and track your testing: ### πŸ€– AI-Powered Testing -**Generate test cases from requirements:** +**Generate test cases from requirements** (uses **Test Case Generator** agent): ``` -πŸ’¬ "Generate test cases from my PRD at /docs/login-feature.pdf" +πŸ’¬ @test-case-generator + [Attach your PRD file] + "Generate test cases for project PR-12345" + +πŸ’¬ @test-case-generator + "Create test cases for checkout flow with credit card and PayPal" + "Add to project PR-67890" ``` **Auto-heal flaky tests:** ``` πŸ’¬ "My login test keeps failing because the button selector changed. Fix it with self-healing." +πŸ’¬ "Get self-healed selectors for session session_abc123" ``` **Convert manual tests to automation:** @@ -189,6 +201,134 @@ Organize and track your testing: --- +## Built-in Skills & Agents + +The plugin includes specialized workflows and AI agents to streamline common testing tasks. + +### πŸ”§ Skills (Multi-Step Workflows) + +#### Accessibility Fix +**What it does**: Scans your page for WCAG violations, identifies issues, and provides code fixes. + +**When to use**: Before deployment, fixing accessibility bugs, ensuring compliance. + +**Sample commands**: +``` +πŸ’¬ "Scan accessibility issues on localhost:3000" +πŸ’¬ "Fix the accessibility problems on my checkout page" +πŸ’¬ "Check WCAG 2.1 AA compliance for localhost:8080/signup" +``` + +**Workflow**: +1. Runs accessibility scan on your page +2. Categorizes issues (Critical/High/Medium) +3. Provides specific code fixes for each issue +4. Re-scans after you implement fixes to verify + +**Example fix output**: +```html + + + + + + + +``` + +--- + +#### Visual Issue Fix +**What it does**: Captures screenshots across browsers, identifies visual bugs, and provides CSS fixes. + +**When to use**: Cross-browser layout issues, responsive design bugs, visual regressions. + +**Sample commands**: +``` +πŸ’¬ "My navigation is broken in Safari, help me fix it" +πŸ’¬ "Compare how my homepage looks on Chrome vs Firefox" +πŸ’¬ "Fix the layout issue on Safari for localhost:3000" +``` + +**Workflow**: +1. Opens page on target browsers +2. Captures screenshots for comparison +3. Identifies visual differences +4. Provides browser-specific CSS fixes +5. Validates fix doesn't break other browsers + +**Example fix output**: +```css +/* Safari flexbox gap issue fix */ +/* Before */ +.container { + display: flex; + gap: 20px; +} + +/* After - Works everywhere */ +.container { + display: flex; +} +.container > * { + margin-right: 20px; +} +``` + +--- + +### πŸ€– AI Agent + +#### Test Case Generator +**What it does**: Generates comprehensive test cases from requirements, user stories, or PRD documents using BrowserStack AI. + +**When to use**: Planning new features, creating test suites, converting requirements to test cases. + +**Sample commands**: +``` +πŸ’¬ @test-case-generator + [Add your PRD file or requirements document to context] + "Generate test cases for Test Management project PR-12345" + +πŸ’¬ @test-case-generator + "Create test cases for a login feature with email and Google OAuth" + "Add them to project PR-54321" +``` + +**Workflow**: +1. Invoke agent with `@test-case-generator` +2. Add requirements file to context (or describe feature) +3. Provide your Test Management project ID (format: `PR-12345`) +4. Agent generates structured test cases +5. Test cases are added to your BrowserStack Test Management project + +**What you get**: +- Test case title and description +- Priority level (Critical/High/Medium/Low) +- Preconditions +- Step-by-step test steps +- Expected results +- Appropriate tags (@smoke, @regression, @p0, etc.) + +**Example interaction**: +``` +You: @test-case-generator + [Attach: login-feature-spec.pdf] + "Generate test cases for project PR-12345" + +Agent: I'll generate comprehensive test cases for your login feature. + + Test cases generated: + βœ“ TC-001: Login - Valid Credentials - Success (@smoke, @p0) + βœ“ TC-002: Login - Invalid Password - Error (@regression, @p1) + βœ“ TC-003: Login - Google OAuth - Success (@smoke, @p0) + βœ“ TC-004: Login - Empty Fields - Validation (@regression, @p2) + + Added 4 test cases to Test Management project PR-12345 +``` + +--- + ## Real Examples ### Example 1: Cross-Browser Bug Fix From cbd347a8a1c2c003d6ba160bff8ae7c644865d58 Mon Sep 17 00:00:00 2001 From: Vishal Shah Date: Fri, 6 Feb 2026 19:34:16 +0530 Subject: [PATCH 4/8] Removed Visual Fix & Added Autoamte/App Automate Setup --- README.md | 106 ++++++++++++------ skills/app-automate-test-setup/SKILL.md | 137 ++++++++++++++++++++++++ skills/automate-test-setup/SKILL.md | 115 ++++++++++++++++++++ skills/visual-issue-fix/SKILL.md | 130 ---------------------- 4 files changed, 326 insertions(+), 162 deletions(-) create mode 100644 skills/app-automate-test-setup/SKILL.md create mode 100644 skills/automate-test-setup/SKILL.md delete mode 100644 skills/visual-issue-fix/SKILL.md diff --git a/README.md b/README.md index c95dfa8..e91da3e 100644 --- a/README.md +++ b/README.md @@ -100,8 +100,6 @@ Testing your local development site on different browsers: **Use case**: You're developing a feature and need to check if it works on Safari, but you're on Windows. -**Pro tip**: If you find a visual bug, use the **Visual Issue Fix** skill to get browser-specific fixes. - --- ### πŸ“± Mobile App Testing @@ -122,20 +120,29 @@ Test your mobile app on real devices: ### πŸ§ͺ Running Automated Tests -Run your existing test suite on BrowserStack: +Run your existing test suite on BrowserStack (uses **Automate Test Setup** and **App Automate Test Setup** skills): +**Web tests:** ``` πŸ’¬ "Setup my Playwright tests to run on BrowserStack" πŸ’¬ "Run my tests on Chrome, Firefox, and Safari" -πŸ’¬ "My test suite failed on BrowserStack session abc123, help me debug" +πŸ’¬ "Show me available browsers on Automate" +``` + +**Mobile app tests:** +``` +πŸ’¬ "Upload my app to BrowserStack" +πŸ’¬ "Set up Appium tests for iPhone 15 and Galaxy S24" +πŸ’¬ "Run my app tests on top 10 Android devices" ``` **Workflow example**: 1. You: *"Setup my Playwright tests to run on BrowserStack"* -2. Cursor updates your config files automatically +2. Cursor configures your test framework with BrowserStack capabilities 3. You: *"Run my tests on Chrome and Edge"* -4. BrowserStack runs your tests, Cursor shows you results -5. If tests fail: *"Help me debug the failures"* +4. BrowserStack runs your tests in parallel +5. View results, session recordings, and logs +6. If tests fail: *"Help me debug the failures"* --- @@ -238,41 +245,76 @@ The plugin includes specialized workflows and AI agents to streamline common tes --- -#### Visual Issue Fix -**What it does**: Captures screenshots across browsers, identifies visual bugs, and provides CSS fixes. +#### Automate Test Setup +**What it does**: Sets up and runs automated web tests on BrowserStack Automate across multiple browsers and OS combinations. -**When to use**: Cross-browser layout issues, responsive design bugs, visual regressions. +**When to use**: Running Selenium/Playwright/Cypress tests, CI/CD integration, cross-browser testing. **Sample commands**: ``` -πŸ’¬ "My navigation is broken in Safari, help me fix it" -πŸ’¬ "Compare how my homepage looks on Chrome vs Firefox" -πŸ’¬ "Fix the layout issue on Safari for localhost:3000" +πŸ’¬ "Set up Playwright tests for BrowserStack Automate" +πŸ’¬ "Run my tests on Chrome 120, Firefox 122, and Safari 17" +πŸ’¬ "Show me available browsers on BrowserStack Automate" +πŸ’¬ "Run checkout.test.js in parallel on 5 browsers" ``` **Workflow**: -1. Opens page on target browsers -2. Captures screenshots for comparison -3. Identifies visual differences -4. Provides browser-specific CSS fixes -5. Validates fix doesn't break other browsers - -**Example fix output**: -```css -/* Safari flexbox gap issue fix */ -/* Before */ -.container { - display: flex; - gap: 20px; +1. Lists available browsers and OS combinations +2. Helps configure your test framework (Selenium/Playwright/Cypress) +3. Sets browser capabilities for target platforms +4. Runs tests on BrowserStack infrastructure +5. Displays results, logs, and session recordings + +**Example output**: +```json +// Browser capabilities configured +{ + "browserName": "Chrome", + "browserVersion": "120", + "os": "Windows", + "osVersion": "11" } -/* After - Works everywhere */ -.container { - display: flex; -} -.container > * { - margin-right: 20px; +βœ“ Tests completed on 3 browsers +βœ“ Session recordings available +``` + +--- + +#### App Automate Test Setup +**What it does**: Sets up and runs automated mobile app tests on BrowserStack App Automate with real iOS and Android devices. + +**When to use**: Testing mobile apps with Appium/XCUITest/Espresso, device matrix testing, mobile CI/CD. + +**Sample commands**: +``` +πŸ’¬ "Upload my app to BrowserStack App Automate" +πŸ’¬ "Set up Appium tests for iPhone 15 Pro and Galaxy S24" +πŸ’¬ "Show me available Android devices on App Automate" +πŸ’¬ "Run login.test.js on top 10 iOS and Android devices" +``` + +**Workflow**: +1. Uploads your .ipa or .apk file to BrowserStack +2. Lists available iOS and Android devices +3. Helps configure test framework (Appium/XCUITest/Espresso) +4. Sets device capabilities for target devices +5. Runs tests on real devices +6. Provides app logs, crash reports, and session recordings + +**Example output**: +```json +// Device capabilities configured +{ + "deviceName": "iPhone 15 Pro", + "platformName": "iOS", + "platformVersion": "17", + "app": "bs://abc123xyz" } + +βœ“ App uploaded: bs://abc123xyz +βœ“ Tests completed on 2 devices +βœ“ Video recordings available ``` --- diff --git a/skills/app-automate-test-setup/SKILL.md b/skills/app-automate-test-setup/SKILL.md new file mode 100644 index 0000000..018f5cf --- /dev/null +++ b/skills/app-automate-test-setup/SKILL.md @@ -0,0 +1,137 @@ +--- +name: app-automate-test-setup +description: Set up and run automated mobile app tests on BrowserStack App Automate. Use for testing iOS/Android apps with Appium, XCUITest, or Espresso on real devices. +--- + +# App Automate Test Setup Workflow + +## When to Use + +- Testing mobile apps on real iOS and Android devices +- Running Appium tests across device matrix +- CI/CD integration for mobile app testing +- Device-specific bug reproduction + +## Steps + +### 1. Upload Your App + +Upload your .apk (Android) or .ipa (iOS) file: +``` +"Upload my app to BrowserStack App Automate" +``` + +Or provide app URL: +``` +"Use app at https://example.com/app.apk" +``` + +### 2. Get Available Devices + +List all devices and OS versions: +``` +"Show me available iOS devices on App Automate" +"Show me available Android devices on App Automate" +``` + +### 3. Configure Test + +Choose your test framework: + +**For Appium (Java/Python/Node.js/Ruby):** +``` +"Help me set up Appium tests for BrowserStack App Automate" +``` + +**For XCUITest (iOS native):** +``` +"Configure XCUITest to run on BrowserStack" +``` + +**For Espresso (Android native):** +``` +"Set up Espresso tests for BrowserStack" +``` + +### 4. Set Device Capabilities + +Specify which devices to test on: +``` +"I want to test on iPhone 15 Pro (iOS 17) and Samsung Galaxy S23 (Android 14)" +``` + +The agent will help configure capabilities like: +```json +{ + "deviceName": "iPhone 15 Pro", + "platformName": "iOS", + "platformVersion": "17", + "app": "bs://app-id" +} +``` + +### 5. Run Tests + +Execute your test suite: +``` +"Run my app tests on BrowserStack App Automate" +``` + +Or run specific tests: +``` +"Run login.test.js on iPhone 15 and Galaxy S23" +``` + +### 6. View Results + +Check test execution results: +``` +"Show me the latest App Automate test results" +"Get the session recording for the last test run" +``` + +## Common Scenarios + +**Device Matrix Testing:** +``` +"Run tests on top 10 iOS devices and top 10 Android devices" +``` + +**Debugging Failed Tests:** +``` +"Show me app logs and device logs for the failed test" +"Get screenshots and video from the test session" +``` + +**Testing Different OS Versions:** +``` +"Test on iOS 16, 17, and 18" +"Test on Android 12, 13, and 14" +``` + +**Network Simulation:** +``` +"Run tests with 3G network speed" +"Test under airplane mode conditions" +``` + +## Example + +**User**: "I need to test my login feature on latest iPhone and Samsung phones" + +**Workflow**: +1. Upload app: `"Upload MyApp.ipa to BrowserStack"` +2. Get devices: `"Show latest iPhone and Samsung devices"` +3. Configure: `"Set up Appium tests for iPhone 15 Pro and Galaxy S24"` +4. Run: `"Run login.test.js on both devices"` +5. Results: `"Show test results and any crashes"` +6. Debug: If failures β†’ `"Get app logs and crash reports"` + +## Quick Tips + +- Upload apps once, reuse the app_url across tests +- Test on devices matching your user base +- Use network throttling to test under poor conditions +- Enable video recording for visual debugging +- Check device logs for native crashes +- Test different device orientations (portrait/landscape) diff --git a/skills/automate-test-setup/SKILL.md b/skills/automate-test-setup/SKILL.md new file mode 100644 index 0000000..c979070 --- /dev/null +++ b/skills/automate-test-setup/SKILL.md @@ -0,0 +1,115 @@ +--- +name: automate-test-setup +description: Set up and run automated web tests on BrowserStack Automate. Use for cross-browser testing, CI/CD integration, or running existing Selenium/Playwright/Cypress tests on real browsers. +--- + +# Automate Test Setup Workflow + +## When to Use + +- Running web tests across multiple browsers +- Setting up CI/CD pipeline with BrowserStack +- Testing on real desktop browsers (Chrome, Firefox, Safari, Edge) +- Debugging cross-browser compatibility issues + +## Steps + +### 1. Get Available Browsers + +List all browsers and OS combinations: +``` +"Show me available browsers on BrowserStack Automate" +``` + +### 2. Configure Test + +Choose your test framework and configuration: + +**For Selenium (Java/Python/Node.js):** +``` +"Help me set up Selenium tests for BrowserStack Automate" +``` + +**For Playwright:** +``` +"Configure Playwright to run on BrowserStack" +``` + +**For Cypress:** +``` +"Set up Cypress for BrowserStack Automate" +``` + +### 3. Set Browser Capabilities + +Specify which browsers to test on: +``` +"I want to test on Chrome 120 (Windows 11) and Safari 17 (macOS Sonoma)" +``` + +The agent will help configure capabilities like: +```json +{ + "browserName": "Chrome", + "browserVersion": "120", + "os": "Windows", + "osVersion": "11" +} +``` + +### 4. Run Tests + +Execute your test suite: +``` +"Run my tests on BrowserStack Automate" +``` + +Or run specific tests: +``` +"Run login.test.js on Chrome and Firefox" +``` + +### 5. View Results + +Check test execution results: +``` +"Show me the latest Automate test results" +"Get the session recording for the last test run" +``` + +## Common Scenarios + +**Parallel Testing:** +``` +"Run tests in parallel across 5 browsers" +``` + +**Debugging Failed Tests:** +``` +"Show me console logs and network logs for the failed test" +"Get screenshots from the test session" +``` + +**Local Testing:** +``` +"Set up BrowserStack Local for testing localhost" +``` + +## Example + +**User**: "I need to test my checkout flow on Chrome, Firefox, and Safari" + +**Workflow**: +1. Get browsers: `"Show available browsers on Automate"` +2. Configure: `"Set up Selenium tests for Chrome 120, Firefox 122, Safari 17"` +3. Run: `"Run checkout.test.js on all three browsers"` +4. Results: `"Show me test results and any failures"` +5. Debug: If failures β†’ `"Get screenshots and logs for failed tests"` + +## Quick Tips + +- Use parallel testing to speed up execution +- Enable video recording for debugging +- Set up BrowserStack Local for testing internal environments +- Use tags to organize test runs +- Check the Automate dashboard for detailed reports diff --git a/skills/visual-issue-fix/SKILL.md b/skills/visual-issue-fix/SKILL.md deleted file mode 100644 index 64989df..0000000 --- a/skills/visual-issue-fix/SKILL.md +++ /dev/null @@ -1,130 +0,0 @@ ---- -name: visual-issue-fix -description: Capture screenshots of a page across browsers, identify visual issues, fix them in code, and validate. Use for cross-browser layout bugs or visual regressions. ---- - -# Visual Issue Fix Workflow - -## When to Use - -- Layout broken in specific browser -- Visual bugs reported by users -- Cross-browser design inconsistencies -- Responsive design issues - -## Steps - -### 1. Capture Screenshots - -Open page on target browsers: -``` -"Open [URL] on Chrome" -"Open [URL] on Safari" -"Open [URL] on Firefox" -``` - -Take screenshots: -``` -"Take screenshot of the current page" -``` - -### 2. Identify Issues - -Compare screenshots and identify: -- Layout differences (alignment, spacing) -- Missing elements -- Broken styling (fonts, colors, borders) -- Responsive breakpoint problems - -### 3. Fix in Code - -Provide specific code fixes: - -**Flexbox Issue:** -```css -/* Before - Safari issue */ -.container { - display: flex; - gap: 20px; -} - -/* After - Works everywhere */ -.container { - display: flex; -} -.container > * { - margin-right: 20px; -} -``` - -**CSS Grid Issue:** -```css -/* Before - IE11 doesn't support */ -.grid { - display: grid; - grid-template-columns: repeat(3, 1fr); -} - -/* After - Fallback for old browsers */ -.grid { - display: flex; - flex-wrap: wrap; -} -@supports (display: grid) { - .grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - } -} -``` - -**Responsive Issue:** -```css -/* Before - Fixed width breaks on mobile */ -.sidebar { - width: 300px; -} - -/* After - Responsive */ -.sidebar { - width: 100%; -} -@media (min-width: 768px) { - .sidebar { - width: 300px; - } -} -``` - -### 4. Validate Fix - -After user implements fix: -``` -"Re-open [URL] on [browser] to verify the fix" -"Take screenshot to confirm layout is correct" -``` - -### 5. Test Other Browsers - -Ensure fix didn't break other browsers: -``` -"Test on Chrome, Firefox, Safari, and Edge" -``` - -## Quick Tips - -- Test on real devices, not just dev tools -- Check both desktop and mobile -- Verify at different screen sizes -- Look for vendor prefix needs (-webkit-, -moz-) - -## Example - -**User**: "My navigation is broken in Safari" - -**Workflow**: -1. Capture: `"Open localhost:3000 on Safari"` + `"Take screenshot"` -2. Identify: "Navigation items overlapping - flexbox gap issue" -3. Fix: Provide CSS fix replacing gap with margins -4. Validate: `"Re-open localhost:3000 on Safari"` - confirm fixed -5. Cross-check: Test on Chrome, Firefox to ensure no regression From 7c580618f7c45fa3972d66879989d8dbf045e37b Mon Sep 17 00:00:00 2001 From: Vishal Shah Date: Mon, 9 Feb 2026 15:14:03 +0530 Subject: [PATCH 5/8] Made all skills and agents use MCP tools --- README.md | 338 +++++++----------------- agents/test-case-generator.md | 100 ++++--- skills/accessibility-fix/SKILL.md | 79 ++++-- skills/app-automate-test-setup/SKILL.md | 145 +++++----- skills/automate-test-setup/SKILL.md | 112 ++++---- 5 files changed, 325 insertions(+), 449 deletions(-) diff --git a/README.md b/README.md index e91da3e..faed386 100644 --- a/README.md +++ b/README.md @@ -1,89 +1,35 @@ # BrowserStack for Cursor -Test websites and mobile apps on 3,500+ real devices and browsersβ€”directly from Cursor using natural language. No context switching and very easy to setup. +Test websites and mobile apps on 3,500+ real devices and browsers directly from Cursor using natural language. ## What You Can Do -**Test anywhere, from anywhere** -- Open your localhost app on an iPhone 15 Pro Max -- Test your website on Safari 17 without owning a Mac +- Test localhost on iPhone 15 Pro Max or Safari 17 without owning a Mac - Debug app crashes on Android 14 in real-time -- Run Playwright tests on 50+ browser/OS combinations - -**Stay in your flow** -- Ask in plain English: *"Test my site on Edge"* -- Get instant access to real devices -- Debug failed tests without leaving Cursor -- Fix accessibility issues with AI suggestions - -**Automate everything** -- Run test suites on BrowserStack infrastructure -- Generate test cases from product requirements -- Auto-heal flaky tests with AI -- Manage test cases and track results +- Run Playwright/Selenium tests on 50+ browser/OS combinations +- Generate test cases from PRD documents with AI +- Scan and fix accessibility issues (WCAG compliance) +- Auto-heal flaky tests ## Setup -### Step 1: Install Node.js - -You need Node.js version 18 or higher (we recommend v22.15.0 LTS). - -Check your version: -```bash -node --version -``` - -If you need to install or update: -- **macOS**: `brew update && brew upgrade node` or [download here](https://nodejs.org/en/download) -- **Windows**: Download from [nodejs.org](https://nodejs.org/en/download) - -### Step 2: Get BrowserStack Credentials - -1. **Sign up** at [browserstack.com/users/sign_up](https://www.browserstack.com/users/sign_up) - - Free trial available, no credit card required - - Open source projects get free access - -2. **Get your credentials** from [Account Settings](https://www.browserstack.com/accounts/profile/details) - - You'll need your `Username` and `Access Key` - - Keep these handy for the next step +**Requirements**: Node.js 18+ ([download](https://nodejs.org/en/download)) -### Step 3: Install the Plugin +1. **Get BrowserStack credentials** from [Account Settings](https://www.browserstack.com/accounts/profile/details) + - Free trial available ([sign up](https://www.browserstack.com/users/sign_up)) -1. **Install from Cursor Marketplace** (or manually) - -2. **Add your credentials** to your environment: - - **On macOS/Linux:** +2. **Add to environment**: ```bash - # Open your shell profile - nano ~/.zshrc # or ~/.bashrc if you use bash - - # Add these lines at the end (replace with your actual credentials) - export BROWSERSTACK_USERNAME="your_username_here" - export BROWSERSTACK_ACCESS_KEY="your_access_key_here" - - # Save and reload - source ~/.zshrc - ``` - - **On Windows (PowerShell):** - ```powershell - # Open PowerShell profile - notepad $PROFILE + # macOS/Linux + export BROWSERSTACK_USERNAME="your_username" + export BROWSERSTACK_ACCESS_KEY="your_access_key" - # Add these lines - $env:BROWSERSTACK_USERNAME="your_username_here" - $env:BROWSERSTACK_ACCESS_KEY="your_access_key_here" + # Windows PowerShell + $env:BROWSERSTACK_USERNAME="your_username" + $env:BROWSERSTACK_ACCESS_KEY="your_access_key" ``` -3. **Restart Cursor** to activate the plugin - -4. **Verify installation** by asking Cursor: - ``` - "Open google.com on Chrome" - ``` - -βœ… That's it! You're ready to test. +3. **Restart Cursor** and test: `"Open google.com on Chrome"` ## Common Workflows @@ -128,193 +74,103 @@ Run your existing test suite on BrowserStack (uses **Automate Test Setup** and * πŸ’¬ "Run my tests on Chrome, Firefox, and Safari" πŸ’¬ "Show me available browsers on Automate" ``` +Quick Examples -**Mobile app tests:** -``` -πŸ’¬ "Upload my app to BrowserStack" -πŸ’¬ "Set up Appium tests for iPhone 15 and Galaxy S24" -πŸ’¬ "Run my app tests on top 10 Android devices" -``` - -**Workflow example**: -1. You: *"Setup my Playwright tests to run on BrowserStack"* -2. Cursor configures your test framework with BrowserStack capabilities -3. You: *"Run my tests on Chrome and Edge"* -4. BrowserStack runs your tests in parallel -5. View results, session recordings, and logs -6. If tests fail: *"Help me debug the failures"* - ---- - -### β™Ώ Accessibility Scanning - -Catch accessibility issues before production (uses **Accessibility Fix** skill): - -``` -πŸ’¬ "Scan accessibility issues on localhost:3000" -πŸ’¬ "Fix accessibility problems on my checkout page" -πŸ’¬ "Check WCAG 2.1 AA compliance for my signup form" -``` - -**Use case**: You want to ensure your signup form is accessible before deploying. - -**What happens**: The skill scans your page, identifies violations, provides specific code fixes, and verifies after you implement them. - ---- - -### πŸ“‹ Test Case Management - -Organize and track your testing: - +**Manual Testing** ``` -πŸ’¬ "Create a Test Management project called 'Payment Flow'" -πŸ’¬ "Add a test case: Verify credit card payment with invalid CVV" -πŸ’¬ "List all high priority test cases in Payment Flow" -πŸ’¬ "Create a test run for smoke tests" -πŸ’¬ "Mark test case TC-123 as passed" +"Open localhost:3000 on Safari 17" +"Test my app on iPhone 15 Pro. App: /path/to/app.ipa" +"Take a screenshot" ``` -**Workflow example**: -1. Create project structure -2. Add test cases as you develop features -3. Create test runs before releases -4. Track results and generate reports - ---- - -### πŸ€– AI-Powered Testing - -**Generate test cases from requirements** (uses **Test Case Generator** agent): +**Automated Testing** ``` -πŸ’¬ @test-case-generator - [Attach your PRD file] - "Generate test cases for project PR-12345" - -πŸ’¬ @test-case-generator - "Create test cases for checkout flow with credit card and PayPal" - "Add to project PR-67890" +"Run my Playwright tests on Chrome and Firefox" +"Run Espresso tests on Galaxy S21. App: /app.apk, Tests: /tests.zip" ``` -**Auto-heal flaky tests:** +**Accessibility** ``` -πŸ’¬ "My login test keeps failing because the button selector changed. Fix it with self-healing." -πŸ’¬ "Get self-healed selectors for session session_abc123" +"Scan accessibility issues on localhost:3000" +"What WCAG guidelines apply to form error messages?" ``` -**Convert manual tests to automation:** +**AI Testing** ``` -πŸ’¬ "Convert my manual test case TC-45 into a Playwright script" +@test-case-generator [attach PRD] +"Generate test cases for project PR-12345" ``` ---- - -## Built-in Skills & Agents - -The plugin includes specialized workflows and AI agents to streamline common testing tasks. - -### πŸ”§ Skills (Multi-Step Workflows) - -#### Accessibility Fix -**What it does**: Scans your page for WCAG violations, identifies issues, and provides code fixes. - -**When to use**: Before deployment, fixing accessibility bugs, ensuring compliance. - -**Sample commands**: -``` -πŸ’¬ "Scan accessibility issues on localhost:3000" -πŸ’¬ "Fix the accessibility problems on my checkout page" -πŸ’¬ "Check WCAG 2.1 AA compliance for localhost:8080/signup" +**Test Management** ``` - -**Workflow**: -1. Runs accessibility scan on your page -2. Categorizes issues (Critical/High/Medium) -3. Provides specific code fixes for each issue -4. Re-scans after you implement fixes to verify - -**Example fix output**: -```html - - - - - - - +"Create Test Management project 'Payment Flow'" +"Add test case: Verify credit card payment with invalid CVV" +"Mark test case TC-123 as passed ``` --- #### Automate Test Setup -**What it does**: Sets up and runs automated web tests on BrowserStack Automate across multiple browsers and OS combinations. +**What it does**: Integrates your web test framework with BrowserStack and runs tests across multiple browsers automatically. **When to use**: Running Selenium/Playwright/Cypress tests, CI/CD integration, cross-browser testing. **Sample commands**: ``` -πŸ’¬ "Set up Playwright tests for BrowserStack Automate" -πŸ’¬ "Run my tests on Chrome 120, Firefox 122, and Safari 17" -πŸ’¬ "Show me available browsers on BrowserStack Automate" -πŸ’¬ "Run checkout.test.js in parallel on 5 browsers" +πŸ’¬ "Run my Selenium tests on Chrome and Firefox using BrowserStack" +πŸ’¬ "Setup my Playwright tests for BrowserStack and run on Safari 17" +πŸ’¬ "Run my Cypress tests on Chrome 120 and Edge. Enable Percy." +πŸ’¬ "Get screenshots from Automate session abc123xyz" ``` -**Workflow**: -1. Lists available browsers and OS combinations -2. Helps configure your test framework (Selenium/Playwright/Cypress) -3. Sets browser capabilities for target platforms -4. Runs tests on BrowserStack infrastructure -5. Displays results, logs, and session recordings +**What happens**: +1. Integrates BrowserStack SDK into your test framework +2. Configures tests to run on specified browsers/OS combinations +3. Runs tests on BrowserStack infrastructure +4. Returns session IDs and test results +5. Provides screenshots and error logs for debugging -**Example output**: -```json -// Browser capabilities configured -{ - "browserName": "Chrome", - "browserVersion": "120", - "os": "Windows", - "osVersion": "11" -} +**Example**: +``` +πŸ’¬ "Run my Selenium-JUnit5 tests written in Java on Chrome and Firefox. Enable Percy for visual testing." -βœ“ Tests completed on 3 browsers -βœ“ Session recordings available +βœ“ BrowserStack SDK integrated +βœ“ Tests running on Chrome 120, Firefox 122 +βœ“ Percy visual testing enabled +βœ“ Session IDs: session_abc123, session_xyz789 ``` --- #### App Automate Test Setup -**What it does**: Sets up and runs automated mobile app tests on BrowserStack App Automate with real iOS and Android devices. +**What it does**: Sets up and runs automated mobile app tests on BrowserStack App Automate using `runAppTestsOnBrowserStack` and `takeAppScreenshot` MCP tools. -**When to use**: Testing mobile apps with Appium/XCUITest/Espresso, device matrix testing, mobile CI/CD. +**When to use**: TRuns automated mobile app tests on real iOS and Android devices using your test framework (Appium/XCUITest/Espresso). + +**When to use**: Testing mobile apps, device matrix testing, mobile CI/CD integration. **Sample commands**: ``` -πŸ’¬ "Upload my app to BrowserStack App Automate" -πŸ’¬ "Set up Appium tests for iPhone 15 Pro and Galaxy S24" -πŸ’¬ "Show me available Android devices on App Automate" -πŸ’¬ "Run login.test.js on top 10 iOS and Android devices" -``` - -**Workflow**: -1. Uploads your .ipa or .apk file to BrowserStack -2. Lists available iOS and Android devices -3. Helps configure test framework (Appium/XCUITest/Espresso) -4. Sets device capabilities for target devices -5. Runs tests on real devices -6. Provides app logs, crash reports, and session recordings - -**Example output**: -```json -// Device capabilities configured -{ - "deviceName": "iPhone 15 Pro", - "platformName": "iOS", - "platformVersion": "17", - "app": "bs://abc123xyz" -} +πŸ’¬ "Take a screenshot of my app on iPhone 15 Pro. App: /apps/myapp.ipa" +πŸ’¬ "Run Espresso tests on Galaxy S21 and Pixel 6. App: /apps/app.apk, Tests: /tests/suite.zip" +πŸ’¬ "Run XCUITest tests on iPhone 14 and 15 Pro with iOS 17. Tests: /tests/login.zip" +πŸ’¬ "Get error logs from App Automate session abc123" +``` + +**What happens**: +1. Uploads your app (.ipa or .apk) to BrowserStack +2. Uploads your test suite +3. Runs tests on specified real devices +4. Returns session IDs, test results, and logs +5. Provides error logs and crash reports for debugging +``` +πŸ’¬ "Run Espresso tests from /tests/checkout.zip on Galaxy S21. App: /apps/beta.apk" βœ“ App uploaded: bs://abc123xyz -βœ“ Tests completed on 2 devices -βœ“ Video recordings available +βœ“ Test suite uploaded +βœ“ Running Espresso tests on Samsung Galaxy S21 (Android 12) +βœ“ Session ID: session_xyz789 +βœ“ Build ID: build_abc123 ``` --- @@ -322,9 +178,11 @@ The plugin includes specialized workflows and AI agents to streamline common tes ### πŸ€– AI Agent #### Test Case Generator -**What it does**: Generates comprehensive test cases from requirements, user stories, or PRD documents using BrowserStack AI. +**What it does**: Generates comprehensive test cases from PRD documents using `uploadProductRequirementFile` and `createTestCasesFromFile` MCP tools. -**When to use**: Planning new features, creating test suites, converting requirements to test cases. +**When to use**: PAnalyzes your product requirements and automatically generates comprehensive test cases, adding them to your Test Management project. + +**When to use**: Planning new features, creating test suites, converting requirements to structured test cases. **Sample commands**: ``` @@ -333,18 +191,13 @@ The plugin includes specialized workflows and AI agents to streamline common tes "Generate test cases for Test Management project PR-12345" πŸ’¬ @test-case-generator - "Create test cases for a login feature with email and Google OAuth" - "Add them to project PR-54321" + "Upload PRD from /Users/xyz/login-flow.pdf and generate test cases for project PR-54321" ``` -**Workflow**: -1. Invoke agent with `@test-case-generator` -2. Add requirements file to context (or describe feature) -3. Provide your Test Management project ID (format: `PR-12345`) -4. Agent generates structured test cases -5. Test cases are added to your BrowserStack Test Management project - -**What you get**: +**What happens**: +1. Uploads and analyzes your PRD, PDF, or requirements document +2. AI generates structured test cases with steps and expected results +3. Test cases automatically added to your Test Management project (format: - Test case title and description - Priority level (Critical/High/Medium/Low) - Preconditions @@ -358,15 +211,17 @@ You: @test-case-generator [Attach: login-feature-spec.pdf] "Generate test cases for project PR-12345" -Agent: I'll generate comprehensive test cases for your login feature. - - Test cases generated: - βœ“ TC-001: Login - Valid Credentials - Success (@smoke, @p0) - βœ“ TC-002: Login - Invalid Password - Error (@regression, @p1) - βœ“ TC-003: Login - Google OAuth - Success (@smoke, @p0) - βœ“ TC-004: Login - Empty Fields - Validation (@regression, @p2) +Agent: βœ“ PRD uploaded and analyzed + βœ“ Generated 6 test cases: + + β€’ TC-001: Login - Valid Credentials - Success (@smoke, @p0) + β€’ TC-002: Login - Invalid Password - Error (@regression, @p1) + β€’ TC-003: Login - Google OAuth - Success (@smoke, @p0) + β€’ TC-004: Login - Empty Fields - Validation (@regression, @p2) + β€’ TC-005: Login - Unregistered Email - Error (@regression, @p1) + β€’ TC-006: Login - SQL Injection Prevention (@security, @p1) - Added 4 test cases to Test Management project PR-12345 + All test cases added to Test Management project PR-12345 ``` --- @@ -490,3 +345,8 @@ Agent: I'll generate comprehensive test cases for your login feature. - **Paid Plans**: From $29/month for individuals, custom enterprise pricing See [pricing details](https://www.browserstack.com/pricing) +- **Authentication failed?** Check credentials in [Account Settings](https://www.browserstack.com/accounts/profile/details) +- **Plugin not responding?** Verify `echo $BROWSERSTACK_USERNAME` and restart Cursor +- **Need help?** [GitHub Issues](https://github.com/browserstack/mcp-server/issues) | [Support](https://www.browserstack.com/contactAvailable ([sign up](https://www.browserstack.com/users/sign_up)) +- **Open Source**: Free ([apply](https://www.browserstack.com/open-source)) +- **Paid**: From $29/month ([details](https://www.browserstack.com/pricing) \ No newline at end of file diff --git a/agents/test-case-generator.md b/agents/test-case-generator.md index 2221ba0..1a1ccc9 100644 --- a/agents/test-case-generator.md +++ b/agents/test-case-generator.md @@ -1,12 +1,17 @@ --- name: test-case-generator -description: Generate comprehensive test cases from product requirements, user stories, or PRD documents using BrowserStack AI. +description: Generate comprehensive test cases from product requirements using uploadProductRequirementFile and createTestCasesFromFile MCP tools. Use when converting requirements to test cases. --- # Test Case Generator You help users generate test cases from requirements using BrowserStack's AI-powered test case generation. +## MCP Tools Used + +- `uploadProductRequirementFile` (Tool #20) - Upload PRD/PDF/screenshot files +- `createTestCasesFromFile` (Tool #8) - Generate test cases from uploaded files + ## When to Use - User provides product requirements or user stories @@ -15,65 +20,66 @@ You help users generate test cases from requirements using BrowserStack's AI-pow ## Process -### 1. Get Requirements - -Ask user to provide: -- Text description of the feature -- Or path to PRD file (PDF, image) +### 1. Upload Requirements File -### 2. Generate Test Cases +Use `uploadProductRequirementFile` to upload the PRD: -Use BrowserStack AI to generate test cases: ``` -"Generate test cases for [feature description]" -"Generate test cases from PRD file at [file path]" +"Upload PRD from /Users/xyz/Desktop/login-flow.pdf and use BrowserStack AI to generate test cases" ``` -### 3. Organize in Test Management +**What the tool does:** +- Uploads PDF, screenshot, or requirements document +- Returns a file mapping ID for use in test case generation +- Prepares file for AI processing + +### 2. Generate Test Cases + +Use `createTestCasesFromFile` to generate test cases from the uploaded file: -Create project structure: ``` -"Create Test Management project called '[Project Name]'" -"Add folder '[Feature Name]' to project" +"Upload test cases from '/Users/xyz/testcases.pdf' to the 'Shopping App' project in Test Management" +"Generate test cases for project PR-12345 from the uploaded requirements" ``` -### 4. Review and Add Test Cases +**What the tool does:** +- Analyzes uploaded requirements using AI +- Generates comprehensive test cases +- Automatically adds them to specified Test Management project +- Includes title, steps, expected results, priority, and tags + +### 3. Specify Test Management Project -The AI will generate test cases with: -- Test case title -- Steps to execute -- Expected results -- Priority level +Provide the project identifier (format: `PR-xxxxx`): -Review and add to Test Management: ``` -"Add these test cases to Test Management project" +"Add generated test cases to Test Management project PR-12345" ``` ## Example Workflow -**User**: "Generate test cases for a login feature with email and Google OAuth" +**User**: "@test-case-generator Generate test cases for project PR-12345" +[User attaches: login-feature-spec.pdf] **Your approach**: +1. Upload file: Use `uploadProductRequirementFile` with the attached PDF +2. Generate: Use `createTestCasesFromFile` to create test cases for project PR-12345 +3. Confirm: Report which test cases were generated and added + +**Response**: ``` -I'll generate comprehensive test cases for your login feature. - -First, let me understand the requirements: -- Email/password login -- Google OAuth login -- Forgot password flow -- Any specific error scenarios? - -Then I'll use BrowserStack AI to generate test cases covering: -- Happy path (successful login) -- Error cases (wrong password, unregistered email) -- OAuth flow -- Edge cases (empty fields, SQL injection attempts) - -Once generated, I'll organize them in Test Management: -"Create Test Management project 'User Authentication'" -"Add test cases for email login scenarios" -"Add test cases for OAuth login scenarios" +βœ“ PRD uploaded and analyzed +βœ“ Generated 6 test cases for login feature: + +Test cases added to project PR-12345: +- TC-001: Login - Valid Credentials - Success (@smoke, @p0) +- TC-002: Login - Invalid Password - Error (@regression, @p1) +- TC-003: Login - Unregistered Email - Error (@regression, @p1) +- TC-004: Login - Google OAuth - Success (@smoke, @p0) +- TC-005: Login - Empty Fields - Validation (@regression, @p2) +- TC-006: Login - SQL Injection Prevention (@security, @p1) + +All test cases added to Test Management project PR-12345 ``` ## Test Case Structure @@ -84,12 +90,18 @@ Each generated test case includes: - **Preconditions**: What needs to be set up - **Steps**: Numbered actions to perform - **Expected Results**: What should happen -- **Tags**: @smoke, @regression, @p0, etc. +- **Tags**: @smoke, @regression, @p0, @security, etc. + +## Required Information + +To generate test cases, you need: +1. **Requirements file**: PRD, PDF, or screenshot (uploaded via `uploadProductRequirementFile`) +2. **Project ID**: Test Management project identifier (format: `PR-xxxxx`) ## Tips for Better Test Cases -- Be specific about requirements -- Include edge cases and error scenarios +- Ensure requirements file is detailed and clear +- Include edge cases and error scenarios in requirements - Mention any integrations (third-party services) - Specify target platforms (web, mobile, specific browsers) - Note any compliance requirements (security, accessibility) diff --git a/skills/accessibility-fix/SKILL.md b/skills/accessibility-fix/SKILL.md index cddcbdf..79fa772 100644 --- a/skills/accessibility-fix/SKILL.md +++ b/skills/accessibility-fix/SKILL.md @@ -1,6 +1,6 @@ --- name: accessibility-fix -description: Scan a webpage for accessibility issues, identify violations, generate code fixes, and verify the fixes work. Use when fixing WCAG compliance or accessibility bugs. +description: Scan webpage for accessibility issues using startAccessibilityScan MCP tool, identify WCAG violations, and generate code fixes. Use for WCAG compliance and accessibility bug fixes. --- # Accessibility Fix Workflow @@ -11,16 +11,27 @@ description: Scan a webpage for accessibility issues, identify violations, gener - Need to ensure WCAG compliance - Fixing specific accessibility bugs +## MCP Tools Used + +- `startAccessibilityScan` (Tool #17) - Scan webpage for accessibility issues +- `accessibilityExpert` (Tool #16) - Get WCAG guidelines and best practices + ## Steps ### 1. Run Accessibility Scan -Ask for the URL to scan: +Use `startAccessibilityScan` to scan the webpage: + ``` -"Run accessibility scan on [URL]" +"Run accessibility scan for 'www.example.com'" +"Scan accessibility issues on localhost:3000" +"Run accessibility scan for 'https://mysite.com/checkout'" ``` -Example: `"Run accessibility scan on localhost:3000"` +**What the tool does:** +- Performs comprehensive WCAG 2.0/2.1/2.2 accessibility scan +- Returns result link with detailed violation report +- Categorizes issues by severity (Critical/High/Medium/Low) ### 2. Analyze Results @@ -29,7 +40,21 @@ Review the scan results and categorize issues: - **High**: Major barriers (poor color contrast, missing alt text) - **Medium**: Best practices (heading hierarchy) -### 3. Fix Issues in Code +### 3. Get WCAG Guidelines (Optional) + +Use `accessibilityExpert` for specific guidance: + +``` +"What WCAG guidelines apply to form field error messages on mobile web?" +"How do I fix color contrast issues for WCAG 2.1 AA compliance?" +``` + +**What the tool does:** +- Provides WCAG 2.0/2.1/2.2 compliance guidance +- Answers questions about accessibility best practices +- Covers mobile and web usability standards + +### 4. Fix Issues in Code For each issue, provide specific code fix: @@ -74,31 +99,51 @@ background: #fff; ### 4. Verify Fixes -After user implements fixes: +After user implements fixes, re-scan using `startAccessibilityScan`: + ``` -"Re-scan [URL] to verify accessibility issues are fixed" +"Re-scan www.example.com to verify accessibility issues are fixed" +"Run accessibility scan again on localhost:3000 after fixes" ``` ### 5. Report Results Confirm what was fixed and any remaining issues. +## Common Scenarios + +**Scan and Fix Workflow:** +``` +"Scan accessibility issues on localhost:3000" +β†’ Returns scan results with violations +β†’ Provide code fixes for each issue +β†’ User implements fixes +"Re-scan localhost:3000 to verify fixes" +``` + +**Get WCAG Guidance:** +``` +"What WCAG guidelines apply to form field error messages?" +"How do I ensure my color palette is WCAG 2.1 AA compliant?" +``` + ## Quick Reference **Common WCAG Requirements:** -- Images need alt text -- Color contrast β‰₯ 4.5:1 for text -- All interactive elements keyboard accessible -- Forms have labels -- Proper heading hierarchy (h1 β†’ h2 β†’ h3) +- Images need alt text (WCAG 1.1.1) +- Color contrast β‰₯ 4.5:1 for text (WCAG 1.4.3) +- All interactive elements keyboard accessible (WCAG 2.1.1) +- Forms have labels (WCAG 3.3.2) +- Proper heading hierarchy (WCAG 1.3.1) ## Example **User**: "Fix accessibility issues on my login page at localhost:3000/login" **Workflow**: -1. Scan: `"Run accessibility scan on localhost:3000/login"` -2. Identify: "Found 3 critical issues: missing form labels, poor contrast, no keyboard nav" -3. Fix: Provide code fixes for each issue -4. Verify: `"Re-scan localhost:3000/login"` -5. Confirm: "All critical issues resolved βœ“" +1. Scan: Use `startAccessibilityScan` for "localhost:3000/login" +2. Results: Scan returns violations - 3 critical issues found +3. Identify: "Missing form labels, poor contrast, no keyboard nav" +4. Fix: Provide code fixes for each issue +5. Verify: Use `startAccessibilityScan` again to re-scan +6. Confirm: "All critical issues resolved βœ“" diff --git a/skills/app-automate-test-setup/SKILL.md b/skills/app-automate-test-setup/SKILL.md index 018f5cf..4de0350 100644 --- a/skills/app-automate-test-setup/SKILL.md +++ b/skills/app-automate-test-setup/SKILL.md @@ -1,6 +1,6 @@ --- name: app-automate-test-setup -description: Set up and run automated mobile app tests on BrowserStack App Automate. Use for testing iOS/Android apps with Appium, XCUITest, or Espresso on real devices. +description: Set up and run automated mobile app tests on BrowserStack App Automate using runAppTestsOnBrowserStack and takeAppScreenshot MCP tools. Use for Appium/XCUITest/Espresso testing. --- # App Automate Test Setup Workflow @@ -8,130 +8,105 @@ description: Set up and run automated mobile app tests on BrowserStack App Autom ## When to Use - Testing mobile apps on real iOS and Android devices -- Running Appium tests across device matrix +- Running Appium, XCUITest, or Espresso tests - CI/CD integration for mobile app testing - Device-specific bug reproduction -## Steps +## MCP Tools Used -### 1. Upload Your App +- `takeAppScreenshot` - Launch app and capture verification screenshot +- `runAppTestsOnBrowserStack` - Run automated mobile tests on real devices +- `getFailureLogs` - Retrieve error logs for failed app tests -Upload your .apk (Android) or .ipa (iOS) file: -``` -"Upload my app to BrowserStack App Automate" -``` +## Steps -Or provide app URL: -``` -"Use app at https://example.com/app.apk" -``` +### 1. Verify App Launch (Optional) -### 2. Get Available Devices +Use `takeAppScreenshot` to verify your app launches correctly: -List all devices and OS versions: ``` -"Show me available iOS devices on App Automate" -"Show me available Android devices on App Automate" +"Take a screenshot of my app on iPhone 15 Pro with iOS 17. App path: /Users/me/app.ipa" +"Verify my app launches on Google Pixel 6 with Android 12. App file: /Users/me/app-debug.apk" ``` -### 3. Configure Test +**What the tool does:** +- Launches your app on specified device +- Captures a quick screenshot for verification +- Returns screenshot to confirm app loads correctly -Choose your test framework: +### 2. Run Automated Tests -**For Appium (Java/Python/Node.js/Ruby):** -``` -"Help me set up Appium tests for BrowserStack App Automate" -``` +Use `runAppTestsOnBrowserStack` to execute your test suite: -**For XCUITest (iOS native):** ``` -"Configure XCUITest to run on BrowserStack" +"Run Espresso tests from /tests/checkout.zip on Galaxy S21 and Pixel 6 with Android 12. App path: /apps/beta-release.apk" +"Run XCUITest tests on iPhone 14 and iPhone 15 Pro with iOS 17. Test suite: /tests/login-tests.zip" +"Run my Appium tests on Samsung Galaxy S23 (Android 14). App: /apps/myapp.apk, Tests: /tests/suite.zip" ``` -**For Espresso (Android native):** -``` -"Set up Espresso tests for BrowserStack" -``` +**What the tool does:** +- Uploads your app to BrowserStack (gets bs:// URL) +- Uploads your test suite +- Runs tests on specified real devices +- Returns session IDs and test results -### 4. Set Device Capabilities +**Supported Test Frameworks:** +- Espresso (Android native) +- XCUITest (iOS native) +- Appium (cross-platform) -Specify which devices to test on: -``` -"I want to test on iPhone 15 Pro (iOS 17) and Samsung Galaxy S23 (Android 14)" -``` +### 3. Debug Failures -The agent will help configure capabilities like: -```json -{ - "deviceName": "iPhone 15 Pro", - "platformName": "iOS", - "platformVersion": "17", - "app": "bs://app-id" -} -``` - -### 5. Run Tests - -Execute your test suite: -``` -"Run my app tests on BrowserStack App Automate" -``` +Retrieve error logs using `getFailureLogs`: -Or run specific tests: ``` -"Run login.test.js on iPhone 15 and Galaxy S23" -``` - -### 6. View Results - -Check test execution results: -``` -"Show me the latest App Automate test results" -"Get the session recording for the last test run" +"Get error logs from App Automate session ID abc123, Build ID xyz789" +"Show me failure logs from my last app test run" ``` ## Common Scenarios -**Device Matrix Testing:** +**Quick App Verification:** ``` -"Run tests on top 10 iOS devices and top 10 Android devices" +"Take a screenshot of my app on iPhone 15 Pro to verify it launches" +"Check if my app opens correctly on Galaxy S24 with Android 14" ``` -**Debugging Failed Tests:** +**Run Test Suites:** ``` -"Show me app logs and device logs for the failed test" -"Get screenshots and video from the test session" +"Run Espresso tests on Google Pixel 7 and Samsung Galaxy S23" +"Run XCUITest suite on iPhone 14 Pro and iPhone 15" +"Run Appium tests across 5 Android devices" ``` -**Testing Different OS Versions:** +**Device Matrix Testing:** ``` -"Test on iOS 16, 17, and 18" -"Test on Android 12, 13, and 14" +"Run my tests on iPhone 14, 15, and 15 Pro with iOS 17" +"Test on Galaxy S21, S22, S23 with Android 13 and 14" ``` -**Network Simulation:** +**Debug Test Failures:** ``` -"Run tests with 3G network speed" -"Test under airplane mode conditions" +"Get error logs and screenshots from my failed app test session" +"Show me what went wrong in session abc123" ``` -## Example +## Example Workflow -**User**: "I need to test my login feature on latest iPhone and Samsung phones" +**User**: "I need to test my checkout flow on iPhone 15 and Galaxy S24" -**Workflow**: -1. Upload app: `"Upload MyApp.ipa to BrowserStack"` -2. Get devices: `"Show latest iPhone and Samsung devices"` -3. Configure: `"Set up Appium tests for iPhone 15 Pro and Galaxy S24"` -4. Run: `"Run login.test.js on both devices"` -5. Results: `"Show test results and any crashes"` -6. Debug: If failures β†’ `"Get app logs and crash reports"` +**Steps**: +1. Verify app: `"Take screenshot of my app on iPhone 15 Pro. App: /apps/myapp.ipa"` +2. Run tests: `"Run XCUITest tests on iPhone 15 Pro and Appium tests on Galaxy S24. App: /apps/myapp.ipa, Tests: /tests/checkout.zip"` +3. Tool executes: `runAppTestsOnBrowserStack` uploads app, runs tests on both devices +4. View results and session IDs +5. If failures: `"Get error logs from the failed sessions"` ## Quick Tips -- Upload apps once, reuse the app_url across tests -- Test on devices matching your user base -- Use network throttling to test under poor conditions -- Enable video recording for visual debugging -- Check device logs for native crashes -- Test different device orientations (portrait/landscape) +- Provide full file paths for app (.ipa or .apk) and test suite (.zip) +- Specify device name, OS, and version for precise targeting +- Use `takeAppScreenshot` first to verify app launches +- Session IDs and Build IDs are returned for debugging +- Supports Espresso, XCUITest, and Appium test frameworks +- Tests run on real physical devices, not emulators diff --git a/skills/automate-test-setup/SKILL.md b/skills/automate-test-setup/SKILL.md index c979070..8138757 100644 --- a/skills/automate-test-setup/SKILL.md +++ b/skills/automate-test-setup/SKILL.md @@ -1,6 +1,6 @@ --- name: automate-test-setup -description: Set up and run automated web tests on BrowserStack Automate. Use for cross-browser testing, CI/CD integration, or running existing Selenium/Playwright/Cypress tests on real browsers. +description: Set up and run automated web tests on BrowserStack Automate using setupBrowserStackAutomateTests MCP tool. Use for cross-browser testing with Selenium/Playwright/Cypress. --- # Automate Test Setup Workflow @@ -12,104 +12,88 @@ description: Set up and run automated web tests on BrowserStack Automate. Use fo - Testing on real desktop browsers (Chrome, Firefox, Safari, Edge) - Debugging cross-browser compatibility issues -## Steps +## MCP Tools Used -### 1. Get Available Browsers +- `setupBrowserStackAutomateTests` - Integrate BrowserStack SDK and run tests +- `fetchAutomationScreenshots` - Get screenshots from test sessions +- `getFailureLogs` - Retrieve error logs for failed tests -List all browsers and OS combinations: -``` -"Show me available browsers on BrowserStack Automate" -``` +## Steps -### 2. Configure Test +### 1. Setup and Run Tests -Choose your test framework and configuration: +Use the `setupBrowserStackAutomateTests` MCP tool: -**For Selenium (Java/Python/Node.js):** ``` -"Help me set up Selenium tests for BrowserStack Automate" +"Run my Selenium tests on Chrome and Firefox using BrowserStack" +"Setup my Playwright tests for BrowserStack and run on Safari 17" +"Run my Cypress tests on Chrome 120 (Windows 11) and Edge (Windows 11)" ``` -**For Playwright:** -``` -"Configure Playwright to run on BrowserStack" -``` +**What the tool does:** +- Integrates BrowserStack SDK into your test framework +- Configures browser capabilities automatically +- Runs tests on BrowserStack infrastructure +- Optionally enables Percy for visual testing -**For Cypress:** +**Example:** ``` -"Set up Cypress for BrowserStack Automate" +"Run my Selenium-JUnit5 tests written in Java on Chrome and Firefox. Enable Percy for visual testing." ``` -### 3. Set Browser Capabilities +### 2. Get Screenshots -Specify which browsers to test on: -``` -"I want to test on Chrome 120 (Windows 11) and Safari 17 (macOS Sonoma)" -``` - -The agent will help configure capabilities like: -```json -{ - "browserName": "Chrome", - "browserVersion": "120", - "os": "Windows", - "osVersion": "11" -} -``` +Fetch screenshots from test sessions using `fetchAutomationScreenshots`: -### 4. Run Tests - -Execute your test suite: ``` -"Run my tests on BrowserStack Automate" +"Get screenshots from Automate session ID abc123xyz" +"Show me screenshots from my last test run" ``` -Or run specific tests: -``` -"Run login.test.js on Chrome and Firefox" -``` +### 3. Debug Failures -### 5. View Results +Retrieve error logs using `getFailureLogs`: -Check test execution results: ``` -"Show me the latest Automate test results" -"Get the session recording for the last test run" +"Get error logs from session ID 21a864032a7459f1e7634222249b316759d6827f" +"Show me failure logs from my last Automate test" ``` ## Common Scenarios -**Parallel Testing:** +**Setup Different Test Frameworks:** ``` -"Run tests in parallel across 5 browsers" +"Setup my Playwright tests for BrowserStack Automate" +"Run my Selenium WebDriver tests on Chrome, Firefox, and Safari" +"Configure my Cypress tests to run on BrowserStack" ``` -**Debugging Failed Tests:** +**Enable Visual Testing:** ``` -"Show me console logs and network logs for the failed test" -"Get screenshots from the test session" +"Run my tests on BrowserStack with Percy enabled for visual regression testing" ``` -**Local Testing:** +**Debug Failed Tests:** ``` -"Set up BrowserStack Local for testing localhost" +"Get screenshots and error logs from session abc123" +"Show me what went wrong in my last Automate test run" ``` -## Example +## Example Workflow -**User**: "I need to test my checkout flow on Chrome, Firefox, and Safari" +**User**: "I need to run my Playwright tests on Chrome, Firefox, and Safari" -**Workflow**: -1. Get browsers: `"Show available browsers on Automate"` -2. Configure: `"Set up Selenium tests for Chrome 120, Firefox 122, Safari 17"` -3. Run: `"Run checkout.test.js on all three browsers"` -4. Results: `"Show me test results and any failures"` -5. Debug: If failures β†’ `"Get screenshots and logs for failed tests"` +**Steps**: +1. Setup: `"Setup my Playwright tests for BrowserStack and run on Chrome 120, Firefox 122, Safari 17"` +2. Tool executes: `setupBrowserStackAutomateTests` configures and runs tests +3. View results from BrowserStack dashboard or test output +4. If failures: `"Get error logs from the failed session"` +5. Debug: `"Show me screenshots from session XYZ"` ## Quick Tips -- Use parallel testing to speed up execution -- Enable video recording for debugging -- Set up BrowserStack Local for testing internal environments -- Use tags to organize test runs -- Check the Automate dashboard for detailed reports +- Specify test framework (Selenium/Playwright/Cypress) in your prompt +- Include browser names and versions for precise targeting +- Use Percy integration for visual regression testing +- Session IDs are returned after test runs for debugging +- Screenshots and logs help diagnose cross-browser issues From ca75d100afe58b20bfbb5b487ac034946558541a Mon Sep 17 00:00:00 2001 From: Vishal Shah Date: Mon, 9 Feb 2026 15:50:53 +0530 Subject: [PATCH 6/8] Updated readme and did renaming --- README.md | 422 +++++++----------- .../SKILL.md | 6 +- .../SKILL.md | 6 +- .../SKILL.md | 4 +- 4 files changed, 164 insertions(+), 274 deletions(-) rename skills/{app-automate-test-setup => run-mobile-tests-on-browserstack}/SKILL.md (92%) rename skills/{automate-test-setup => run-web-tests-on-browserstack}/SKILL.md (92%) rename skills/{accessibility-fix => scan-and-fix-accessibility}/SKILL.md (98%) diff --git a/README.md b/README.md index faed386..4fcabe7 100644 --- a/README.md +++ b/README.md @@ -1,352 +1,242 @@ # BrowserStack for Cursor -Test websites and mobile apps on 3,500+ real devices and browsers directly from Cursor using natural language. +Access BrowserStack's complete testing platform directly from Cursor using natural language. Test on 3,500+ real devices and browsers, run automated tests, scan for accessibility issues, and generate test cases from requirementsβ€”all without leaving your IDE. -## What You Can Do +## Getting Started -- Test localhost on iPhone 15 Pro Max or Safari 17 without owning a Mac -- Debug app crashes on Android 14 in real-time -- Run Playwright/Selenium tests on 50+ browser/OS combinations -- Generate test cases from PRD documents with AI -- Scan and fix accessibility issues (WCAG compliance) -- Auto-heal flaky tests +### Prerequisites -## Setup +- Node.js 18 or higher ([download](https://nodejs.org/en/download)) +- BrowserStack account ([sign up for free trial](https://www.browserstack.com/users/sign_up)) -**Requirements**: Node.js 18+ ([download](https://nodejs.org/en/download)) +### Installation -1. **Get BrowserStack credentials** from [Account Settings](https://www.browserstack.com/accounts/profile/details) - - Free trial available ([sign up](https://www.browserstack.com/users/sign_up)) +1. **Get your BrowserStack credentials** from [Account Settings](https://www.browserstack.com/accounts/profile/details) -2. **Add to environment**: - ```bash - # macOS/Linux - export BROWSERSTACK_USERNAME="your_username" - export BROWSERSTACK_ACCESS_KEY="your_access_key" - - # Windows PowerShell - $env:BROWSERSTACK_USERNAME="your_username" - $env:BROWSERSTACK_ACCESS_KEY="your_access_key" +2. **Configure MCP settings in Cursor**: + - Open Cursor Settings + - Navigate to MCP configuration + - Add BrowserStack credentials: + + ```json + { + "mcpServers": { + "browserstack": { + "command": "npx", + "args": ["-y", "@browserstack/mcp-server@latest"], + "env": { + "BROWSERSTACK_USERNAME": "your_username", + "BROWSERSTACK_ACCESS_KEY": "your_access_key" + } + } + } + } ``` -3. **Restart Cursor** and test: `"Open google.com on Chrome"` +3. **Restart Cursor** and verify: + ``` + "Open google.com on Chrome" + ``` -## Common Workflows +## What's Included -### πŸš€ Quick Manual Testing +### Skills -Testing your local development site on different browsers: +- **scan-and-fix-accessibility** - Scan webpages for WCAG violations and get code fixes +- **run-web-tests-on-browserstack** - Run Selenium/Playwright/Cypress tests on multiple browsers +- **run-mobile-tests-on-browserstack** - Run Appium/XCUITest/Espresso tests on real devices -``` -πŸ’¬ "Open my website running on localhost:3000 on Safari 17" -πŸ’¬ "Test localhost:8080 on the latest Chrome on Windows 11" -πŸ’¬ "Open my site on Firefox on macOS" -πŸ’¬ "Take a screenshot of this page" -``` +### Agents -**Use case**: You're developing a feature and need to check if it works on Safari, but you're on Windows. +- **test-case-generator** - Generate test cases from PRD documents using AI ---- +### MCP Tools (20 Available) -### πŸ“± Mobile App Testing +**Test Management** +- `createProjectOrFolder` - Create Test Management projects and folders +- `createTestCase` - Add manual test cases to projects +- `listTestCases` - List test cases with filters (priority, status, tags) +- `createTestRun` - Create test runs for selected test cases +- `listTestRuns` - List test runs with date/assignee filters +- `updateTestRun` - Update test run status, tags, notes +- `addTestResult` - Add execution results (passed/failed/blocked/skipped) +- `createTestCasesFromFile` - Bulk create test cases from uploaded files + +**Automate (Web Testing)** +- `setupBrowserStackAutomateTests` - Integrate SDK and run web tests +- `fetchAutomationScreenshots` - Get screenshots from test sessions +- `getFailureLogs` - Retrieve error logs for failed tests + +**App Automate (Mobile Testing)** +- `takeAppScreenshot` - Launch app and capture screenshot +- `runAppTestsOnBrowserStack` - Run automated mobile tests on real devices + +**Live Testing** +- `runBrowserLiveSession` - Start manual browser testing session +- `runAppLiveSession` - Start manual app testing session on real devices -Test your mobile app on real devices: +**Accessibility** +- `startAccessibilityScan` - Scan webpages for WCAG violations +- `accessibilityExpert` - Get WCAG guidelines and best practices -``` -πŸ’¬ "Open my app on iPhone 15 Pro Max" - (Cursor will ask for your .ipa or .apk file path) +**AI Agents** +- `uploadProductRequirementFile` - Upload PRD/PDF for test case generation +- `fetchSelfHealedSelectors` - Get AI-healed selectors for flaky tests +- `createLCASteps` - Convert manual test cases to low-code automation -πŸ’¬ "Test my app on Galaxy S24 with Android 14" -πŸ’¬ "My app crashes on iOS 17 when I tap the login button, help me debug" -``` +## Use Cases -**Use case**: You don't have physical access to an iPhone 15 Pro Max but need to verify the login flow works. +### 1. Generate Test Cases from Requirements ---- +**What**: Upload PRD documents and automatically generate comprehensive test cases with AI. -### πŸ§ͺ Running Automated Tests +**Agent**: `test-case-generator` (invoke with `@test-case-generator`) -Run your existing test suite on BrowserStack (uses **Automate Test Setup** and **App Automate Test Setup** skills): +**Tools**: `uploadProductRequirementFile`, `createTestCasesFromFile` -**Web tests:** -``` -πŸ’¬ "Setup my Playwright tests to run on BrowserStack" -πŸ’¬ "Run my tests on Chrome, Firefox, and Safari" -πŸ’¬ "Show me available browsers on Automate" +**Examples**: ``` -Quick Examples +@test-case-generator +[Attach your PRD file] +"Generate test cases for Test Management project PR-12345" -**Manual Testing** -``` -"Open localhost:3000 on Safari 17" -"Test my app on iPhone 15 Pro. App: /path/to/app.ipa" -"Take a screenshot" +@test-case-generator +"Upload PRD from /Users/xyz/login-flow.pdf and generate test cases for project PR-54321" ``` -**Automated Testing** -``` -"Run my Playwright tests on Chrome and Firefox" -"Run Espresso tests on Galaxy S21. App: /app.apk, Tests: /tests.zip" -``` +**What you get**: +- Test cases with title, steps, expected results, priority, and tags +- Automatically added to your Test Management project (PR-xxxxx format) +- Coverage of happy paths, error scenarios, edge cases, security -**Accessibility** -``` -"Scan accessibility issues on localhost:3000" -"What WCAG guidelines apply to form error messages?" -``` +--- -**AI Testing** -``` -@test-case-generator [attach PRD] -"Generate test cases for project PR-12345" -``` +### 2. Manage Test Cases and Runs -**Test Management** +**What**: Organize test cases, create test runs, and track results. + +**Tools**: `createProjectOrFolder`, `createTestCase`, `listTestCases`, `createTestRun`, `addTestResult` + +**Examples**: ``` -"Create Test Management project 'Payment Flow'" -"Add test case: Verify credit card payment with invalid CVV" -"Mark test case TC-123 as passed +"Create a Test Management project called 'Payment Flow'" +"Add a test case: Verify credit card payment with invalid CVV" +"List all high priority test cases in Payment Flow" +"Create a test run for smoke tests" +"Mark test case TC-123 as passed" ``` --- -#### Automate Test Setup -**What it does**: Integrates your web test framework with BrowserStack and runs tests across multiple browsers automatically. - -**When to use**: Running Selenium/Playwright/Cypress tests, CI/CD integration, cross-browser testing. +### 3. Manual Testing on Real Devices -**Sample commands**: -``` -πŸ’¬ "Run my Selenium tests on Chrome and Firefox using BrowserStack" -πŸ’¬ "Setup my Playwright tests for BrowserStack and run on Safari 17" -πŸ’¬ "Run my Cypress tests on Chrome 120 and Edge. Enable Percy." -πŸ’¬ "Get screenshots from Automate session abc123xyz" -``` +**What**: Test your website or app on real browsers and devices on BrowserStack -**What happens**: -1. Integrates BrowserStack SDK into your test framework -2. Configures tests to run on specified browsers/OS combinations -3. Runs tests on BrowserStack infrastructure -4. Returns session IDs and test results -5. Provides screenshots and error logs for debugging +**Tools**: `runBrowserLiveSession`, `runAppLiveSession` -**Example**: +**Examples**: ``` -πŸ’¬ "Run my Selenium-JUnit5 tests written in Java on Chrome and Firefox. Enable Percy for visual testing." - -βœ“ BrowserStack SDK integrated -βœ“ Tests running on Chrome 120, Firefox 122 -βœ“ Percy visual testing enabled -βœ“ Session IDs: session_abc123, session_xyz789 +"Open localhost:3000 on Safari 17" +"Test my website on Chrome 120 Windows 11" +"Open my app on iPhone 15 Pro Max. App: /path/to/app.ipa" +"Take a screenshot of the current page" ``` --- -#### App Automate Test Setup -**What it does**: Sets up and runs automated mobile app tests on BrowserStack App Automate using `runAppTestsOnBrowserStack` and `takeAppScreenshot` MCP tools. +### 4. Run Automated Web Tests -**When to use**: TRuns automated mobile app tests on real iOS and Android devices using your test framework (Appium/XCUITest/Espresso). +**What**: Execute Selenium, Playwright, or Cypress tests across multiple browsers on BrowserStack infrastructure. -**When to use**: Testing mobile apps, device matrix testing, mobile CI/CD integration. +**Skill**: `run-web-tests-on-browserstack` -**Sample commands**: -``` -πŸ’¬ "Take a screenshot of my app on iPhone 15 Pro. App: /apps/myapp.ipa" -πŸ’¬ "Run Espresso tests on Galaxy S21 and Pixel 6. App: /apps/app.apk, Tests: /tests/suite.zip" -πŸ’¬ "Run XCUITest tests on iPhone 14 and 15 Pro with iOS 17. Tests: /tests/login.zip" -πŸ’¬ "Get error logs from App Automate session abc123" -``` +**Tools**: `setupBrowserStackAutomateTests`, `fetchAutomationScreenshots`, `getFailureLogs` -**What happens**: -1. Uploads your app (.ipa or .apk) to BrowserStack -2. Uploads your test suite -3. Runs tests on specified real devices -4. Returns session IDs, test results, and logs -5. Provides error logs and crash reports for debugging +**Examples**: ``` -πŸ’¬ "Run Espresso tests from /tests/checkout.zip on Galaxy S21. App: /apps/beta.apk" - -βœ“ App uploaded: bs://abc123xyz -βœ“ Test suite uploaded -βœ“ Running Espresso tests on Samsung Galaxy S21 (Android 12) -βœ“ Session ID: session_xyz789 -βœ“ Build ID: build_abc123 +"Run my Playwright tests on Chrome and Firefox using BrowserStack" +"Setup my Selenium tests for BrowserStack and run on Safari 17" +"Run my Cypress tests on Chrome 120 and Edge. Enable Percy." +"Get screenshots from Automate session abc123xyz" +"Get error logs from session ID 21a864032a7459f1e7634222249b316759d6827f" ``` --- -### πŸ€– AI Agent +### 5. Run Automated Mobile App Tests -#### Test Case Generator -**What it does**: Generates comprehensive test cases from PRD documents using `uploadProductRequirementFile` and `createTestCasesFromFile` MCP tools. +**What**: Execute Appium, XCUITest, or Espresso tests on real iOS and Android devices. -**When to use**: PAnalyzes your product requirements and automatically generates comprehensive test cases, adding them to your Test Management project. +**Skill**: `run-mobile-tests-on-browserstack` -**When to use**: Planning new features, creating test suites, converting requirements to structured test cases. +**Tools**: `takeAppScreenshot`, `runAppTestsOnBrowserStack`, `getFailureLogs` -**Sample commands**: +**Examples**: ``` -πŸ’¬ @test-case-generator - [Add your PRD file or requirements document to context] - "Generate test cases for Test Management project PR-12345" - -πŸ’¬ @test-case-generator - "Upload PRD from /Users/xyz/login-flow.pdf and generate test cases for project PR-54321" -``` - -**What happens**: -1. Uploads and analyzes your PRD, PDF, or requirements document -2. AI generates structured test cases with steps and expected results -3. Test cases automatically added to your Test Management project (format: -- Test case title and description -- Priority level (Critical/High/Medium/Low) -- Preconditions -- Step-by-step test steps -- Expected results -- Appropriate tags (@smoke, @regression, @p0, etc.) - -**Example interaction**: -``` -You: @test-case-generator - [Attach: login-feature-spec.pdf] - "Generate test cases for project PR-12345" - -Agent: βœ“ PRD uploaded and analyzed - βœ“ Generated 6 test cases: - - β€’ TC-001: Login - Valid Credentials - Success (@smoke, @p0) - β€’ TC-002: Login - Invalid Password - Error (@regression, @p1) - β€’ TC-003: Login - Google OAuth - Success (@smoke, @p0) - β€’ TC-004: Login - Empty Fields - Validation (@regression, @p2) - β€’ TC-005: Login - Unregistered Email - Error (@regression, @p1) - β€’ TC-006: Login - SQL Injection Prevention (@security, @p1) - - All test cases added to Test Management project PR-12345 +"Take a screenshot of my app on iPhone 15 Pro. App: /apps/myapp.ipa" +"Run Espresso tests on Galaxy S21 and Pixel 6. App: /apps/app.apk, Tests: /tests/suite.zip" +"Run XCUITest tests on iPhone 14 and 15 Pro with iOS 17. Tests: /tests/login.zip" +"Get error logs from App Automate session abc123, Build ID xyz789" ``` --- -## Real Examples +### 6. Auto-Heal Flaky Tests -### Example 1: Cross-Browser Bug Fix +**What**: Fix test failures caused by changed selectors using AI self-healing. -**Scenario**: Users report a broken layout on Safari. +**Tools**: `fetchSelfHealedSelectors` +**Examples**: ``` -πŸ’¬ "Open localhost:3000/dashboard on Safari 17 on macOS Sonoma" - β†’ BrowserStack opens a real Safari session - β†’ You see the layout is indeed broken - -πŸ’¬ "Take a screenshot of this page" - β†’ Screenshot saved to your project - -πŸ’¬ "Now open the same page on Chrome to compare" - β†’ Opens Chrome session - β†’ Layout works fine - -πŸ’¬ "What CSS properties might cause this Safari-specific issue?" - β†’ Cursor analyzes your code and suggests the problem +"My login test keeps failing because the button selector changed. Fix it with self-healing." +"Get self-healed selectors for session session_abc123" ``` -### Example 2: Mobile App Crash Debug +--- -**Scenario**: Your iOS app crashes on launch for some users. +### 7. Scan and Fix Accessibility Issues -``` -πŸ’¬ "Open my app on iPhone 14 with iOS 16" - (Provide path: /Users/me/builds/app-v2.1.ipa) - β†’ App launches successfully - -πŸ’¬ "Try on iPhone 15 with iOS 17" - β†’ App crashes! - -πŸ’¬ "Get the crash logs for this session" - β†’ Cursor retrieves logs - -πŸ’¬ "Analyze these crash logs and suggest a fix" - β†’ Cursor identifies the issue and suggests code changes -``` +**What**: Identify WCAG violations on your webpage and get specific code fixes. -### Example 3: Automated Test Failure Investigation +**Skill**: `scan-and-fix-accessibility` -**Scenario**: Your CI pipeline shows test failures on BrowserStack. +**Tools**: `startAccessibilityScan`, `accessibilityExpert` +**Examples**: ``` -πŸ’¬ "My Automate build 'feature-branch-123' has 3 failed tests. What went wrong?" - β†’ Cursor fetches error logs and screenshots - -πŸ’¬ "Show me screenshots from the failed tests" - β†’ Screenshots displayed - -πŸ’¬ "The login button selector seems wrong. Update my test file with the correct selector." - β†’ Cursor updates your test file - -πŸ’¬ "Re-run the tests" - β†’ Tests pass βœ… +"Run accessibility scan for 'localhost:3000'" +"Scan accessibility issues on www.mysite.com/checkout" +"What WCAG guidelines apply to form field error messages?" +"Re-scan localhost:3000 to verify fixes" ``` -## What's Available - -**Manual Testing** -- Test websites on any browser/OS combination -- Test mobile apps on 3,500+ real devices -- Access localhost from cloud devices (no deployment needed) - -**Automated Testing** -- Run Playwright, Selenium, Cypress, and more -- Parallel test execution across browsers -- Get screenshots, videos, and logs automatically - -**Test Management** -- Create and organize test cases -- Track test execution and results -- Generate test reports - -**Accessibility Testing** -- WCAG 2.0/2.1/2.2 compliance scanning -- AI-powered fix suggestions -- Local and production site scanning - -**AI-Powered Features** -- Generate test cases from requirements documents -- Auto-heal flaky test selectors -- Convert manual tests to automation -- Intelligent failure analysis and debugging +**What you get**: +- Detailed violation report (Critical/High/Medium severity) +- Specific code fixes for each issue (missing labels, color contrast, keyboard navigation) +- WCAG compliance verification after fixes ## Troubleshooting -**Plugin not responding?** -- Verify your credentials are set correctly: `echo $BROWSERSTACK_USERNAME` -- Restart Cursor after adding credentials -- Check Node.js version: `node --version` (need 18+) - -**"Authentication failed" error?** -- Double-check your username and access key from [Account Settings](https://www.browserstack.com/accounts/profile/details) -- Make sure there are no extra spaces in your environment variables - -**Can't access localhost?** -- This works automatically! Just use `localhost:PORT` in your prompts -- BrowserStack creates a secure tunnel to your local machine +**Authentication Issues** +- Verify credentials in [Account Settings](https://www.browserstack.com/accounts/profile/details) +- Check MCP configuration in Cursor settings +- Ensure no extra spaces in username/access key -**Behind a corporate firewall?** -- Contact your IT team to allowlist BrowserStack domains -- Or ask us about enterprise firewall configurations +**Plugin Not Responding** +- Restart Cursor after configuration changes +- Check Node.js version: `node --version` (need 18+) +- View MCP server logs in Cursor -## Get Help +**Need Help?** +- [GitHub Issues](https://github.com/browserstack/mcp-server/issues) - Report bugs or issues +- [BrowserStack Support](https://www.browserstack.com/contact) - Platform questions +- [Documentation](https://www.browserstack.com/docs) - Detailed guides -- **Issues with the plugin**: [Open a GitHub issue](https://github.com/browserstack/mcp-server/issues) -- **BrowserStack platform questions**: [Contact Support](https://www.browserstack.com/contact) -- **Documentation**: [BrowserStack Docs](https://www.browserstack.com/docs) +--- ## Pricing -- **Free Trial**: Test drive with limited minutes -- **Open Source**: Free for qualifying projects ([apply here](https://www.browserstack.com/open-source)) -- **Paid Plans**: From $29/month for individuals, custom enterprise pricing - -See [pricing details](https://www.browserstack.com/pricing) -- **Authentication failed?** Check credentials in [Account Settings](https://www.browserstack.com/accounts/profile/details) -- **Plugin not responding?** Verify `echo $BROWSERSTACK_USERNAME` and restart Cursor -- **Need help?** [GitHub Issues](https://github.com/browserstack/mcp-server/issues) | [Support](https://www.browserstack.com/contactAvailable ([sign up](https://www.browserstack.com/users/sign_up)) -- **Open Source**: Free ([apply](https://www.browserstack.com/open-source)) -- **Paid**: From $29/month ([details](https://www.browserstack.com/pricing) \ No newline at end of file +- **Free Trial** - Get started with limited minutes ([sign up](https://www.browserstack.com/users/sign_up)) +- **Open Source** - Free access for qualifying projects ([apply](https://www.browserstack.com/open-source)) +- **Paid Plans** - From $29/month ([view pricing](https://www.browserstack.com/pricing)) diff --git a/skills/app-automate-test-setup/SKILL.md b/skills/run-mobile-tests-on-browserstack/SKILL.md similarity index 92% rename from skills/app-automate-test-setup/SKILL.md rename to skills/run-mobile-tests-on-browserstack/SKILL.md index 4de0350..fedbfca 100644 --- a/skills/app-automate-test-setup/SKILL.md +++ b/skills/run-mobile-tests-on-browserstack/SKILL.md @@ -1,9 +1,9 @@ --- -name: app-automate-test-setup -description: Set up and run automated mobile app tests on BrowserStack App Automate using runAppTestsOnBrowserStack and takeAppScreenshot MCP tools. Use for Appium/XCUITest/Espresso testing. +name: run-mobile-tests-on-browserstack +description: Run automated mobile app tests on BrowserStack App Automate using runAppTestsOnBrowserStack and takeAppScreenshot MCP tools. Use for Appium/XCUITest/Espresso testing. --- -# App Automate Test Setup Workflow +# Run Mobile Tests on BrowserStack ## When to Use diff --git a/skills/automate-test-setup/SKILL.md b/skills/run-web-tests-on-browserstack/SKILL.md similarity index 92% rename from skills/automate-test-setup/SKILL.md rename to skills/run-web-tests-on-browserstack/SKILL.md index 8138757..21f40c1 100644 --- a/skills/automate-test-setup/SKILL.md +++ b/skills/run-web-tests-on-browserstack/SKILL.md @@ -1,9 +1,9 @@ --- -name: automate-test-setup -description: Set up and run automated web tests on BrowserStack Automate using setupBrowserStackAutomateTests MCP tool. Use for cross-browser testing with Selenium/Playwright/Cypress. +name: run-web-tests-on-browserstack +description: Run automated web tests on BrowserStack Automate using setupBrowserStackAutomateTests MCP tool. Use for cross-browser testing with Selenium/Playwright/Cypress. --- -# Automate Test Setup Workflow +# Run Web Tests on BrowserStack ## When to Use diff --git a/skills/accessibility-fix/SKILL.md b/skills/scan-and-fix-accessibility/SKILL.md similarity index 98% rename from skills/accessibility-fix/SKILL.md rename to skills/scan-and-fix-accessibility/SKILL.md index 79fa772..43cae4d 100644 --- a/skills/accessibility-fix/SKILL.md +++ b/skills/scan-and-fix-accessibility/SKILL.md @@ -1,9 +1,9 @@ --- -name: accessibility-fix +name: scan-and-fix-accessibility description: Scan webpage for accessibility issues using startAccessibilityScan MCP tool, identify WCAG violations, and generate code fixes. Use for WCAG compliance and accessibility bug fixes. --- -# Accessibility Fix Workflow +# Scan and Fix Accessibility ## When to Use From 0ef34976ec0489ccb722d5bf8af0348832058858 Mon Sep 17 00:00:00 2001 From: Vishal Shah Date: Mon, 9 Feb 2026 16:03:53 +0530 Subject: [PATCH 7/8] Updated README --- README.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 4fcabe7..c282cc2 100644 --- a/README.md +++ b/README.md @@ -25,8 +25,8 @@ Access BrowserStack's complete testing platform directly from Cursor using natur "command": "npx", "args": ["-y", "@browserstack/mcp-server@latest"], "env": { - "BROWSERSTACK_USERNAME": "your_username", - "BROWSERSTACK_ACCESS_KEY": "your_access_key" + "BROWSERSTACK_USERNAME": "${BROWSERSTACK_USERNAME}", + "BROWSERSTACK_ACCESS_KEY": "${BROWSERSTACK_ACCESS_KEY}" } } } @@ -235,8 +235,10 @@ Access BrowserStack's complete testing platform directly from Cursor using natur --- -## Pricing +## How to Sign Up for BrowserStack? -- **Free Trial** - Get started with limited minutes ([sign up](https://www.browserstack.com/users/sign_up)) -- **Open Source** - Free access for qualifying projects ([apply](https://www.browserstack.com/open-source)) -- **Paid Plans** - From $29/month ([view pricing](https://www.browserstack.com/pricing)) +1. **Create a free account** at [browserstack.com/users/sign_up](https://www.browserstack.com/users/sign_up) + - No credit card required + - Instant access to start testing + +2. **Get your credentials** from [Account Settings](https://www.browserstack.com/accounts/profile/details) to configure the plugin From 2a2f63e440ccd04130ed589aede6558003b4fdae Mon Sep 17 00:00:00 2001 From: francisf Date: Mon, 9 Feb 2026 16:35:39 +0530 Subject: [PATCH 8/8] Delete skills/.DS_Store --- skills/.DS_Store | Bin 6148 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 skills/.DS_Store diff --git a/skills/.DS_Store b/skills/.DS_Store deleted file mode 100644 index 46f65f9f5229777c5e55c315ecffbc2c1eb56a00..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6148 zcmeHKF-`+95S)b+k!VsPDt~~2A6QX%0Uv-aXa>qSa*Af=*!S!q4? zddHThxV;5n>(~AUSOHkl9r5AA+