Playwright

// Playwright 기본 테스트 작성 예제
import { test, expect } from '@playwright/test';

// 테스트 스위트: 로그인 기능
test.describe('로그인 기능', () => {

    // 기본 로그인 테스트
    test('유효한 자격증명으로 로그인 성공', async ({ page }) => {
        // 1. 로그인 페이지로 이동
        await page.goto('https://example.com/login');

        // 2. 이메일 입력 (Auto-wait: 요소가 준비될 때까지 자동 대기)
        await page.fill('[data-testid="email"]', 'user@example.com');

        // 3. 비밀번호 입력
        await page.fill('[data-testid="password"]', 'securePassword123');

        // 4. 로그인 버튼 클릭
        await page.click('button[type="submit"]');

        // 5. 대시보드로 리다이렉트 확인
        await expect(page).toHaveURL('/dashboard');

        // 6. 환영 메시지 확인
        await expect(
            page.locator('[data-testid="welcome-message"]')
        ).toContainText('환영합니다');
    });

    // 실패 케이스 테스트
    test('잘못된 비밀번호로 에러 메시지 표시', async ({ page }) => {
        await page.goto('https://example.com/login');
        await page.fill('[data-testid="email"]', 'user@example.com');
        await page.fill('[data-testid="password"]', 'wrongPassword');
        await page.click('button[type="submit"]');

        // 에러 메시지가 표시되는지 확인
        await expect(
            page.locator('.error-message')
        ).toBeVisible();
    });
});

// 페이지 객체 패턴 (Page Object Model)
// 테스트 코드의 재사용성과 유지보수성을 높이는 설계 패턴
import { Page, Locator, expect } from '@playwright/test';

export class LoginPage {
    readonly page: Page;
    readonly emailInput: Locator;
    readonly passwordInput: Locator;
    readonly submitButton: Locator;
    readonly errorMessage: Locator;

    constructor(page: Page) {
        this.page = page;
        // 선택자를 한 곳에서 관리
        this.emailInput = page.getByTestId('email');
        this.passwordInput = page.getByTestId('password');
        this.submitButton = page.getByRole('button', { name: '로그인' });
        this.errorMessage = page.locator('.error-message');
    }

    // 페이지 이동 메서드
    async goto() {
        await this.page.goto('/login');
    }

    // 로그인 액션 메서드
    async login(email: string, password: string) {
        await this.emailInput.fill(email);
        await this.passwordInput.fill(password);
        await this.submitButton.click();
    }

    // 검증 메서드
    async expectError(message: string) {
        await expect(this.errorMessage).toContainText(message);
    }
}

// ===== 테스트에서 사용 =====
// login.spec.ts
import { test } from '@playwright/test';
import { LoginPage } from './pages/LoginPage';

test('페이지 객체 패턴 사용 예시', async ({ page }) => {
    const loginPage = new LoginPage(page);

    await loginPage.goto();
    await loginPage.login('test@example.com', 'password123');
    // UI가 변경되어도 LoginPage 클래스만 수정하면 됨
});