import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  
  // 타임아웃
  timeout: 30 * 1000,
  
  // 재시도
  retries: process.env.CI ? 2 : 0,
  
  // 병렬 실행
  workers: process.env.CI ? 1 : undefined,
  
  // 리포터
  reporter: 'html',
  
  use: {
    // 기본 URL
    baseURL: 'http://localhost:3000',
    
    // 스크린샷
    screenshot: 'only-on-failure',
    
    // 비디오
    video: 'retain-on-failure',
    
    // 트레이스
    trace: 'on-first-retry',
  },
  
  // 프로젝트 (브라우저별)
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
    {
      name: 'Mobile Chrome',
      use: { ...devices['Pixel 5'] },
    },
  ],
  
  // 개발 서버 자동 시작
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
});

import { test, expect } from '@playwright/test';

test.describe('로그인 기능', () => {
  
  test.beforeEach(async ({ page }) => {
    // 각 테스트 전에 로그인 페이지로 이동
    await page.goto('/login');
  });
  
  test('성공적인 로그인', async ({ page }) => {
    // 1. 입력 필드 찾아서 입력
    await page.fill('input[name="username"]', 'testuser');
    await page.fill('input[name="password"]', 'password123');
    
    // 2. 로그인 버튼 클릭
    await page.click('button:has-text("로그인")');
    
    // 3. 홈 페이지로 리다이렉트 확인
    await expect(page).toHaveURL('/home');
    
    // 4. 환영 메시지 확인
    await expect(page.locator('text=환영합니다')).toBeVisible();
  });
  
  test('잘못된 비밀번호', async ({ page }) => {
    await page.fill('input[name="username"]', 'testuser');
    await page.fill('input[name="password"]', 'wrongpassword');
    await page.click('button:has-text("로그인")');
    
    // 에러 메시지 확인
    await expect(page.locator('.error-message'))
      .toHaveText('아이디 또는 비밀번호가 일치하지 않습니다');
  });
  
  test('빈 필드 검증', async ({ page }) => {
    await page.click('button:has-text("로그인")');
    
    // HTML5 validation 확인
    const usernameInput = page.locator('input[name="username"]');
    await expect(usernameInput).toHaveAttribute('required', '');
  });
});

import { test, expect } from '@playwright/test';

test('상품 구매 전체 흐름', async ({ page }) => {
  
  // 1. 홈페이지 방문
  await page.goto('/');
  await expect(page).toHaveTitle(/쇼핑몰/);
  
  // 2. 상품 검색
  await page.fill('input[name="search"]', '노트북');
  await page.press('input[name="search"]', 'Enter');
  
  // 검색 결과 확인
  await expect(page.locator('.product-list .product')).toHaveCount(10, {
    timeout: 5000
  });
  
  // 3. 첫 번째 상품 클릭
  await page.click('.product-list .product:first-child');
  
  // 상품 상세 페이지 확인
  await expect(page.locator('h1.product-title')).toBeVisible();
  
  // 4. 장바구니에 추가
  await page.click('button:has-text("장바구니 담기")');
  
  // 성공 토스트 메시지 확인
  await expect(page.locator('.toast.success'))
    .toHaveText('장바구니에 추가되었습니다');
  
  // 5. 장바구니로 이동
  await page.click('a[href="/cart"]');
  await expect(page).toHaveURL('/cart');
  
  // 장바구니 아이템 확인
  await expect(page.locator('.cart-item')).toHaveCount(1);
  
  // 6. 수량 변경
  await page.click('.quantity-increase');
  await expect(page.locator('.quantity-display')).toHaveText('2');
  
  // 총 가격 업데이트 확인
  const totalPrice = await page.locator('.total-price').textContent();
  expect(totalPrice).toContain('2,000,000'); // 예시
  
  // 7. 결제 페이지로 이동
  await page.click('button:has-text("주문하기")');
  await expect(page).toHaveURL('/checkout');
  
  // 8. 배송 정보 입력
  await page.fill('input[name="name"]', '홍길동');
  await page.fill('input[name="phone"]', '010-1234-5678');
  await page.fill('input[name="address"]', '서울시 강남구');
  
  // 9. 결제 수단 선택
  await page.check('input[value="card"]');
  
  // 10. 주문 완료
  await page.click('button:has-text("결제하기")');
  
  // 주문 완료 페이지 확인
  await expect(page).toHaveURL(/\/order\/\d+/);
  await expect(page.locator('.order-complete'))
    .toHaveText('주문이 완료되었습니다');
});

test('검색 후 결과 확인', async ({ page }) => {
  await page.goto('/');
  
  // API 응답 대기
  const responsePromise = page.waitForResponse(
    response => response.url().includes('/api/search') && response.status() === 200
  );
  
  await page.fill('input[name="search"]', '노트북');
  await page.press('input[name="search"]', 'Enter');
  
  const response = await responsePromise;
  const data = await response.json();
  
  // API 응답 검증
  expect(data.results).toHaveLength(10);
  
  // UI 업데이트 확인
  await expect(page.locator('.product')).toHaveCount(10);
});

test('API 모킹으로 빠른 테스트', async ({ page }) => {
  // API 응답 모킹
  await page.route('**/api/products', route => {
    route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({
        products: [
          { id: 1, name: '테스트 상품 1', price: 10000 },
          { id: 2, name: '테스트 상품 2', price: 20000 },
        ]
      })
    });
  });
  
  await page.goto('/products');
  
  // 모킹된 데이터로 렌더링 확인
  await expect(page.locator('.product')).toHaveCount(2);
  await expect(page.locator('.product:first-child .name'))
    .toHaveText('테스트 상품 1');
});

// pages/LoginPage.ts
export class LoginPage {
  constructor(private page: Page) {}
  
  // Locators
  private usernameInput = () => this.page.locator('input[name="username"]');
  private passwordInput = () => this.page.locator('input[name="password"]');
  private loginButton = () => this.page.locator('button:has-text("로그인")');
  private errorMessage = () => this.page.locator('.error-message');
  
  // Actions
  async goto() {
    await this.page.goto('/login');
  }
  
  async login(username: string, password: string) {
    await this.usernameInput().fill(username);
    await this.passwordInput().fill(password);
    await this.loginButton().click();
  }
  
  async getErrorMessage() {
    return await this.errorMessage().textContent();
  }
  
  // Assertions
  async expectErrorMessage(message: string) {
    await expect(this.errorMessage()).toHaveText(message);
  }
}

import { test, expect } from '@playwright/test';
import { LoginPage } from './pages/LoginPage';

test('로그인 실패', async ({ page }) => {
  const loginPage = new LoginPage(page);
  
  await loginPage.goto();
  await loginPage.login('testuser', 'wrongpassword');
  await loginPage.expectErrorMessage('아이디 또는 비밀번호가 일치하지 않습니다');
});

// auth.setup.ts
import { test as setup } from '@playwright/test';

const authFile = 'playwright/.auth/user.json';

setup('authenticate', async ({ page }) => {
  await page.goto('/login');
  await page.fill('input[name="username"]', 'testuser');
  await page.fill('input[name="password"]', 'password123');
  await page.click('button:has-text("로그인")');
  
  // 로그인 완료 대기
  await page.waitForURL('/home');
  
  // 인증 상태 저장
  await page.context().storageState({ path: authFile });
});

// playwright.config.ts
export default defineConfig({
  projects: [
    {
      name: 'setup',
      testMatch: /.*\.setup\.ts/
    },
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
        storageState: 'playwright/.auth/user.json',
      },
      dependencies: ['setup'],
    },
  ],
});

// 테스트는 이미 로그인된 상태로 시작
test('프로필 수정', async ({ page }) => {
  await page.goto('/profile'); // 이미 로그인됨
  // ...
});

// ❌ Bad: 테스트 간 의존성
test('사용자 생성', async ({ page }) => {
  // user를 전역 변수에 저장
});

test('사용자 수정', async ({ page }) => {
  // 이전 테스트의 user 사용
});

// ✅ Good: 각 테스트가 독립적
test('사용자 수정', async ({ page }) => {
  // 테스트 내에서 사용자 생성
  const user = await createTestUser();
  // 수정 테스트
  // 정리
  await deleteTestUser(user.id);
});

// ❌ Bad: 깨지기 쉬운 Locator
page.locator('div > div:nth-child(3) > button')
page.locator('button').nth(5)

// ✅ Good: 의미 있는 Locator
page.getByRole('button', { name: '제출' })
page.getByTestId('submit-button')
page.getByLabel('사용자 이름')

// ❌ Bad: 고정된 대기 시간
await page.click('button');
await page.waitForTimeout(3000); // 항상 3초 대기

// ✅ Good: 자동 대기 또는 조건 대기
await page.click('button');
await page.waitForLoadState('networkidle');
await page.waitForSelector('.result');

// ✅ Good: 고유한 테스트 데이터
test('사용자 등록', async ({ page }) => {
  const uniqueEmail = `test${Date.now()}@example.com`;
  
  await page.goto('/register');
  await page.fill('input[name="email"]', uniqueEmail);
  // ...
});

test('중요한 기능', async ({ page }) => {
  await page.goto('/dashboard');
  
  // 특정 시점 스크린샷
  await page.screenshot({ path: 'dashboard.png' });
  
  // 특정 요소만 스크린샷
  await page.locator('.chart').screenshot({ path: 'chart.png' });
  
  // 전체 페이지 스크린샷
  await page.screenshot({ path: 'full-page.png', fullPage: true });
});