Initial commit
This commit is contained in:
15
.claude-plugin/plugin.json
Normal file
15
.claude-plugin/plugin.json
Normal file
@@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
3
README.md
Normal file
3
README.md
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
# browser-compatibility-tester
|
||||||
|
|
||||||
|
Cross-browser testing with BrowserStack, Selenium Grid, and Playwright - test across Chrome, Firefox, Safari, Edge
|
||||||
127
commands/browser-test.md
Normal file
127
commands/browser-test.md
Normal file
@@ -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)
|
||||||
61
plugin.lock.json
Normal file
61
plugin.lock.json
Normal file
@@ -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": []
|
||||||
|
}
|
||||||
|
}
|
||||||
55
skills/browser-compatibility-tester/SKILL.md
Normal file
55
skills/browser-compatibility-tester/SKILL.md
Normal file
@@ -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.
|
||||||
7
skills/browser-compatibility-tester/assets/README.md
Normal file
7
skills/browser-compatibility-tester/assets/README.md
Normal file
@@ -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.
|
||||||
8
skills/browser-compatibility-tester/references/README.md
Normal file
8
skills/browser-compatibility-tester/references/README.md
Normal file
@@ -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.
|
||||||
7
skills/browser-compatibility-tester/scripts/README.md
Normal file
7
skills/browser-compatibility-tester/scripts/README.md
Normal file
@@ -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.
|
||||||
Reference in New Issue
Block a user