Przejdź do głównej zawartości
Developer Toolkit Developer Toolkit Cursor & Claude Code | Developer Toolkit

Automatyzacja testowania end-to-end

PRD: System inteligentnego testowania E2E

Wymagania: Utwórz kompleksowe testy end-to-end symulujące prawdziwe podróże użytkowników, dostosowujące się do zmian UI i zapewniające 99,5%+ niezawodności we wszystkich przeglądarkach i urządzeniach używając automatyzacji wspieranej przez AI.

Plan: Wykorzystaj Playwright MCP do bezpośredniej kontroli przeglądarki, w połączeniu z Cursor i Claude Code do tworzenia i utrzymania testów w języku naturalnym.

Todo:

  • Skonfiguruj serwer Playwright MCP
  • Przebadaj podejścia do testowania regresji wizualnej
  • Implementuj automatyzację podróży użytkowników
  • Utwórz macierz testów międzyprzeglądarowych
  • Skonfiguruj wykrywanie regresji wizualnej
  • Zbuduj integrację monitorowania wydajności

Rewolucja testowania E2E natywnego dla AI

Dział zatytułowany „Rewolucja testowania E2E natywnego dla AI”

Testowanie E2E ewoluuje od skryptowanych interakcji do inteligentnej symulacji użytkowników. AI rozumie intencje użytkowników, generuje realistyczne scenariusze testowe i utrzymuje testy w miarę zmian aplikacji.

Kontrola językiem naturalnym

Prompt: “Testuj przepływ płatności z wykrywaniem regresji wizualnej”

Wynik: Kompletna podróż użytkownika z porównaniem zrzutów ekranu

Inteligentne wykrywanie elementów

AI znajduje elementy używając wielu strategii: atrybuty danych, etykiety ARIA, semantyczny HTML

Inteligencja wizualna

Automatycznie wykrywa przesunięcia układu, zmiany kolorów i uszkodzone komponenty UI

Testowanie międzyplatformowe

Jeden prompt generuje testy dla desktop, tablet i mobilne viewport

Rzeczywiste przepływy pracy testowania E2E

Dział zatytułowany „Rzeczywiste przepływy pracy testowania E2E”

Przepływ 1: podróż płatności e-commerce

Dział zatytułowany „Przepływ 1: podróż płatności e-commerce”

Scenariusz: Testowanie kompletnego przepływu zakupu od przeglądania produktów do potwierdzenia zamówienia z wieloma personami użytkowników.

Okno terminala
# PRD: Testowanie płatności e-commerce end-to-end
# Wymagania: Testuj kompletny przepływ zakupu dla różnych typów użytkowników i urządzeń


"Używając Playwright MCP, utwórz kompleksowe testy płatności:


Persony użytkowników:
1. Użytkownik gość (mobile, wolne połączenie)
2. Zarejestrowany użytkownik (desktop, szybkie połączenie)
3. Członek premium (tablet, średnie połączenie)


Przepływ testów dla każdej persony:
1. Nawiguj do katalogu produktów
2. Szukaj i filtruj produkty
3. Dodaj wiele przedmiotów do koszyka
4. Zastosuj kody rabatowe
5. Przejdź do płatności
6. Wypełnij informacje wysyłkowe
7. Wybierz metodę płatności
8. Sfinalizuj zakup
9. Weryfikuj potwierdzenie zamówienia


Wymagane walidacje:
- Regresja wizualna na każdym kroku
- Metryki wydajności (< 3s ładowania stron)
- Zgodność z dostępnością (WCAG 2.1 AA)
- Kompatybilność międzyprzeglądarowa
- Responsywność mobilna
- Obsługa błędów (awarie płatności, brak towaru)
- Śledzenie zdarzeń analitycznych"

Przepływ 2: bezpośrednia kontrola Playwright MCP

Dział zatytułowany „Przepływ 2: bezpośrednia kontrola Playwright MCP”

Scenariusz: Używanie poleceń w języku naturalnym do bezpośredniej kontroli przeglądarek bez pisania kodu testowego.

Okno terminala
# PRD: Bezpośrednia kontrola przeglądarki przez MCP
# Plan: Użyj Playwright MCP do automatyzacji przeglądarki w języku naturalnym


# Najpierw zainstaluj i połącz z Playwright MCP
"Zainstaluj serwer Playwright MCP:
npx -y @playwright/mcp@latest"


# Połącz z serwerem MCP
"Połącz się z serwerem Playwright MCP do bezpośredniej kontroli przeglądarki"


# Automatyzacja przeglądarki w języku naturalnym
"Używając Playwright MCP:


1. Uruchom przeglądarkę i przejdź do https://example-shop.com
2. Zrób zrzut ekranu strony głównej
3. Kliknij na 'Produkty' w nawigacji
4. Szukaj 'słuchawki bezprzewodowe'
5. Kliknij na pierwszy wynik produktu
6. Zrób zrzut ekranu strony produktu
7. Kliknij przycisk 'Dodaj do koszyka'
8. Przejdź do strony koszyka
9. Weryfikuj, że produkt jest w koszyku
10. Zrób finalna zrzut ekranu


Dla każdego kroku, waliduj, że strona załadowała się poprawnie i elementy są widoczne"


# Odpowiedź MCP (AI wykonuje każde polecenie):
# ✓ Przeglądarka uruchomiona pomyślnie
# ✓ Przeszedł do https://example-shop.com
# ✓ Zrzut ekranu zapisany: homepage.png
# ✓ Kliknięto nawigację 'Produkty'
# ✓ Wyszukiwanie 'słuchawki bezprzewodowe' ukończone
# ✓ Pierwszy produkt kliknięty
# ✓ Zrzut ekranu zapisany: product-page.png
# ✓ Dodano do koszyka pomyślnie
# ✓ Strona koszyka załadowana
# ✓ Produkt zweryfikowany w koszyku
# ✓ Zrzut ekranu zapisany: cart-final.png

Przepływ 3: testowanie regresji wizualnej

Dział zatytułowany „Przepływ 3: testowanie regresji wizualnej”

Scenariusz: Wykrywanie zmian wizualnych w aktualizacjach aplikacji z inteligentną analizą różnic.

// PRD: System testowania regresji wizualnej
// Plan: Użyj Playwright MCP do zarządzania zrzutami ekranu


// Użyj Playwright MCP do zrzutów ekranu
"Używając Playwright MCP:
1. Rób pełnostronicowe zrzuty ekranu
2. Porównuj z obrazami bazowymi
3. Identyfikuj różnice wizualne
4. Generuj raporty różnic"


// Testowanie regresji wizualnej ulepszone przez AI
test.describe('Zestaw regresji wizualnej', () => {
  // AI generuje scenariusze testów wizualnych
  const viewports = [
    { width: 375, height: 667, name: 'mobile' },
    { width: 768, height: 1024, name: 'tablet' },
    { width: 1920, height: 1080, name: 'desktop' }
  ];


  test('spójność wizualna strony głównej', async ({ page }) => {
    for (const viewport of viewports) {
      await page.setViewportSize(viewport);
      await page.goto('/');


      // Porównanie wizualne wspierane przez AI
      const screenshot = await page.screenshot({
        fullPage: true,
        animations: 'disabled'
      });


      // AI analizuje różnice wizualne
      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('Analiza AI:', analysis.summary);
        // AI sugeruje czy różnice są zamierzone
        expect(analysis.isIntentional).toBe(true);
      }
    }
  });
});

Przepływ 4: architektura testów samonaprawialnych

Dział zatytułowany „Przepływ 4: architektura testów samonaprawialnych”

Scenariusz: Tworzenie testów automatycznie dostosowujących się do zmian UI i modyfikacji selektorów.

// Strategie lokatorów samonaprawialnych
class SmartLocator {
  constructor(private page: Page) {}


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


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


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


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


    return element;
  }
}


// Użycie w testach
test('samonaprawialny test logowania', async ({ page }) => {
  const smart = new SmartLocator(page);


  // Te będą się dostosowywać do zmian UI
  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();
});

Przepływ 5: macierz testów międzyprzeglądarowych

Dział zatytułowany „Przepływ 5: macierz testów międzyprzeglądarowych”

Scenariusz: Walidacja zachowania aplikacji w różnych przeglądarkach, urządzeniach i systemach operacyjnych.

// Testowanie międzyprzeglądarowe napędzane przez AI
const browsers = ['chromium', 'firefox', 'webkit'];


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


    test('kompatybilność międzyprzeglądarowa', async ({ page }) => {
      await page.goto('/');


      // AI wykrywa problemy specyficzne dla przeglądarki
      const issues = await ai.detectCompatibilityIssues({
        browser: browserName,
        page: await page.screenshot(),
        metrics: await page.metrics()
      });


      expect(issues).toHaveLength(0);


      // Dostosowania specyficzne dla przeglądarki
      if (browserName === 'webkit') {
        // AI zna dziwactwa Safari
        await page.waitForTimeout(100);
      }
    });
  });
});

Zaawansowane strategie testowania E2E

Dział zatytułowany „Zaawansowane strategie testowania E2E”

Testowanie podróży użytkowników generowane przez AI

Dział zatytułowany „Testowanie podróży użytkowników generowane przez AI”
Okno terminala
# PRD: Automatyczne testowanie podróży użytkowników
# Wymagania: Testuj realistyczne ścieżki użytkowników przez aplikację


# Plan:
"Używaj Playwright MCP do:
1. Analizy obecnej struktury stron
2. Identyfikacji elementów interaktywnych
3. Generowania realistycznych ścieżek użytkowników
4. Wykonywania i walidacji podróży"


# Todo:
# - [ ] Połącz z Playwright MCP
# - [ ] Mapuj nawigację aplikacji
# - [ ] Generuj podróże oparte na personach
# - [ ] Wykonuj testy podróży
# - [ ] Zbieraj metryki wydajności
// AI tworzy realistyczne podróże użytkowników
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
      }))
    };
  }
}


// Testuj wiele podróży użytkowników
test.describe('Testy podróży użytkowników', () => {
  const personas = [
    { type: 'first-time', goals: ['browse', 'purchase'] },
    { type: 'returning', goals: ['reorder', 'track'] },
    { type: 'mobile', goals: ['quick-buy'] }
  ];


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


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


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


        // Przechwyć metryki
        await captureStepMetrics(page, step.name);
      }
    });
  });
});

Integracja wydajności w testach E2E

Dział zatytułowany „Integracja wydajności w testach E2E”
// Metryki wydajności podczas testów E2E
test('wydajność przepływu płatności', async ({ page }) => {
  const metrics = new PerformanceCollector();


  // Monitoruj przez całą podróż
  page.on('load', () => metrics.capture('pageLoad'));
  page.on('domcontentloaded', () => metrics.capture('domReady'));


  // Nawiguj i wchodzi w interakcje
  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("Dodaj do koszyka")');
  metrics.mark('added-to-cart');


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


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


  // Generuj raport wydajności
  await generatePerformanceReport({
    journey: 'checkout',
    metrics: analysis,
    suggestions: analysis.aiSuggestions
  });
});

Walidacja dostępności z AI

Dział zatytułowany „Walidacja dostępności z AI”
// Kompleksowe testowanie dostępności
test.describe('Zgodność z dostępnością', () => {
  test('zgodność WCAG 2.1 AA', async ({ page }) => {
    await page.goto('/');


    // Uruchom axe-core z ulepszeniem AI
    const violations = await page.evaluate(async () => {
      const results = await window.axe.run();


      // AI kategoryzuje i priorytetyzuje naruszenia
      return ai.analyzeA11yViolations({
        violations: results.violations,
        context: {
          pageType: 'landing',
          userFlow: 'initial-visit'
        }
      });
    });


    // AI sugeruje poprawki
    for (const violation of violations) {
      console.log(`
        Problem: ${violation.description}
        Wpływ: ${violation.impact}
        Poprawka AI: ${violation.suggestedFix}
        Kod: ${violation.codeSnippet}
      `);
    }


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


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


    // AI testuje dostępność klawiatury
    const keyboardTest = await ai.testKeyboardNavigation({
      startElement: 'body',
      expectedFlow: ['nav', 'main', 'footer'],
      interactions: ['tab', 'enter', 'escape']
    });


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

Testowanie interfejsów mobilnych i dotykowych

Dział zatytułowany „Testowanie interfejsów mobilnych i dotykowych”
// Testy specyficzne dla mobile
test.describe('Doświadczenie mobilne', () => {
  test.use({
    viewport: { width: 375, height: 812 }, // iPhone X
    hasTouch: true,
    isMobile: true
  });


  test('przepływ płatności mobilnej', async ({ page }) => {
    await page.goto('/');


    // Testuj interakcje dotykowe
    await page.tap('[data-testid="menu-burger"]');
    await expect(page.locator('.mobile-menu')).toBeVisible();


    // Przeciągnij do przeglądania produktów
    await page.locator('.product-carousel').swipe('left');


    // Testuj funkcje specyficzne dla mobile
    await page.tap('text=Dodaj do koszyka');


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


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

Najlepsze praktyki testowania E2E

Dział zatytułowany „Najlepsze praktyki testowania E2E”

Przykładowe prompty dla różnych scenariuszy E2E

Dział zatytułowany „Przykładowe prompty dla różnych scenariuszy E2E”

  1. Playwright MCP do kontroli przeglądarki

    Okno terminala
    # Bezpośrednia manipulacja przeglądarki
    "Użyj Playwright MCP do przejścia do /products"
    "Zrób zrzut ekranu obecnej strony"
    "Kliknij na pierwszy produkt"
    "Waliduj, że szczegóły produktu są widoczne"

  2. Database MCP dla danych testowych

    Okno terminala
    # Skonfiguruj dane testowe
    "Połącz z PostgreSQL MCP i:
    1. Utwórz testowe konta użytkowników
    2. Dodaj przykładowe produkty
    3. Wyczyść dane testowe po uruchomieniach"

  3. GitHub MCP dla wyników testów

    Okno terminala
    # Raportuj status testów
    "Użyj GitHub MCP do:
    1. Komentowania wyników testów na PR
    2. Aktualizacji statusu commita
    3. Linkowania do raportów testów"

Testuj podróże użytkowników 

// Skup się na kompletnych przepływach użytkowników
test('zakup end-to-end', async ({ page }) => {
  await completePurchaseJourney(page, {
    product: 'laptop',
    payment: 'credit-card',
    shipping: 'express'
  });
});

Używaj wzorców Page Object 

// Utrzymywalny wzorzec page object
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"]');
  }
}

Obsługuj operacje asynchroniczne 

// Inteligentne strategie oczekiwania
await page.waitForLoadState('networkidle');
await page.waitForSelector('.content', {
  state: 'visible'
});

Równoległe wykonywanie 

// Uruchamiaj testy równolegle
test.describe.parallel('Testy produktów', () => {
  test('produkt A', async ({ page }) => { /* ... */ });
  test('produkt B', async ({ page }) => { /* ... */ });
});

Integracja CI/CD dla testowania E2E

Dział zatytułowany „Integracja CI/CD dla testowania E2E”
Okno terminala
# PRD: Potok ciągłego testowania E2E
# Plan: Integruj testy E2E z CI/CD używając GitHub Actions


"Używając GitHub MCP (jeśli dostępne) lub standardowych GitHub Actions:
1. Skonfiguruj macierz testów dla przeglądarek
2. Skonfiguruj Playwright MCP w CI
3. Uruchamiaj testy na PR i push
4. Generuj raporty testów"
# Przepływ pracy E2E GitHub Actions
name: Testy E2E


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: Zainstaluj Playwright
        run: npx playwright install --with-deps ${{ matrix.browser }}


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


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


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

Następne kroki w testowaniu E2E

Dział zatytułowany „Następne kroki w testowaniu E2E”
Testowanie wydajności Integracja testowania obciążenia: 'Testuj przepływ płatności pod 1000 równoczesnych użytkowników z monitorowaniem czasu odpowiedzi'
Wzorce testowania API Walidacja backendu: 'Utwórz testy API komplementarne do testów podróży użytkowników E2E'
Testowanie mobilne Testowanie wielourządzeniowe: 'Testuj responsywny design w przeglądarkach iOS, Android i desktop'
Zarządzanie danymi testowymi Realistyczne scenariusze: 'Generuj dane testowe odzwierciedlające rzeczywiste zachowania użytkowników i przypadki brzegowe'

Rozpoczęcie z testowaniem E2E

Dział zatytułowany „Rozpoczęcie z testowaniem E2E”