Initial commit

This commit is contained in:
Zhongwei Li
2025-11-30 08:23:09 +08:00
commit dada31baa6
8 changed files with 368 additions and 0 deletions

View File

@@ -0,0 +1,15 @@
{
"name": "e2e-test-framework",
"description": "End-to-end test automation with Playwright, Cypress, and Selenium for browser-based testing",
"version": "1.0.0",
"author": {
"name": "Claude Code Plugins",
"email": "[email protected]"
},
"skills": [
"./skills"
],
"commands": [
"./commands"
]
}

3
README.md Normal file
View File

@@ -0,0 +1,3 @@
# e2e-test-framework
End-to-end test automation with Playwright, Cypress, and Selenium for browser-based testing

215
commands/generate-e2e.md Normal file
View File

@@ -0,0 +1,215 @@
---
description: Generate end-to-end browser tests for user workflows
shortcut: e2e
---
# End-to-End Test Generator
Generate comprehensive browser-based E2E tests for complete user workflows using Playwright, Cypress, or Selenium.
## Purpose
Create automated tests that simulate real user interactions:
- Complete user journeys (signup → login → purchase)
- Multi-page workflows
- Form interactions and validations
- Navigation flows
- Browser-specific behaviors
- Mobile responsive testing
## Supported Frameworks
**Playwright** (Recommended)
- Multi-browser support (Chromium, Firefox, WebKit)
- Auto-wait for elements
- Network interception
- Mobile emulation
- Parallel execution
**Cypress**
- Time-travel debugging
- Real-time reloads
- Automatic waiting
- Network stubbing
- Screenshot/video capture
**Selenium WebDriver**
- Mature ecosystem
- Cross-browser support
- Remote execution (Selenium Grid)
- Mobile testing (Appium)
## Test Generation
When invoked, generate E2E tests with:
1. **User workflow analysis**
- Identify key user journeys
- Map page interactions
- Define success criteria
2. **Page Object Model**
- Create page classes
- Define selectors
- Implement action methods
3. **Test scenarios**
- Happy path workflows
- Error handling paths
- Edge cases
4. **Assertions**
- URL validation
- Element presence
- Content verification
- State changes
## Example: Playwright Test
```typescript
import { test, expect } from '@playwright/test';
test.describe('User Registration Flow', () => {
test('should complete full registration workflow', async ({ page }) => {
// Navigate to signup
await page.goto('https://example.com/signup');
// Fill registration form
await page.fill('[name="email"]', '[email protected]');
await page.fill('[name="password"]', 'SecurePass123!');
await page.fill('[name="confirmPassword"]', 'SecurePass123!');
await page.check('[name="terms"]');
// Submit and wait for navigation
await page.click('button[type="submit"]');
await page.waitForURL('**/verify-email');
// Verify success message
await expect(page.locator('.success-message')).toContainText(
'Please check your email'
);
});
test('should show validation errors for invalid data', async ({ page }) => {
await page.goto('https://example.com/signup');
// Submit empty form
await page.click('button[type="submit"]');
// Verify error messages
await expect(page.locator('.error-email')).toBeVisible();
await expect(page.locator('.error-password')).toBeVisible();
});
});
test.describe('E-commerce Purchase Flow', () => {
test.beforeEach(async ({ page }) => {
// Login before each test
await page.goto('https://example.com/login');
await page.fill('[name="email"]', '[email protected]');
await page.fill('[name="password"]', 'password123');
await page.click('button[type="submit"]');
await page.waitForURL('**/dashboard');
});
test('should complete product purchase', async ({ page }) => {
// Browse products
await page.goto('https://example.com/products');
await page.click('text=Add to Cart').first();
// Verify cart badge
await expect(page.locator('.cart-badge')).toHaveText('1');
// Go to checkout
await page.click('.cart-icon');
await page.click('text=Checkout');
// Fill shipping info
await page.fill('[name="address"]', '123 Main St');
await page.fill('[name="city"]', 'San Francisco');
await page.fill('[name="zip"]', '94102');
await page.click('text=Continue');
// Enter payment (test mode)
await page.fill('[name="cardNumber"]', '4242424242424242');
await page.fill('[name="expiry"]', '12/25');
await page.fill('[name="cvc"]', '123');
await page.click('text=Place Order');
// Verify success
await page.waitForURL('**/order/confirmation');
await expect(page.locator('.order-success')).toBeVisible();
await expect(page.locator('.order-number')).toContainText('ORDER-');
});
});
```
## Example: Cypress Test
```javascript
describe('User Dashboard Workflow', () => {
beforeEach(() => {
cy.login('[email protected]', 'password123');
});
it('should load dashboard with user data', () => {
cy.visit('/dashboard');
cy.get('.welcome-message').should('contain', 'Welcome, John');
cy.get('.user-stats').should('be.visible');
});
it('should create new project', () => {
cy.visit('/dashboard');
cy.get('[data-testid="new-project"]').click();
cy.get('[name="projectName"]').type('My New Project');
cy.get('[name="description"]').type('Project description here');
cy.get('button[type="submit"]').click();
cy.url().should('include', '/projects/');
cy.get('.project-title').should('contain', 'My New Project');
});
});
```
## Page Object Model
```typescript
// pages/LoginPage.ts
export class LoginPage {
constructor(private page: Page) {}
async goto() {
await this.page.goto('/login');
}
async login(email: string, password: string) {
await this.page.fill('[name="email"]', email);
await this.page.fill('[name="password"]', password);
await this.page.click('button[type="submit"]');
}
async getErrorMessage() {
return this.page.locator('.error-message').textContent();
}
}
// Test using Page Object
test('login with page object', async ({ page }) => {
const loginPage = new LoginPage(page);
await loginPage.goto();
await loginPage.login('[email protected]', 'password123');
await expect(page).toHaveURL('/dashboard');
});
```
## Best Practices
- **Use data-testid attributes** - Stable selectors
- **Implement Page Objects** - Reusable page interactions
- **Handle waits properly** - Auto-wait or explicit waits
- **Test realistic scenarios** - Actual user workflows
- **Parallelize tests** - Faster execution
- **Capture screenshots on failure** - Debugging aid
- **Use fixtures** - Consistent test data
- **Test across browsers** - Chrome, Firefox, Safari

61
plugin.lock.json Normal file
View File

@@ -0,0 +1,61 @@
{
"$schema": "internal://schemas/plugin.lock.v1.json",
"pluginId": "gh:jeremylongshore/claude-code-plugins-plus:plugins/testing/e2e-test-framework",
"normalized": {
"repo": null,
"ref": "refs/tags/v20251128.0",
"commit": "2970bc5e9a45d7bde11498de6b6dfb4dd287d479",
"treeHash": "8ff3b5dac3a4b34816fd71d8815a12bee7d5a6e3ae5acd8ce33882cdf05dfe29",
"generatedAt": "2025-11-28T10:18:25.472521Z",
"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": "e2e-test-framework",
"description": "End-to-end test automation with Playwright, Cypress, and Selenium for browser-based testing",
"version": "1.0.0"
},
"content": {
"files": [
{
"path": "README.md",
"sha256": "bac2dd458228873240a564acb9123a7955aba42d8c95e39acc29f0907a69b9e6"
},
{
"path": ".claude-plugin/plugin.json",
"sha256": "90117c452144359468a11e319885095ed3b7af3882fb127928ea735e3ba338b7"
},
{
"path": "commands/generate-e2e.md",
"sha256": "bd5fe86038cbc863981e36e80cb4738c9edfc8773a3e992e319a5962430e93ac"
},
{
"path": "skills/e2e-test-framework/SKILL.md",
"sha256": "81494d72a40d58cffb821d8162dc94075d2c418c5eb0c9944ac90f84741b64fd"
},
{
"path": "skills/e2e-test-framework/references/README.md",
"sha256": "b3455dc3a7fdf31632088fd94ea0143d2d5644880410da17c03ada5f20b7add5"
},
{
"path": "skills/e2e-test-framework/scripts/README.md",
"sha256": "ca0012d191e3fc8f53550376efed4681fc8b832dd350566aa687ffb5967d6bff"
},
{
"path": "skills/e2e-test-framework/assets/README.md",
"sha256": "452ba5e4de0da5985a643fc793fdc057ecc65104e44ed67a98a06b0f36603460"
}
],
"dirSha256": "8ff3b5dac3a4b34816fd71d8815a12bee7d5a6e3ae5acd8ce33882cdf05dfe29"
},
"security": {
"scannedAt": null,
"scannerVersion": null,
"flags": []
}
}

View File

@@ -0,0 +1,52 @@
---
name: generating-end-to-end-tests
description: |
This skill enables Claude to generate end-to-end (E2E) tests for web applications. It leverages Playwright, Cypress, or Selenium to automate browser interactions and validate user workflows. Use this skill when the user requests to "create E2E tests", "generate end-to-end tests", or asks for help with "browser-based testing". The skill is particularly useful for testing user registration, login flows, shopping cart functionality, and other multi-step processes within a web application. It supports cross-browser testing and can be used to verify the responsiveness of web applications on different devices.
allowed-tools: Read, Write, Edit, Grep, Glob, Bash
version: 1.0.0
---
## Overview
This skill automates the creation of end-to-end tests, which simulate real user interactions with a web application. By generating tests using Playwright, Cypress, or Selenium, Claude ensures comprehensive coverage of critical user workflows.
## How It Works
1. **Identify User Workflow**: Claude analyzes the user's request to determine the specific user workflow to be tested (e.g., user registration, product checkout).
2. **Generate Test Script**: Based on the identified workflow, Claude generates a test script using Playwright, Cypress, or Selenium. The script includes steps to navigate the web application, interact with elements, and assert expected outcomes.
3. **Configure Test Environment**: Claude configures the test environment, including browser selection (Chrome, Firefox, Safari, Edge) and any necessary dependencies.
## When to Use This Skill
This skill activates when you need to:
- Create end-to-end tests for a specific user flow (e.g., "create e2e tests for user login").
- Generate browser-based tests for a web application.
- Automate testing of multi-step processes in a web application (e.g., "generate end-to-end tests for adding an item to a shopping cart and completing the checkout process").
## Examples
### Example 1: Testing User Registration
User request: "Create E2E tests for the user registration workflow on my website."
The skill will:
1. Generate a Playwright script that automates the user registration process, including filling out the registration form, submitting it, and verifying the successful registration message.
2. Configure the test to run in Chrome and Firefox.
### Example 2: Testing Shopping Cart Functionality
User request: "Generate end-to-end tests for adding an item to a shopping cart and completing the checkout process."
The skill will:
1. Create a Cypress script that simulates adding a product to the shopping cart, navigating to the checkout page, entering shipping and payment information, and submitting the order.
2. Include assertions to verify that the correct product is added to the cart, the order total is accurate, and the order confirmation page is displayed.
## Best Practices
- **Specificity**: Provide clear and specific instructions regarding the user workflow to be tested.
- **Framework Choice**: If you have a preference for Playwright, Cypress, or Selenium, specify it in your request. Otherwise, Playwright will be used by default.
- **Environment Details**: Specify any relevant environment details, such as the target browser and the URL of the web application.
## Integration
This skill can be used in conjunction with other plugins to set up the web application, deploy it to a testing environment, and report test results.

View File

@@ -0,0 +1,7 @@
# Assets
Bundled resources for e2e-test-framework skill
- [ ] test_template.py A template for generating individual test cases.
- [ ] page_object_template.py A template for creating page object models.
- [ ] example_test_suite.py A complete example of a generated test suite.

View File

@@ -0,0 +1,8 @@
# References
Bundled resources for e2e-test-framework skill
- [ ] playwright_api.md Playwright API documentation for reference during test generation.
- [ ] cypress_api.md Cypress API documentation for reference during test generation.
- [ ] selenium_api.md Selenium API documentation for reference during test generation.
- [ ] test_generation_best_practices.md Best practices for generating effective and maintainable E2E tests.

View File

@@ -0,0 +1,7 @@
# Scripts
Bundled resources for e2e-test-framework skill
- [ ] generate_test_suite.py Generates a test suite based on user input and framework selection.
- [ ] execute_tests.sh Executes the generated tests and reports results.
- [ ] analyze_results.py Analyzes test results and provides a summary of failures and successes.