Playwright + Cursor: AI 기반 테스트 자동화 마스터하기

# 프로젝트 생성
npm init playwright@latest
# Cursor 설치 (https://cursor.sh/)
brew install cursor

{
  "testGeneration": {
    "framework": "playwright",
    "language": "typescript",
    "codeStyle": "page-object-model"
  },
  "autoFixTests": true
}

// Cursor 프롬프트: "로그인 플로우 E2E 테스트 생성해줘"
import { test, expect } from '@playwright/test';
 
test('사용자 로그인 프로세스', async ({ page }) => {
  await page.goto('https://your-app.com/login');
  
  // AI가 자동 생성한 스텝
  await page.getByLabel('이메일').fill('user@example.com');
  await page.getByPlaceholder('비밀번호').type('securePassword123!');
  await page.getByRole('button', { name: '로그인' }).click();
  
  await expect(page).toHaveURL(/dashboard/);
  await expect(page.getByText('환영합니다!')).toBeVisible();
});

# 헤드리스 모드 실행
npx playwright test
# UI 모드 디버깅
npx playwright test --ui

test('상품 검색 기능', async ({ page }) => {
  await page.goto('https://your-app.com');
  
  await page.getByRole('search').click();
  // Cursor AI 수정 제안: "검색 입력 대기시간 추가 필요"
  await page.getByPlaceholder('검색어 입력').fill('스마트폰');
  await page.waitForTimeout(500); // AI가 자동 추가
  await page.keyboard.press('Enter');
  
  await expect(page.locator('.product-list')).toContainText('검색 결과');
});

// Cursor 프롬프트: "장바구니에 상품 3개 추가 후 결제까지 테스트 만들어줘"
test('장바구니 통합 테스트', async ({ page }) => {
  await page.goto('https://your-app.com/products');
  
  // AI 생성 코드
  const products = await page.locator('.product-item').all();
  for (let i = 0; i < 3; i++) {
    await products[i].locator('button:has-text("담기")').click();
    await page.waitForResponse(/add-to-cart/);
  }
  
  await page.goto('/cart');
  await expect(page.locator('.cart-item')).toHaveCount(3);
  
  await page.getByRole('button', { name: '결제하기' }).click();
  await expect(page).toHaveURL(/payment/);
});

# 테스트 실행 후 리포트 생성
npx playwright show-report

graph TD
  A[테스트 실행] --> B{결과 분석}
  B -->|성공| C[CI 통과]
  B -->|실패| D[AI 진단]
  D --> E[실패 스크린샷]
  D --> F[추천 수정안]
  D --> G[Flakiness 예측]

import { defineConfig } from '@playwright/test';
 
export default defineConfig({
  retries: process.env.CI ? 2 : 1,
  workers: 4,
  use: {
    trace: 'on-first-retry',
    // AI 기반 자동 수정 활성화
    aiReporter: {
      enabled: true,
      provider: 'cursor'
    }
  }
});

name: Playwright Tests
 
on: [push, pull_request]
 
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test
        env:
          CURSOR_API_KEY: ${{ secrets.CURSOR_API_KEY }}
      - uses: actions/upload-artifact@v3
        if: always()
        with:
          name: playwright-report
          path: playwright-report/

# 불안정 테스트 식별
npx playwright test --repeat-each 5
# AI 기반 원인 분석
cursor test:analyze-flaky --file tests/checkout.spec.ts

export default defineConfig({
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  timeout: 30_000,
  expect: {
    timeout: 5000
  }
});

export async function smartWaitFor(
  locator: Locator,
  timeout = 10_000
) {
  await locator.waitFor({
    state: 'attached',
    timeout,
    // AI가 컨텍스트 기반으로 최적 시간 추천
    interval: await calculateOptimalInterval()
  });
}