diff --git a/README.md b/README.md index c95dfa8..c282cc2 100644 --- a/README.md +++ b/README.md @@ -1,450 +1,244 @@ # 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. +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 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 +### Prerequisites -**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 +- 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)) -**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 +### Installation -## Setup +1. **Get your BrowserStack credentials** from [Account Settings](https://www.browserstack.com/accounts/profile/details) -### Step 1: Install Node.js +2. **Configure MCP settings in Cursor**: + - Open Cursor Settings + - Navigate to MCP configuration + - Add BrowserStack credentials: -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" + ```json + { + "mcpServers": { + "browserstack": { + "command": "npx", + "args": ["-y", "@browserstack/mcp-server@latest"], + "env": { + "BROWSERSTACK_USERNAME": "${BROWSERSTACK_USERNAME}", + "BROWSERSTACK_ACCESS_KEY": "${BROWSERSTACK_ACCESS_KEY}" + } + } + } + } ``` -3. **Restart Cursor** to activate the plugin - -4. **Verify installation** by asking Cursor: +3. **Restart Cursor** and verify: ``` "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" -``` +## What's Included -**Use case**: You're developing a feature and need to check if it works on Safari, but you're on Windows. +### Skills -**Pro tip**: If you find a visual bug, use the **Visual Issue Fix** skill to get browser-specific fixes. +- **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 ---- +### Agents -### πŸ“± Mobile App Testing +- **test-case-generator** - Generate test cases from PRD documents using AI -Test your mobile app on real devices: +### MCP Tools (20 Available) -``` -πŸ’¬ "Open my app on iPhone 15 Pro Max" - (Cursor will ask for your .ipa or .apk file path) +**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 -πŸ’¬ "Test my app on Galaxy S24 with Android 14" -πŸ’¬ "My app crashes on iOS 17 when I tap the login button, help me debug" -``` +**Automate (Web Testing)** +- `setupBrowserStackAutomateTests` - Integrate SDK and run web tests +- `fetchAutomationScreenshots` - Get screenshots from test sessions +- `getFailureLogs` - Retrieve error logs for failed tests -**Use case**: You don't have physical access to an iPhone 15 Pro Max but need to verify the login flow works. +**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 -### πŸ§ͺ Running Automated Tests +**Accessibility** +- `startAccessibilityScan` - Scan webpages for WCAG violations +- `accessibilityExpert` - Get WCAG guidelines and best practices -Run your existing test suite on BrowserStack: +**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 -``` -πŸ’¬ "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" -``` +## Use Cases -**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"* +### 1. Generate Test Cases from Requirements ---- +**What**: Upload PRD documents and automatically generate comprehensive test cases with AI. -### β™Ώ Accessibility Scanning +**Agent**: `test-case-generator` (invoke with `@test-case-generator`) -Catch accessibility issues before production (uses **Accessibility Fix** skill): +**Tools**: `uploadProductRequirementFile`, `createTestCasesFromFile` +**Examples**: ``` -πŸ’¬ "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: +@test-case-generator +[Attach your PRD file] +"Generate test cases for Test Management project PR-12345" -``` -πŸ’¬ "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" +@test-case-generator +"Upload PRD from /Users/xyz/login-flow.pdf and generate test cases for project PR-54321" ``` -**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 +**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 --- -### πŸ€– AI-Powered Testing +### 2. Manage Test Cases and Runs -**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" -``` +**What**: Organize test cases, create test runs, and track results. -**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" -``` +**Tools**: `createProjectOrFolder`, `createTestCase`, `listTestCases`, `createTestRun`, `addTestResult` -**Convert manual tests to automation:** +**Examples**: ``` -πŸ’¬ "Convert my manual test case TC-45 into a Playwright script" +"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" ``` --- -## Built-in Skills & Agents - -The plugin includes specialized workflows and AI agents to streamline common testing tasks. +### 3. Manual Testing on Real Devices -### πŸ”§ Skills (Multi-Step Workflows) +**What**: Test your website or app on real browsers and devices on BrowserStack -#### Accessibility Fix -**What it does**: Scans your page for WCAG violations, identifies issues, and provides code fixes. +**Tools**: `runBrowserLiveSession`, `runAppLiveSession` -**When to use**: Before deployment, fixing accessibility bugs, ensuring compliance. - -**Sample commands**: +**Examples**: ``` -πŸ’¬ "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 - - - - - - - +"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" ``` --- -#### Visual Issue Fix -**What it does**: Captures screenshots across browsers, identifies visual bugs, and provides CSS fixes. +### 4. Run Automated Web Tests -**When to use**: Cross-browser layout issues, responsive design bugs, visual regressions. +**What**: Execute Selenium, Playwright, or Cypress tests across multiple browsers on BrowserStack infrastructure. -**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" -``` +**Skill**: `run-web-tests-on-browserstack` + +**Tools**: `setupBrowserStackAutomateTests`, `fetchAutomationScreenshots`, `getFailureLogs` -**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; -} +**Examples**: +``` +"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 - -#### Test Case Generator -**What it does**: Generates comprehensive test cases from requirements, user stories, or PRD documents using BrowserStack AI. +### 5. Run Automated Mobile App Tests -**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" +**What**: Execute Appium, XCUITest, or Espresso tests on real iOS and Android devices. -πŸ’¬ @test-case-generator - "Create test cases for a login feature with email and Google OAuth" - "Add them to project PR-54321" -``` +**Skill**: `run-mobile-tests-on-browserstack` -**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 +**Tools**: `takeAppScreenshot`, `runAppTestsOnBrowserStack`, `getFailureLogs` -**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**: +**Examples**: ``` -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 +"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 +## How to Sign Up for BrowserStack? -- **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 +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 -See [pricing details](https://www.browserstack.com/pricing) +2. **Get your credentials** from [Account Settings](https://www.browserstack.com/accounts/profile/details) to configure the plugin 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 deleted file mode 100644 index cddcbdf..0000000 --- a/skills/accessibility-fix/SKILL.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -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/run-mobile-tests-on-browserstack/SKILL.md b/skills/run-mobile-tests-on-browserstack/SKILL.md new file mode 100644 index 0000000..fedbfca --- /dev/null +++ b/skills/run-mobile-tests-on-browserstack/SKILL.md @@ -0,0 +1,112 @@ +--- +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. +--- + +# Run Mobile Tests on BrowserStack + +## When to Use + +- Testing mobile apps on real iOS and Android devices +- Running Appium, XCUITest, or Espresso tests +- CI/CD integration for mobile app testing +- Device-specific bug reproduction + +## MCP Tools Used + +- `takeAppScreenshot` - Launch app and capture verification screenshot +- `runAppTestsOnBrowserStack` - Run automated mobile tests on real devices +- `getFailureLogs` - Retrieve error logs for failed app tests + +## Steps + +### 1. Verify App Launch (Optional) + +Use `takeAppScreenshot` to verify your app launches correctly: + +``` +"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" +``` + +**What the tool does:** +- Launches your app on specified device +- Captures a quick screenshot for verification +- Returns screenshot to confirm app loads correctly + +### 2. Run Automated Tests + +Use `runAppTestsOnBrowserStack` to execute your test suite: + +``` +"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" +``` + +**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 + +**Supported Test Frameworks:** +- Espresso (Android native) +- XCUITest (iOS native) +- Appium (cross-platform) + +### 3. Debug Failures + +Retrieve error logs using `getFailureLogs`: + +``` +"Get error logs from App Automate session ID abc123, Build ID xyz789" +"Show me failure logs from my last app test run" +``` + +## Common Scenarios + +**Quick App Verification:** +``` +"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" +``` + +**Run Test Suites:** +``` +"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" +``` + +**Device Matrix Testing:** +``` +"Run my tests on iPhone 14, 15, and 15 Pro with iOS 17" +"Test on Galaxy S21, S22, S23 with Android 13 and 14" +``` + +**Debug Test Failures:** +``` +"Get error logs and screenshots from my failed app test session" +"Show me what went wrong in session abc123" +``` + +## Example Workflow + +**User**: "I need to test my checkout flow on iPhone 15 and Galaxy S24" + +**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 + +- 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/run-web-tests-on-browserstack/SKILL.md b/skills/run-web-tests-on-browserstack/SKILL.md new file mode 100644 index 0000000..21f40c1 --- /dev/null +++ b/skills/run-web-tests-on-browserstack/SKILL.md @@ -0,0 +1,99 @@ +--- +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. +--- + +# Run Web Tests on BrowserStack + +## 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 + +## MCP Tools Used + +- `setupBrowserStackAutomateTests` - Integrate BrowserStack SDK and run tests +- `fetchAutomationScreenshots` - Get screenshots from test sessions +- `getFailureLogs` - Retrieve error logs for failed tests + +## Steps + +### 1. Setup and Run Tests + +Use the `setupBrowserStackAutomateTests` MCP tool: + +``` +"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)" +``` + +**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 + +**Example:** +``` +"Run my Selenium-JUnit5 tests written in Java on Chrome and Firefox. Enable Percy for visual testing." +``` + +### 2. Get Screenshots + +Fetch screenshots from test sessions using `fetchAutomationScreenshots`: + +``` +"Get screenshots from Automate session ID abc123xyz" +"Show me screenshots from my last test run" +``` + +### 3. Debug Failures + +Retrieve error logs using `getFailureLogs`: + +``` +"Get error logs from session ID 21a864032a7459f1e7634222249b316759d6827f" +"Show me failure logs from my last Automate test" +``` + +## Common Scenarios + +**Setup Different Test Frameworks:** +``` +"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" +``` + +**Enable Visual Testing:** +``` +"Run my tests on BrowserStack with Percy enabled for visual regression testing" +``` + +**Debug Failed Tests:** +``` +"Get screenshots and error logs from session abc123" +"Show me what went wrong in my last Automate test run" +``` + +## Example Workflow + +**User**: "I need to run my Playwright tests on Chrome, Firefox, and Safari" + +**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 + +- 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 diff --git a/skills/scan-and-fix-accessibility/SKILL.md b/skills/scan-and-fix-accessibility/SKILL.md new file mode 100644 index 0000000..43cae4d --- /dev/null +++ b/skills/scan-and-fix-accessibility/SKILL.md @@ -0,0 +1,149 @@ +--- +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. +--- + +# Scan and Fix Accessibility + +## When to Use + +- User wants to fix accessibility issues on a page +- 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 + +Use `startAccessibilityScan` to scan the webpage: + +``` +"Run accessibility scan for 'www.example.com'" +"Scan accessibility issues on localhost:3000" +"Run accessibility scan for 'https://mysite.com/checkout'" +``` + +**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 + +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. 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: + +**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 using `startAccessibilityScan`: + +``` +"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 (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: 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/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