Development

Command

/e2e-setup

Configure end-to-end testing suite

qdhenry@qdhenry

GitHub

From plugin

claude-command-suite

1.3k199 skills89 agents199 commands

Install

$ npx -y skills add qdhenry/Claude-Command-Suite --agent claude-code

How it fires

How this command gets triggered: by you, by Claude, or both.

Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/e2e-setup

Context preview

What this command does when you run it.

Configure end-to-end testing suite

Command definition

e2e-setup.md

End-to-End Testing Setup Command

Configure end-to-end testing suite

Instructions

Follow this systematic approach to implement E2E testing: **$ARGUMENTS**

1. **Technology Stack Assessment**

Identify the application type (web app, mobile app, API service)
Review existing testing infrastructure
Determine target browsers and devices
Assess current deployment and staging environments

2. **E2E Framework Selection**

Choose appropriate E2E testing framework based on stack:
**Playwright**: Modern, fast, supports multiple browsers
**Cypress**: Developer-friendly, great debugging tools
**Selenium WebDriver**: Cross-browser, mature ecosystem
**Puppeteer**: Chrome-focused, good for performance testing
**TestCafe**: No WebDriver needed, easy setup
Consider team expertise and project requirements

3. **Test Environment Setup**

Set up dedicated testing environments (staging, QA)
Configure test databases with sample data
Set up environment variables and configuration
Ensure environment isolation and reproducibility

4. **Framework Installation and Configuration**

**For Playwright:**

   npm install -D @playwright/test
   npx playwright install
   npx playwright codegen # Record tests

**For Cypress:**

   npm install -D cypress
   npx cypress open

**For Selenium:**

   npm install -D selenium-webdriver
   # Install browser drivers

5. **Test Structure Organization**

Create logical test folder structure:

     e2e/
     ├── tests/
     │   ├── auth/
     │   ├── user-flows/
     │   └── api/
     ├── fixtures/
     ├── support/
     │   ├── commands/
     │   └── page-objects/
     └── config/

Organize tests by feature or user journey
Separate API tests from UI tests

6. **Page Object Model Implementation**

Create page object classes for better maintainability
Encapsulate element selectors and interactions
Implement reusable methods for common actions
Follow single responsibility principle for page objects

**Example Page Object:**

   class LoginPage {
     constructor(page) {
       this.page = page;
       this.emailInput = page.locator('#email');
       this.passwordInput = page.locator('#password');
       this.loginButton = page.locator('#login-btn');
     }

     async login(email, password) {
       await this.emailInput.fill(email);
       await this.passwordInput.fill(password);
       await this.loginButton.click();
     }
   }

7. **Test Data Management**

Create test fixtures and sample data
Implement data factories for dynamic test data
Set up database seeding for consistent test states
Use environment-specific test data
Implement test data cleanup strategies

8. **Core User Journey Testing**

Implement critical user flows:
User registration and authentication
Main application workflows
Payment and transaction flows
Search and filtering functionality
Form submissions and validations

9. **Cross-Browser Testing Setup**

Configure testing across multiple browsers
Set up browser-specific configurations
Implement responsive design testing
Test on different viewport sizes

**Playwright Browser Configuration:**

   module.exports = {
     projects: [
       { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
       { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
       { name: 'webkit', use: { ...devices['Desktop Safari'] } },
       { name: 'mobile', use: { ...devices['iPhone 12'] } },
     ],
   };

10. **API Testing Integration**

Test API endpoints alongside UI tests
Implement API request/response validation
Test authentication and authorization
Verify data consistency between API and UI

11. **Visual Testing Setup**

Implement screenshot comparison testing
Set up visual regression testing
Configure tolerance levels for visual changes
Organize visual baselines and updates

12. **Test Utilities and Helpers**

Create custom commands and utilities
Implement common assertion helpers
Set up authentication helpers
Create database and state management utilities

13. **Error Handling and Debugging**

Configure proper error reporting and screenshots
Set up video recording for failed tests
Implement retry mechanisms for flaky tests
Create debugging tools and helpers

14. **CI/CD Integration**

Configure E2E tests in CI/CD pipeline
Set up parallel test execution
Implement proper test reporting
Configure test environment provisioning

**GitHub Actions Example:**

   - name: Run Playwright tests
     run: npx playwright test
   - uses: actions/upload-artifact@v3
     if: always()
     with:
       name: playwright-report
       path: playwright-report/

15. **Performance Testing Integration**