From dada31baa60860d53bd5c699daf9f8e15c10b901 Mon Sep 17 00:00:00 2001 From: Zhongwei Li Date: Sun, 30 Nov 2025 08:23:09 +0800 Subject: [PATCH] Initial commit --- .claude-plugin/plugin.json | 15 ++ README.md | 3 + commands/generate-e2e.md | 215 ++++++++++++++++++ plugin.lock.json | 61 +++++ skills/e2e-test-framework/SKILL.md | 52 +++++ skills/e2e-test-framework/assets/README.md | 7 + .../e2e-test-framework/references/README.md | 8 + skills/e2e-test-framework/scripts/README.md | 7 + 8 files changed, 368 insertions(+) create mode 100644 .claude-plugin/plugin.json create mode 100644 README.md create mode 100644 commands/generate-e2e.md create mode 100644 plugin.lock.json create mode 100644 skills/e2e-test-framework/SKILL.md create mode 100644 skills/e2e-test-framework/assets/README.md create mode 100644 skills/e2e-test-framework/references/README.md create mode 100644 skills/e2e-test-framework/scripts/README.md diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..288e5e6 --- /dev/null +++ b/.claude-plugin/plugin.json @@ -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" + ] +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..bdce662 --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# e2e-test-framework + +End-to-end test automation with Playwright, Cypress, and Selenium for browser-based testing diff --git a/commands/generate-e2e.md b/commands/generate-e2e.md new file mode 100644 index 0000000..dcc63ea --- /dev/null +++ b/commands/generate-e2e.md @@ -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 diff --git a/plugin.lock.json b/plugin.lock.json new file mode 100644 index 0000000..12798c9 --- /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/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": [] + } +} \ No newline at end of file diff --git a/skills/e2e-test-framework/SKILL.md b/skills/e2e-test-framework/SKILL.md new file mode 100644 index 0000000..5430443 --- /dev/null +++ b/skills/e2e-test-framework/SKILL.md @@ -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. \ No newline at end of file diff --git a/skills/e2e-test-framework/assets/README.md b/skills/e2e-test-framework/assets/README.md new file mode 100644 index 0000000..42fc520 --- /dev/null +++ b/skills/e2e-test-framework/assets/README.md @@ -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. diff --git a/skills/e2e-test-framework/references/README.md b/skills/e2e-test-framework/references/README.md new file mode 100644 index 0000000..9ead0cb --- /dev/null +++ b/skills/e2e-test-framework/references/README.md @@ -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. diff --git a/skills/e2e-test-framework/scripts/README.md b/skills/e2e-test-framework/scripts/README.md new file mode 100644 index 0000000..4997f85 --- /dev/null +++ b/skills/e2e-test-framework/scripts/README.md @@ -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.