zellyy-finance/test-vercel-deployment.cjs

const { chromium } = require("playwright");

async function testVercelDeployment() {
  console.log("🚀 Vercel 배포 상태 테스트 시작");

  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage();

  try {
    console.log("📡 https://zellyy-finance.vercel.app/ 접속 중...");

    // 페이지 로드 시간 측정
    const startTime = Date.now();

    // 페이지 로드 - 30초 타임아웃 설정
    await page.goto("https://zellyy-finance.vercel.app/", {
      waitUntil: "networkidle",
      timeout: 30000,
    });

    const loadTime = Date.now() - startTime;
    console.log(`⏱️ 페이지 로드 시간: ${loadTime}ms`);

    // 페이지 내용 확인
    const title = await page.title();
    console.log(`📄 페이지 제목: "${title}"`);

    // HTML 내용 확인
    const htmlContent = await page.content();
    console.log(`📝 HTML 길이: ${htmlContent.length} 문자`);

    // BasicApp 관련 요소 확인
    const hasBasicApp =
      htmlContent.includes("BasicApp") ||
      htmlContent.includes("Zellyy Finance - 기본 테스트");
    console.log(
      `🔍 BasicApp 컨텐츠 감지: ${hasBasicApp ? "✅ 찾음" : "❌ 없음"}`
    );

    // React 앱이 렌더링되었는지 확인
    const hasReactContent =
      htmlContent.includes("React 앱이 정상적으로") ||
      htmlContent.includes("환경 정보");
    console.log(
      `⚛️ React 컨텐츠 감지: ${hasReactContent ? "✅ 찾음" : "❌ 없음"}`
    );

    // 에러 요소 확인
    const errorElements = await page.$$('[class*="error"], [id*="error"]');
    console.log(`🚨 에러 요소 수: ${errorElements.length}`);

    // 콘솔 메시지 확인
    const consoleLogs = [];
    page.on("console", (msg) => {
      consoleLogs.push(`${msg.type()}: ${msg.text()}`);
    });

    // 페이지를 다시 로드해서 콘솔 메시지 캡처
    await page.reload({ waitUntil: "networkidle" });

    console.log("\n📊 콘솔 메시지:");
    consoleLogs.forEach((log) => console.log(`  ${log}`));

    // 스크린샷 찍기
    await page.screenshot({
      path: "vercel-deployment-test.png",
      fullPage: true,
    });
    console.log("📸 스크린샷 저장: vercel-deployment-test.png");

    // DOM 내용 간단히 확인
    const bodyText = await page.locator("body").textContent();
    console.log(`\n📋 페이지 내용 미리보기 (첫 200자):`);
    console.log(bodyText.substring(0, 200) + "...");

    // 환경 변수 정보 확인 (페이지에 표시되는 경우)
    const hasEnvInfo =
      bodyText.includes("환경:") || bodyText.includes("Clerk Key:");
    console.log(`🔧 환경 정보 표시: ${hasEnvInfo ? "✅ 있음" : "❌ 없음"}`);
  } catch (error) {
    console.error("❌ 테스트 중 오류 발생:", error.message);

    // 네트워크 오류인지 확인
    if (error.message.includes("net::") || error.message.includes("TIMEOUT")) {
      console.log("🌐 네트워크 연결 문제로 보입니다.");
    }

    // 스크린샷 찍기 (오류 상황)
    try {
      await page.screenshot({
        path: "vercel-deployment-error.png",
        fullPage: true,
      });
      console.log("📸 오류 스크린샷 저장: vercel-deployment-error.png");
    } catch (screenshotError) {
      console.log("📸 스크린샷 저장 실패");
    }
  } finally {
    await browser.close();
    console.log("🏁 테스트 완료");
  }
}

// 테스트 실행
testVercelDeployment().catch(console.error);