4장: E2E 테스트 -- AI 에이전트 기반 자동화

1. https://example.com/login 페이지로 이동합니다
2. 이메일 입력란에 "test@example.com"을 입력합니다
3. 비밀번호 입력란에 "password123"을 입력합니다
4. 로그인 버튼을 클릭합니다
5. 대시보드 페이지로 이동되는지 확인합니다
6. 환영 메시지에 "test@example.com"이 포함되어 있는지 확인합니다

login as "test@example.com" with password "password123"
check that page contains "대시보드"
click on "새 프로젝트 만들기"
enter "AI 테스트 프로젝트" into "프로젝트 이름"
click on "생성"
check that page contains "AI 테스트 프로젝트"

import { defineConfig, devices } from "@playwright/test";
 
export default defineConfig({
  testDir: "./e2e",
  timeout: 30000,
  retries: 2,
  workers: 4,
  reporter: [
    ["html", { open: "never" }],
    ["json", { outputFile: "test-results.json" }],
  ],
  use: {
    baseURL: "http://localhost:3000",
    screenshot: "only-on-failure",
    video: "retain-on-failure",
    trace: "retain-on-failure",
  },
  projects: [
    { name: "chromium", use: { ...devices["Desktop Chrome"] } },
    { name: "firefox", use: { ...devices["Desktop Firefox"] } },
    { name: "mobile", use: { ...devices["iPhone 14"] } },
  ],
});

import { Page, Locator } from "@playwright/test";
 
/**
 * 의미 기반 요소 탐색 유틸리티
 * 여러 전략을 순차적으로 시도하여 가장 적합한 요소를 반환합니다.
 */
export async function findElement(
  page: Page,
  description: string
): Promise<Locator> {
  // 전략 1: getByRole (접근성 기반)
  const roleLocator = await tryRoleLocator(page, description);
  if (roleLocator) return roleLocator;
 
  // 전략 2: getByLabel (레이블 기반)
  const labelLocator = page.getByLabel(description);
  if (await labelLocator.count() > 0) return labelLocator;
 
  // 전략 3: getByPlaceholder (플레이스홀더 기반)
  const placeholderLocator = page.getByPlaceholder(description);
  if (await placeholderLocator.count() > 0) return placeholderLocator;
 
  // 전략 4: getByText (텍스트 기반)
  const textLocator = page.getByText(description, { exact: false });
  if (await textLocator.count() > 0) return textLocator.first();
 
  // 전략 5: data-testid 패턴 추론
  const testId = description.toLowerCase().replace(/\s+/g, "-");
  const testIdLocator = page.getByTestId(testId);
  if (await testIdLocator.count() > 0) return testIdLocator;
 
  throw new Error(`요소를 찾을 수 없습니다: ${description}`);
}
 
async function tryRoleLocator(
  page: Page,
  description: string
): Promise<Locator | null> {
  const roleMap: Record<string, string> = {
    "버튼": "button",
    "링크": "link",
    "입력란": "textbox",
    "체크박스": "checkbox",
    "드롭다운": "combobox",
  };
 
  for (const [keyword, role] of Object.entries(roleMap)) {
    if (description.includes(keyword)) {
      const name = description.replace(keyword, "").trim();
      const locator = page.getByRole(role as any, { name });
      if (await locator.count() > 0) return locator;
    }
  }
  return null;
}

import { test, expect } from "@playwright/test";
 
test.describe("사용자 등록 및 로그인 플로우", () => {
  const testUser = {
    email: `test-${Date.now()}@example.com`,
    name: "테스트 사용자",
    password: "SecurePass123!",
  };
 
  test("신규 사용자가 등록하고 로그인합니다", async ({ page }) => {
    // 회원가입 페이지로 이동
    await page.goto("/signup");
    await expect(page).toHaveTitle(/회원가입/);
 
    // 폼 입력
    await page.getByLabel("이메일").fill(testUser.email);
    await page.getByLabel("이름").fill(testUser.name);
    await page.getByLabel("비밀번호").fill(testUser.password);
    await page.getByLabel("비밀번호 확인").fill(testUser.password);
 
    // 약관 동의
    await page.getByRole("checkbox", { name: "이용약관" }).check();
    await page.getByRole("checkbox", { name: "개인정보" }).check();
 
    // 가입 버튼 클릭
    await page.getByRole("button", { name: "가입하기" }).click();
 
    // 가입 완료 확인
    await expect(page.getByText("가입이 완료되었습니다")).toBeVisible();
 
    // 로그인 페이지로 이동
    await page.goto("/login");
 
    // 로그인 수행
    await page.getByLabel("이메일").fill(testUser.email);
    await page.getByLabel("비밀번호").fill(testUser.password);
    await page.getByRole("button", { name: "로그인" }).click();
 
    // 대시보드 도착 확인
    await expect(page).toHaveURL(/dashboard/);
    await expect(page.getByText(testUser.name)).toBeVisible();
  });
 
  test("잘못된 비밀번호로 로그인 시 에러 메시지를 표시합니다", async ({
    page,
  }) => {
    await page.goto("/login");
    await page.getByLabel("이메일").fill(testUser.email);
    await page.getByLabel("비밀번호").fill("wrongpassword");
    await page.getByRole("button", { name: "로그인" }).click();
 
    await expect(
      page.getByText("이메일 또는 비밀번호가 올바르지 않습니다")
    ).toBeVisible();
  });
});

import { Page } from "@playwright/test";
 
/**
 * 페이지 안정화 유틸리티
 * 네트워크 요청 완료와 애니메이션 종료를 기다립니다.
 */
export async function waitForStable(page: Page): Promise<void> {
  // 네트워크 유휴 상태 대기
  await page.waitForLoadState("networkidle");
 
  // 진행 중인 애니메이션 완료 대기
  await page.evaluate(() => {
    return Promise.all(
      document.getAnimations().map((animation) => animation.finished)
    );
  });
}
 
/**
 * 재시도 가능한 액션 실행
 * 일시적인 실패에 대해 지정된 횟수만큼 재시도합니다.
 */
export async function retryAction<T>(
  action: () => Promise<T>,
  maxRetries: number = 3,
  delayMs: number = 500
): Promise<T> {
  let lastError: Error | undefined;
 
  for (let attempt = 0; attempt < maxRetries; attempt++) {
    try {
      return await action();
    } catch (error) {
      lastError = error as Error;
      if (attempt < maxRetries - 1) {
        await new Promise((resolve) => setTimeout(resolve, delayMs));
      }
    }
  }
 
  throw lastError;
}