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..e91da3e 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,492 @@ -# 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" +πŸ’¬ "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. + +--- + +### πŸ“± 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 (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" +πŸ’¬ "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 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: + +``` +πŸ’¬ "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** (uses **Test Case Generator** agent): +``` +πŸ’¬ @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:** +``` +πŸ’¬ "Convert my manual test case TC-45 into a Playwright script" +``` + +--- + +## 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 + + + + + + + +``` + +--- + +#### 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**: 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" +``` + +**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 + +**Example output**: +```json +// Browser capabilities configured +{ + "browserName": "Chrome", + "browserVersion": "120", + "os": "Windows", + "osVersion": "11" +} + +βœ“ 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 +``` + +--- + +### πŸ€– 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 + +**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/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/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}" + } + } + } +} 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/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