commit 7cc1eb6f2c2582378e97f0f44d953347ec128012 Author: Zhongwei Li Date: Sun Nov 30 08:23:00 2025 +0800 Initial commit diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..668af84 --- /dev/null +++ b/.claude-plugin/plugin.json @@ -0,0 +1,15 @@ +{ + "name": "browser-compatibility-tester", + "description": "Cross-browser testing with BrowserStack, Selenium Grid, and Playwright - test across Chrome, Firefox, Safari, Edge", + "version": "1.0.0", + "author": { + "name": "Claude Code Plugin Hub", + "email": "[email protected]" + }, + "skills": [ + "./skills" + ], + "commands": [ + "./commands" + ] +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..57fb983 --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# browser-compatibility-tester + +Cross-browser testing with BrowserStack, Selenium Grid, and Playwright - test across Chrome, Firefox, Safari, Edge diff --git a/commands/browser-test.md b/commands/browser-test.md new file mode 100644 index 0000000..011eeca --- /dev/null +++ b/commands/browser-test.md @@ -0,0 +1,127 @@ +--- +description: Cross-browser compatibility testing across multiple browsers and devices +shortcut: bt +--- + +# Browser Compatibility Tester + +Test web applications across multiple browsers (Chrome, Firefox, Safari, Edge), versions, and devices using BrowserStack, Selenium Grid, or Playwright. + +## What You Do + +1. **Configure Browser Matrix** + - Define target browsers and versions + - Set up device configurations + - Configure OS combinations + +2. **Generate Cross-Browser Tests** + - Create tests that run across all browsers + - Handle browser-specific quirks + - Set up parallel execution + +3. **Analyze Compatibility Issues** + - Identify browser-specific failures + - Compare rendering across browsers + - Report CSS/JavaScript compatibility issues + +4. **CI/CD Integration** + - Configure automated browser testing + - Set up cloud testing (BrowserStack/Sauce Labs) + - Implement test result aggregation + +## Usage Pattern + +When invoked, you should: + +1. Identify critical user flows to test +2. Generate browser compatibility matrix +3. Create cross-browser test suite +4. Set up testing infrastructure (local or cloud) +5. Run tests across all target browsers +6. Generate compatibility report with screenshots + +## Output Format + +```markdown +## Browser Compatibility Report + +### Test Configuration +**Browsers:** [N] +**Test Cases:** [N] +**Parallel Workers:** [N] + +### Browser Matrix +| Browser | Version | OS | Status | +|---------|---------|----|----- --| +| Chrome | 120+ | Windows 11 | Pass | +| Firefox | 121+ | macOS | Pass | +| Safari | 17+ | macOS | 2 failures | +| Edge | 120+ | Windows 11 | Pass | + +### Compatibility Issues + +#### Issue: [Description] +**Browsers Affected:** Safari 17.x +**Severity:** [High/Medium/Low] +**Test:** `[test name]` + +**Problem:** +[Detailed explanation of incompatibility] + +**Screenshots:** +- Chrome: Renders correctly +- Safari: Layout broken + +**Root Cause:** +[CSS property / JS API / Feature not supported] + +**Fix:** +\`\`\`css +/* Add browser-specific prefix or fallback */ +.element { + display: grid; /* Modern browsers */ + display: -ms-grid; /* IE 11 */ +} +\`\`\` + +**Can I Use:** [caniuse.com link] + +### Test Results Summary + Tests passed: [N] ([%]) + Tests with warnings: [N] + Tests failed: [N] + +### Browser-Specific Notes +- **Safari**: [known issues] +- **Firefox**: [known issues] +- **IE 11**: [polyfills needed] + +### Next Steps +- [ ] Fix Safari compatibility issues +- [ ] Add polyfills for older browsers +- [ ] Update browser support policy +- [ ] Add automated regression tests +``` + +## Configuration Example + +```javascript +// playwright.config.js +export default { + projects: [ + { name: 'chromium', use: { browserName: 'chromium' } }, + { name: 'firefox', use: { browserName: 'firefox' } }, + { name: 'webkit', use: { browserName: 'webkit' } }, + { name: 'edge', use: { channel: 'msedge' } } + ] +}; +``` + +## Supported Tools + +- Playwright (multiple browsers) +- Selenium WebDriver +- BrowserStack (cloud testing) +- Sauce Labs (cloud testing) +- LambdaTest (cloud testing) +- Puppeteer (Chromium) diff --git a/plugin.lock.json b/plugin.lock.json new file mode 100644 index 0000000..562f0e7 --- /dev/null +++ b/plugin.lock.json @@ -0,0 +1,61 @@ +{ + "$schema": "internal://schemas/plugin.lock.v1.json", + "pluginId": "gh:jeremylongshore/claude-code-plugins-plus:plugins/testing/browser-compatibility-tester", + "normalized": { + "repo": null, + "ref": "refs/tags/v20251128.0", + "commit": "418d850f12b46294de945a85c833086eccb26c63", + "treeHash": "f391ca1e76a51aafc40c50a583efb8f24d625e739b30a1a4bfe6e8fa5e25749d", + "generatedAt": "2025-11-28T10:18:11.589776Z", + "toolVersion": "publish_plugins.py@0.2.0" + }, + "origin": { + "remote": "git@github.com:zhongweili/42plugin-data.git", + "branch": "master", + "commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390", + "repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data" + }, + "manifest": { + "name": "browser-compatibility-tester", + "description": "Cross-browser testing with BrowserStack, Selenium Grid, and Playwright - test across Chrome, Firefox, Safari, Edge", + "version": "1.0.0" + }, + "content": { + "files": [ + { + "path": "README.md", + "sha256": "163d1d6fbea2b86a673b2c56dfc1181203476eecfb903f5666125810d0d4ed5e" + }, + { + "path": ".claude-plugin/plugin.json", + "sha256": "ba374468ef066d80551b9319022205589b74196767607475ab94cac9a9c93bf3" + }, + { + "path": "commands/browser-test.md", + "sha256": "657332fe0c51826b33e7b9a2aa5c6f6c2bfe159f2e88e9c636858d6110d64209" + }, + { + "path": "skills/browser-compatibility-tester/SKILL.md", + "sha256": "6fee6163715ae2c5fefbb532cb2f02cb3920784873f1ff85f3204d7361ebbd2b" + }, + { + "path": "skills/browser-compatibility-tester/references/README.md", + "sha256": "70cd6fc8cbd6e86178fb860e3cb15507b84bf895e6a287db5655ede0b0047b6f" + }, + { + "path": "skills/browser-compatibility-tester/scripts/README.md", + "sha256": "325d3c9d6eafa3f05874718d014861708fa9c48ff8d21fa4897105993a50d8d0" + }, + { + "path": "skills/browser-compatibility-tester/assets/README.md", + "sha256": "328259c5acfafedef610c48624774a16cfeaad5e8b595b81818f837e1673adc5" + } + ], + "dirSha256": "f391ca1e76a51aafc40c50a583efb8f24d625e739b30a1a4bfe6e8fa5e25749d" + }, + "security": { + "scannedAt": null, + "scannerVersion": null, + "flags": [] + } +} \ No newline at end of file diff --git a/skills/browser-compatibility-tester/SKILL.md b/skills/browser-compatibility-tester/SKILL.md new file mode 100644 index 0000000..c8a2453 --- /dev/null +++ b/skills/browser-compatibility-tester/SKILL.md @@ -0,0 +1,55 @@ +--- +name: conducting-browser-compatibility-tests +description: | + This skill enables cross-browser compatibility testing for web applications using BrowserStack, Selenium Grid, or Playwright. It tests across Chrome, Firefox, Safari, and Edge, identifying browser-specific bugs and ensuring consistent functionality. It is used when a user requests to "test browser compatibility", "run cross-browser tests", or uses the `/browser-test` or `/bt` command to assess web application behavior across different browsers and devices. The skill generates a report detailing compatibility issues and screenshots for visual verification. Activates when you request "conducting browser compatibility tests" functionality. +allowed-tools: Read, Write, Edit, Grep, Glob, Bash +version: 1.0.0 +--- + +## Overview + +This skill automates cross-browser compatibility testing, ensuring that web applications function correctly across various browsers and devices. It leverages BrowserStack, Selenium Grid, and Playwright to execute tests and identify browser-specific issues. + +## How It Works + +1. **Configuring Browser Matrix**: Defines the target browsers (Chrome, Firefox, Safari, Edge), versions, operating systems, and device configurations for testing. +2. **Generating Cross-Browser Tests**: Creates and configures tests to run across the defined browser matrix, handling browser-specific quirks and setting up parallel execution for efficiency. +3. **Executing Tests**: Runs the tests in parallel using BrowserStack, Selenium Grid, or Playwright, capturing screenshots and logs for analysis. +4. **Generating Compatibility Report**: Compiles a detailed report highlighting any compatibility issues, including screenshots and error logs, for easy identification and resolution. + +## When to Use This Skill + +This skill activates when you need to: +- Ensure a web application functions correctly across different browsers and devices. +- Identify browser-specific bugs or compatibility issues. +- Automate cross-browser testing as part of a CI/CD pipeline. + +## Examples + +### Example 1: Testing a new feature + +User request: "Test browser compatibility for the new shopping cart feature." + +The skill will: +1. Configure the browser matrix with the latest versions of Chrome, Firefox, Safari, and Edge. +2. Execute tests specifically targeting the shopping cart functionality across the configured browsers. +3. Generate a report highlighting any compatibility issues encountered with the shopping cart feature, including screenshots. + +### Example 2: Regression testing after an update + +User request: "/bt" + +The skill will: +1. Use the default browser matrix (or a previously defined configuration). +2. Run all existing tests across the configured browsers and devices. +3. Provide a comprehensive report detailing any regressions or new compatibility issues introduced by the recent update. + +## Best Practices + +- **Configuration**: Clearly define the target browser matrix to ensure comprehensive testing. +- **Test Design**: Write tests that are robust and cover a wide range of user interactions. +- **Report Analysis**: Carefully analyze the generated reports to identify and address compatibility issues promptly. + +## Integration + +This skill can be integrated into a CI/CD pipeline using other tools to automate cross-browser testing as part of the deployment process. It can also work with issue tracking systems to automatically create tickets for identified compatibility bugs. \ No newline at end of file diff --git a/skills/browser-compatibility-tester/assets/README.md b/skills/browser-compatibility-tester/assets/README.md new file mode 100644 index 0000000..d17ebd7 --- /dev/null +++ b/skills/browser-compatibility-tester/assets/README.md @@ -0,0 +1,7 @@ +# Assets + +Bundled resources for browser-compatibility-tester skill + +- [ ] test_templates/basic_test.py A basic test template for different browsers. +- [ ] report_templates/compatibility_report.html An HTML template for generating compatibility reports. +- [ ] example_configurations/browserstack.yml Example BrowserStack configuration file. diff --git a/skills/browser-compatibility-tester/references/README.md b/skills/browser-compatibility-tester/references/README.md new file mode 100644 index 0000000..344e7aa --- /dev/null +++ b/skills/browser-compatibility-tester/references/README.md @@ -0,0 +1,8 @@ +# References + +Bundled resources for browser-compatibility-tester skill + +- [ ] browserstack_api_docs.md Comprehensive documentation for the BrowserStack API. +- [ ] selenium_grid_config.md Example configurations for Selenium Grid. +- [ ] playwright_best_practices.md Best practices for writing Playwright tests. +- [ ] cross_browser_testing_checklist.md A checklist of common cross-browser compatibility issues. diff --git a/skills/browser-compatibility-tester/scripts/README.md b/skills/browser-compatibility-tester/scripts/README.md new file mode 100644 index 0000000..2b9f215 --- /dev/null +++ b/skills/browser-compatibility-tester/scripts/README.md @@ -0,0 +1,7 @@ +# Scripts + +Bundled resources for browser-compatibility-tester skill + +- [ ] browserstack_config_generator.py Generates BrowserStack configuration files based on user input. +- [ ] selenium_grid_setup.sh Sets up a Selenium Grid for local testing. +- [ ] playwright_test_runner.py Executes Playwright tests and generates reports.