Przejdź do głównej zawartości
Developer Toolkit

End-to-End Testing Automation

Ta treść nie jest jeszcze dostępna w Twoim języku.

PRD: Intelligent E2E Testing System

Requirements: Create comprehensive end-to-end tests that simulate real user journeys, adapt to UI changes, and provide 99.5%+ reliability across browsers and devices using AI-powered automation.

Plan: Leverage Playwright MCP for direct browser control, combined with Cursor IDE and Claude Code for natural language test creation and maintenance.

Todo:

  • Set up Playwright MCP server
  • Research visual regression testing approaches
  • Implement user journey automation
  • Create cross-browser test matrix
  • Set up visual regression detection
  • Build performance monitoring integration

AI-Native E2E Testing Revolution

Section titled “AI-Native E2E Testing Revolution”

E2E testing evolves from scripted interactions to intelligent user simulation. AI understands user intent, generates realistic test scenarios, and maintains tests as your application changes.

Natural Language Control

Prompt: “Test checkout flow with visual regression detection”

Result: Complete user journey with screenshot comparison

Smart Element Detection

AI finds elements using multiple strategies: data attributes, ARIA labels, semantic HTML

Visual Intelligence

Automatically detects layout shifts, color changes, and broken UI components

Cross-Platform Testing

Single prompt generates tests for desktop, tablet, and mobile viewports

Real-World E2E Testing Workflows

Section titled “Real-World E2E Testing Workflows”

Workflow 1: E-commerce Checkout Journey

Section titled “Workflow 1: E-commerce Checkout Journey”

Scenario: Testing a complete purchase flow from product browsing to order confirmation with multiple user personas.

Terminal window
# PRD: E-commerce Checkout End-to-End Testing
# Requirements: Test complete purchase flow across different user types and devices


"Using Playwright MCP, create comprehensive checkout tests:


User Personas:
1. Guest user (mobile, slow connection)
2. Registered user (desktop, fast connection)
3. Premium member (tablet, medium connection)


Test Flow for Each Persona:
1. Navigate to product catalog
2. Search and filter products
3. Add multiple items to cart
4. Apply discount codes
5. Proceed to checkout
6. Fill shipping information
7. Select payment method
8. Complete purchase
9. Verify order confirmation


Validations Required:
- Visual regression at each step
- Performance metrics (< 3s page loads)
- Accessibility compliance (WCAG 2.1 AA)
- Cross-browser compatibility
- Mobile responsiveness
- Error handling (payment failures, out of stock)
- Analytics event tracking"

Workflow 2: Playwright MCP Direct Control

Section titled “Workflow 2: Playwright MCP Direct Control”

Scenario: Using natural language commands to control browsers directly without writing test code.

Terminal window
# PRD: Direct Browser Control via MCP
# Plan: Use Playwright MCP for natural language browser automation


# First, install and connect to Playwright MCP
"Install Playwright MCP server:
npx -y @playwright/mcp@latest"


# Connect to MCP server
"Connect to Playwright MCP server for direct browser control"


# Natural language browser automation
"Using Playwright MCP:


1. Launch browser and navigate to https://example-shop.com
2. Take screenshot of homepage
3. Click on 'Products' in navigation
4. Search for 'wireless headphones'
5. Click on first product result
6. Take screenshot of product page
7. Click 'Add to Cart' button
8. Navigate to cart page
9. Verify product is in cart
10. Take final screenshot


For each step, validate the page loaded correctly and elements are visible"


# MCP Response (AI executes each command):
# ✓ Browser launched successfully
# ✓ Navigated to https://example-shop.com
# ✓ Screenshot saved: homepage.png
# ✓ Clicked 'Products' navigation
# ✓ Search completed for 'wireless headphones'
# ✓ First product clicked
# ✓ Screenshot saved: product-page.png
# ✓ Added to cart successfully
# ✓ Cart page loaded
# ✓ Product verified in cart
# ✓ Screenshot saved: cart-final.png

Workflow 3: Visual Regression Testing

Section titled “Workflow 3: Visual Regression Testing”

Scenario: Detecting visual changes across application updates with intelligent diff analysis.

// PRD: Visual Regression Testing System
// Plan: Use Playwright MCP for screenshot management


// Use Playwright MCP for screenshots
"Using Playwright MCP:
1. Take full-page screenshots
2. Compare with baseline images
3. Identify visual differences
4. Generate diff reports"


// AI-enhanced visual regression testing
test.describe('Visual Regression Suite', () => {
  // AI generates visual test scenarios
  const viewports = [
    { width: 375, height: 667, name: 'mobile' },
    { width: 768, height: 1024, name: 'tablet' },
    { width: 1920, height: 1080, name: 'desktop' }
  ];


  test('homepage visual consistency', async ({ page }) => {
    for (const viewport of viewports) {
      await page.setViewportSize(viewport);
      await page.goto('/');


      // AI-powered visual comparison
      const screenshot = await page.screenshot({
        fullPage: true,
        animations: 'disabled'
      });


      // AI analyzes visual differences
      const analysis = await ai.compareVisual({
        current: screenshot,
        baseline: `homepage-${viewport.name}.png`,
        threshold: 0.1,
        ignoreRegions: [
          { selector: '.dynamic-content' },
          { selector: '[data-testid="timestamp"]' }
        ]
      });


      if (analysis.hasDifferences) {
        console.log('AI Analysis:', analysis.summary);
        // AI suggests whether differences are intentional
        expect(analysis.isIntentional).toBe(true);
      }
    }
  });
});

Workflow 4: Self-Healing Test Architecture

Section titled “Workflow 4: Self-Healing Test Architecture”

Scenario: Creating tests that automatically adapt to UI changes and selector modifications.

// Self-healing locator strategies
class SmartLocator {
  constructor(private page: Page) {}


  async findElement(intent: string): Promise<Locator> {
    // Primary strategy: data-testid
    let element = this.page.locator(`[data-testid="${intent}"]`);


    if (!(await element.count())) {
      // Fallback: semantic HTML
      element = this.page.getByRole('button', {
        name: new RegExp(intent, 'i')
      });
    }


    if (!(await element.count())) {
      // AI-powered fallback
      const selector = await this.ai.findElement({
        intent,
        screenshot: await this.page.screenshot(),
        dom: await this.page.content()
      });


      element = this.page.locator(selector);
    }


    return element;
  }
}


// Usage in tests
test('self-healing login test', async ({ page }) => {
  const smart = new SmartLocator(page);


  // These will adapt to UI changes
  await (await smart.findElement('email-input')).fill('user@example.com');
  await (await smart.findElement('password-input')).fill('password123');
  await (await smart.findElement('login-submit')).click();
});

Workflow 5: Cross-Browser Testing Matrix

Section titled “Workflow 5: Cross-Browser Testing Matrix”

Scenario: Validating application behavior across different browsers, devices, and operating systems.

// AI-driven cross-browser testing
const browsers = ['chromium', 'firefox', 'webkit'];


browsers.forEach(browserName => {
  test.describe(`${browserName} tests`, () => {
    test.use({ browserName });


    test('cross-browser compatibility', async ({ page }) => {
      await page.goto('/');


      // AI detects browser-specific issues
      const issues = await ai.detectCompatibilityIssues({
        browser: browserName,
        page: await page.screenshot(),
        metrics: await page.metrics()
      });


      expect(issues).toHaveLength(0);


      // Browser-specific adjustments
      if (browserName === 'webkit') {
        // AI knows Safari quirks
        await page.waitForTimeout(100);
      }
    });
  });
});

Advanced E2E Testing Strategies

Section titled “Advanced E2E Testing Strategies”

AI-Generated User Journey Testing

Section titled “AI-Generated User Journey Testing”
Terminal window
# PRD: Automated User Journey Testing
# Requirements: Test realistic user paths through the application


# Plan:
"Use Playwright MCP to:
1. Analyze current page structure
2. Identify interactive elements
3. Generate realistic user paths
4. Execute and validate journeys"


# Todo:
# - [ ] Connect to Playwright MCP
# - [ ] Map application navigation
# - [ ] Generate persona-based journeys
# - [ ] Execute journey tests
# - [ ] Collect performance metrics
// AI creates realistic user journeys
class UserJourneyGenerator {
  async generateJourney(persona: UserPersona): Promise<TestJourney> {
    const journey = await ai.createJourney({
      persona: {
        type: persona.type, // 'power-user', 'first-time', 'mobile'
        goals: persona.goals,
        constraints: persona.constraints
      },
      application: {
        type: 'e-commerce',
        features: await this.analyzeFeatures()
      }
    });


    return {
      name: journey.name,
      steps: journey.steps.map(step => ({
        action: step.action,
        validation: step.expectedOutcome,
        alternatives: step.fallbackActions
      }))
    };
  }
}


// Test multiple user journeys
test.describe('User Journey Tests', () => {
  const personas = [
    { type: 'first-time', goals: ['browse', 'purchase'] },
    { type: 'returning', goals: ['reorder', 'track'] },
    { type: 'mobile', goals: ['quick-buy'] }
  ];


  personas.forEach(persona => {
    test(`${persona.type} user journey`, async ({ page }) => {
      const generator = new UserJourneyGenerator();
      const journey = await generator.generateJourney(persona);


      for (const step of journey.steps) {
        // Execute step
        await page.evaluate(step.action);


        // Validate outcome
        const result = await step.validation(page);
        expect(result.success).toBe(true);


        // Capture metrics
        await captureStepMetrics(page, step.name);
      }
    });
  });
});

Performance Integration in E2E Tests

Section titled “Performance Integration in E2E Tests”
// Performance metrics during E2E tests
test('checkout flow performance', async ({ page }) => {
  const metrics = new PerformanceCollector();


  // Monitor throughout the journey
  page.on('load', () => metrics.capture('pageLoad'));
  page.on('domcontentloaded', () => metrics.capture('domReady'));


  // Navigate and interact
  await page.goto('/products');
  metrics.mark('products-loaded');


  await page.click('[data-product-id="123"]');
  metrics.mark('product-selected');


  await page.click('button:has-text("Add to Cart")');
  metrics.mark('added-to-cart');


  // AI analyzes performance
  const analysis = await ai.analyzePerformance({
    metrics: metrics.getAll(),
    budgets: {
      'products-loaded': 2000,
      'added-to-cart': 500
    }
  });


  expect(analysis.violations).toHaveLength(0);


  // Generate performance report
  await generatePerformanceReport({
    journey: 'checkout',
    metrics: analysis,
    suggestions: analysis.aiSuggestions
  });
});

Accessibility Validation with AI

Section titled “Accessibility Validation with AI”
// Comprehensive accessibility testing
test.describe('Accessibility Compliance', () => {
  test('WCAG 2.1 AA compliance', async ({ page }) => {
    await page.goto('/');


    // Run axe-core with AI enhancement
    const violations = await page.evaluate(async () => {
      const results = await window.axe.run();


      // AI categorizes and prioritizes violations
      return ai.analyzeA11yViolations({
        violations: results.violations,
        context: {
          pageType: 'landing',
          userFlow: 'initial-visit'
        }
      });
    });


    // AI suggests fixes
    for (const violation of violations) {
      console.log(`
        Issue: ${violation.description}
        Impact: ${violation.impact}
        AI Fix: ${violation.suggestedFix}
        Code: ${violation.codeSnippet}
      `);
    }


    expect(violations.filter(v => v.impact === 'critical')).toHaveLength(0);
  });


  test('keyboard navigation', async ({ page }) => {
    await page.goto('/');


    // AI tests keyboard accessibility
    const keyboardTest = await ai.testKeyboardNavigation({
      startElement: 'body',
      expectedFlow: ['nav', 'main', 'footer'],
      interactions: ['tab', 'enter', 'escape']
    });


    expect(keyboardTest.accessible).toBe(true);
  });
});

Mobile and Touch Interface Testing

Section titled “Mobile and Touch Interface Testing”
// Mobile-specific E2E tests
test.describe('Mobile Experience', () => {
  test.use({
    viewport: { width: 375, height: 812 }, // iPhone X
    hasTouch: true,
    isMobile: true
  });


  test('mobile checkout flow', async ({ page }) => {
    await page.goto('/');


    // Test touch interactions
    await page.tap('[data-testid="menu-burger"]');
    await expect(page.locator('.mobile-menu')).toBeVisible();


    // Swipe to browse products
    await page.locator('.product-carousel').swipe('left');


    // Test mobile-specific features
    await page.tap('text=Add to Cart');


    // Verify mobile optimizations
    const mobileOptimizations = await ai.checkMobileOptimizations({
      viewport: await page.viewportSize(),
      performance: await page.metrics(),
      interactions: ['tap', 'swipe', 'pinch']
    });


    expect(mobileOptimizations.score).toBeGreaterThan(90);
  });
});

E2E Testing Best Practices

Section titled “E2E Testing Best Practices”

Sample Prompts for Different E2E Scenarios

Section titled “Sample Prompts for Different E2E Scenarios”

  1. Playwright MCP for Browser Control

    Terminal window
    # Direct browser manipulation
    "Use Playwright MCP to navigate to /products"
    "Take screenshot of current page"
    "Click on the first product"
    "Validate product details are visible"

  2. Database MCP for Test Data

    Terminal window
    # Set up test data
    "Connect to PostgreSQL MCP and:
    1. Create test user accounts
    2. Add sample products
    3. Clear test data after runs"

  3. GitHub MCP for Test Results

    Terminal window
    # Report test status
    "Use GitHub MCP to:
    1. Comment test results on PR
    2. Update commit status
    3. Link to test reports"

Test User Journeys 

// Focus on complete user flows
test('end-to-end purchase', async ({ page }) => {
  await completePurchaseJourney(page, {
    product: 'laptop',
    payment: 'credit-card',
    shipping: 'express'
  });
});

Use Page Objects 

// Maintainable page object pattern
class LoginPage {
  constructor(private page: Page) {}


  async login(email: string, password: string) {
    await this.page.fill('#email', email);
    await this.page.fill('#password', password);
    await this.page.click('button[type="submit"]');
  }
}

Handle Async Operations 

// Smart waiting strategies
await page.waitForLoadState('networkidle');
await page.waitForSelector('.content', {
  state: 'visible'
});

Parallel Execution 

// Run tests in parallel
test.describe.parallel('Product Tests', () => {
  test('product A', async ({ page }) => { /* ... */ });
  test('product B', async ({ page }) => { /* ... */ });
});

CI/CD Integration for E2E Testing

Section titled “CI/CD Integration for E2E Testing”
Terminal window
# PRD: Continuous E2E Testing Pipeline
# Plan: Integrate E2E tests with CI/CD using GitHub Actions


"Using GitHub MCP (if available) or standard GitHub Actions:
1. Set up test matrix for browsers
2. Configure Playwright MCP in CI
3. Run tests on PR and push
4. Generate test reports"
# GitHub Actions E2E workflow
name: E2E Tests


on:
  push:
    branches: [main]
  pull_request:


jobs:
  e2e-tests:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        browser: [chromium, firefox, webkit]


    steps:
      - uses: actions/checkout@v3


      - name: Install Playwright
        run: npx playwright install --with-deps ${{ matrix.browser }}


      - name: Run E2E Tests
        run: |
          npm run test:e2e -- \
            --browser=${{ matrix.browser }} \
            --reporter=html \
            --retries=2
        env:
          AI_API_KEY: ${{ secrets.AI_API_KEY }}


      - name: Upload Reports
        if: always()
        uses: actions/upload-artifact@v3
        with:
          name: playwright-report-${{ matrix.browser }}
          path: playwright-report/


      - name: AI Test Analysis
        if: failure()
        run: |
          npm run analyze:test-failures -- \
            --report=playwright-report \
            --suggest-fixes

Next Steps in E2E Testing

Section titled “Next Steps in E2E Testing”
Performance Testing Load testing integration: 'Test checkout flow under 1000 concurrent users with response time monitoring'
API Testing Patterns Backend validation: 'Create API tests that complement E2E user journey tests'
Mobile Testing Multi-device testing: 'Test responsive design across iOS, Android, and desktop browsers'
Test Data Management Realistic scenarios: 'Generate test data that reflects real user behaviors and edge cases'

Getting Started with E2E Testing

Section titled “Getting Started with E2E Testing”