Configure end-to-end testing suite
Sets up comprehensive end-to-end testing with framework selection, configuration, and CI/CD integration
/plugin marketplace add davepoon/buildwithclaude/plugin install all-commands@buildwithclaude1. **Technology Stack Assessment**Configure end-to-end testing suite
Follow this systematic approach to implement E2E testing: $ARGUMENTS
Technology Stack Assessment
E2E Framework Selection
Test Environment Setup
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
Test Structure Organization
e2e/
├── tests/
│ ├── auth/
│ ├── user-flows/
│ └── api/
├── fixtures/
├── support/
│ ├── commands/
│ └── page-objects/
└── config/
Page Object Model Implementation
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();
}
}
Test Data Management
Core User Journey Testing
Cross-Browser Testing Setup
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'] } },
],
};
API Testing Integration
Visual Testing Setup
Test Utilities and Helpers
Error Handling and Debugging
CI/CD Integration
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/
Performance Testing Integration
Accessibility Testing
Mobile Testing Setup
Reporting and Monitoring
Test Maintenance Strategy
Security Testing Integration
Sample E2E Test:
test('user can complete purchase flow', async ({ page }) => {
// Navigate and login
await page.goto('/login');
await page.fill('#email', 'test@example.com');
await page.fill('#password', 'password');
await page.click('#login-btn');
// Add item to cart
await page.goto('/products');
await page.click('[data-testid="product-1"]');
await page.click('#add-to-cart');
// Complete checkout
await page.goto('/checkout');
await page.fill('#card-number', '4111111111111111');
await page.click('#place-order');
// Verify success
await expect(page.locator('#order-confirmation')).toBeVisible();
});
Remember to start with critical user journeys and gradually expand coverage. Focus on stable, maintainable tests that provide real value.