export default defineConfig({
// 1) 디렉토리 설정 및 테스트 시간 설정
testDir: “./tests”,
timeout: 30 * 1000 각 테스트 최대 시간(30초)
expect: { timeout : 5000} // 기대값 최대 시간 5초

// 2) 재시도 및 병렬 실행
retries: process.env.CI ? 2 : 0 // CI에서는 실패 시 2번 재시도
workers: process.env.CI ? 1 : undefined  // CI에서는 1개만, 로컬에서는 자동 

// 3)프로젝트 setup 설정
project: {
    name: "setup",
    testMatch: /global\.setup\.ts/,    // global.setup.ts 파일만 실행
    timeout: 6 * 60 * 1000,            // 6분 타임아웃 (수동 로그인 고려)
    use: {
        headless: false,                  // 브라우저를 보이게 실행
        ...devices["Desktop Chrome"],     // 데스크탑 Chrome 환경 시뮬레이션
    },
}
// 4.크로니움 설정, e2e-tests
{
    name: "chromium",
    use: {
        ...devices["Desktop Chrome"], 
        storageState: "tests/.auth/admin-auth.json",
        // 저장된 인증 상태를 사용하여 모든 테스트가 로그인된 상태로 시작
},
dependencies: ["setup"],
{
name: "e2e-tests",
testMatch: /.*\.spec\.ts/,         // *.spec.ts 파일만 실행
use: {
    storageState: "tests/.auth/admin-auth.json",  // 저장된 인증 상태 사용
},
dependencies: ["setup"],            // setup이(로그인) 완료된 후 실행
}

// package.json
{
  "scripts": {
    "test:e2e:setup": "playwright test --project=setup",
    "test:e2e": "playwright test"
  }
}

2-1) 로그인 테스트 코드

문서나 다양한 예제에서는 로그인 테스트의 경우는 fill 함수를 이용해 특정 아이디, 비밀번호를 입력해서 로그인 절차를 진행하지만, 장비 관리 시스템 사이트 구글 oauth 로그인 방식을 이용하기 때문에 브라우저를 직접 열어서 로그인하도록 진행하게 되었습니다. 테스트를 하다보니, 브라우저로 로그인 할 때 이메일 입력 후 비밀번호 포커스만 가도 브라우저가 자꾸 닫히게 되어서 context도 추가해주었습니다. 

const adminAuthFile = "tests/.auth/admin-auth.json";

setup("Setup: 관리자 로그인", async ({ page }) => {
// 1. 대시보드 페이지로 이동
await page.goto("/");

// 2. 미들웨어에 의해 로그인 페이지로 리디렉션되었는지 확인
await expect(page).toHaveURL(/\/login/);

// 로그인 페이지가 로드되었는지 확인 (heading "XE 장비 관리 시스템" 또는 로그인 버튼)
const loginButton = page.getByRole("button", { name: /google/i });
await expect(loginButton).toBeVisible({ timeout: 10000 });

// 3. 로그인 시 콜백 핸들러가 쿠키를 읽어 대시보드 페이지(/)로 리디렉션할 때까지 브라우저가 닫히지 않도록 context 이용
const context = page.context();

try {
await page.waitForURL(
(url) => {
try {
const urlString = typeof url === "string" ? url : url.toString();
// localhost:3000 도메인이 아니면 false (Google OAuth 등)
if (!urlString.includes("localhost:3000")) {
return false;
}
const urlObj = new URL(urlString);
const pathname = urlObj.pathname;
return pathname === "/" || pathname === "/dashboard";
} catch {
// URL 파싱 실패 시 false (다른 도메인에 있을 수 있음)
return false;
}
},
{ timeout: 300000 }, // 5분으로 증가
);
} catch {
// 타임아웃 발생 시 페이지 상태 확인
const pages = context.pages();
if (pages.length === 0 || pages[0].isClosed()) {
throw new Error("로그인 중 브라우저가 닫힘.");
}

// 페이지가 살아있으면 현재 URL 확인
const currentPage = pages[0];
const currentUrl = currentPage.url();


if (currentUrl.includes("localhost:3000")) {
const urlObj = new URL(currentUrl);
const pathname = urlObj.pathname;
if (pathname === "/" || pathname === "/dashboard") {
console.log("로그인 완료 (URL 확인됨):", currentUrl);
await currentPage.bringToFront();
} else {
throw new Error(
`로그인 타임아웃: 5분 내에 로그인이 완료 되지 않음. 현재 URL: ${currentUrl}`,
);
}
} else {
throw new Error(
`로그인 타임아웃: 현재 Google OAuth 페이지에 있음... 현재 URL: ${currentUrl}`,
);
}
}

// 4. 최종적으로 대시보드 페이지에 도달했는지 확인
await expect(page.getByRole("heading", { name: "대시보드" })).toBeVisible();

// 5. 현재 페이지의 인증 상태를 파일에 저장
await page.context().storageState({ path: adminAuthFile });

});

2-2) 대시보드 테스트 코드

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

test.describe("대시보드 페이지", () => {
  // 1. 비로그인
  test("비로그인 사용자 - 로그인 페이지로 리다이렉트", async ({ page }) => {
    // storageState 없이 테스트 (비로그인 상태)
    await page.goto("/");

    // 로그인 페이지로 리다이렉트되었는지 확인
    await expect(page).toHaveURL(/\/login/);
    await expect(page.getByRole("heading", { name: /로그인/i })).toBeVisible();
  });

 // 2. 일반 사용자(관리자 X) 
  test("일반 사용자 - 대시보드 화면 정상 노출 (관리자 메뉴 미노출)", async ({
    page,
  }) => {
    // 인증된 상태로 대시보드 접속
    await page.goto("/");

    // 대시보드 제목 확인
    await expect(page.getByRole("heading", { name: "대시보드" })).toBeVisible({
      timeout: 10000,
    });

    // 대시보드 설명 확인
    await expect(
      page.getByText("전체 장비 현황 및 사용자별 장비 할당 정보"),
    ).toBeVisible();

    // 일반 사용자 메뉴는 표시되어야 함
    await expect(page.getByRole("link", { name: "대시보드" })).toBeVisible();
    await expect(page.getByRole("link", { name: "장비 목록" })).toBeVisible();

    // 관리자 메뉴는 표시되지 않아야 함
    // Header에서 관리자 여부를 확인하는 API 호출이 완료될 때까지 대기
    await page.waitForTimeout(2000);

    const adminMenus = ["사용자 관리", "장비 유형 관리", "장비 할당"];

    // 네비게이션 내에서 관리자 메뉴가 없는지 확인
    const navigation = page.locator("nav");
    for (const menuLabel of adminMenus) {
      await expect(
        navigation.getByRole("link", { name: menuLabel }),
      ).not.toBeVisible();
    }
  });

 // 3. 관리자
  test("관리자 - 대시보드 화면 및 관리자 메뉴 노출", async ({ page }) => {
    await page.goto("/");

    // 대시보드 제목 확인
    await expect(page.getByRole("heading", { name: "대시보드" })).toBeVisible({
      timeout: 10000,
    });

    // 대시보드 설명 확인
    await expect(
      page.getByText("전체 장비 현황 및 사용자별 장비 할당 정보"),
    ).toBeVisible();

    // 일반 사용자 메뉴 확인
    await expect(page.getByRole("link", { name: "대시보드" })).toBeVisible();
    await expect(page.getByRole("link", { name: "장비 목록" })).toBeVisible();

    // 관리자 메뉴 확인
    // Header에서 관리자 여부를 확인하는 API 호출이 완료될 때까지 대기
    await page.waitForTimeout(2000);

    const adminMenus = ["사용자 관리", "장비 유형 관리", "장비 할당"];

    // 네비게이션 내에서 관리자 메뉴가 표시되는지 확인
    const navigation = page.locator("nav");
    for (const menuLabel of adminMenus) {
      await expect(
        navigation.getByRole("link", { name: menuLabel }),
      ).toBeVisible();
    }
  });
});