114 lines
4.3 KiB
JavaScript
114 lines
4.3 KiB
JavaScript
/**
|
|
* 리포트 관리 페이지 대시보드 UI 검증
|
|
* - 로그인 후 /admin/screenMng/reportList 접속
|
|
* - 대시보드 카드 표시 방식, 로딩 상태, 레이아웃 확인
|
|
* 실행: node scripts/report-list-dashboard-verify.js
|
|
* 브라우저 표시: HEADLESS=0 node scripts/report-list-dashboard-verify.js
|
|
*/
|
|
const { chromium } = require("playwright");
|
|
const path = require("path");
|
|
|
|
const BASE_URL = "http://localhost:9771";
|
|
const SCREENSHOT_DIR = path.join(__dirname, "../test-screenshots/report-dashboard");
|
|
|
|
async function runVerification() {
|
|
const results = { success: [], failed: [], screenshots: [] };
|
|
const browser = await chromium.launch({
|
|
headless: process.env.HEADLESS !== "0",
|
|
slowMo: 50,
|
|
});
|
|
const context = await browser.newContext({
|
|
viewport: { width: 1440, height: 900 },
|
|
ignoreHTTPSErrors: true,
|
|
});
|
|
const page = await context.newPage();
|
|
|
|
const screenshot = async (name, options = {}) => {
|
|
const fs = require("fs");
|
|
if (!fs.existsSync(SCREENSHOT_DIR)) {
|
|
fs.mkdirSync(SCREENSHOT_DIR, { recursive: true });
|
|
}
|
|
const filePath = path.join(SCREENSHOT_DIR, `${name}.png`);
|
|
await page.screenshot({ path: filePath, fullPage: options.fullPage !== false });
|
|
results.screenshots.push(filePath);
|
|
console.log(` [스크린샷] ${filePath}`);
|
|
return filePath;
|
|
};
|
|
|
|
try {
|
|
console.log("\n=== 1단계: 로그인 ===\n");
|
|
await page.goto(`${BASE_URL}/login`, { waitUntil: "domcontentloaded", timeout: 15000 });
|
|
await page.fill("#userId", "wace");
|
|
await page.fill("#password", "qlalfqjsgh11");
|
|
await page.click('button[type="submit"]');
|
|
await page.waitForURL((url) => !url.pathname.includes("/login"), { timeout: 10000 }).catch(() => {});
|
|
await page.waitForTimeout(2000);
|
|
|
|
console.log("\n=== 2단계: 리포트 목록 페이지 이동 ===\n");
|
|
await page.goto(`${BASE_URL}/admin/screenMng/reportList`, {
|
|
waitUntil: "domcontentloaded",
|
|
timeout: 15000,
|
|
});
|
|
|
|
// 2-1. 로딩 상태 캡처 (페이지 로드 직후 가능한 빠르게)
|
|
await page.waitForTimeout(200);
|
|
await screenshot("01_initial_load", { fullPage: true });
|
|
console.log(" [관찰] 초기 로딩 상태 캡처");
|
|
|
|
// 2-2. 대시보드 카드 영역 대기 후 캡처
|
|
const dashboardSelector =
|
|
'[class*="grid"] [class*="rounded-xl"], .report-page-content [class*="grid-cols"]';
|
|
try {
|
|
await page.waitForSelector(dashboardSelector, { timeout: 8000 });
|
|
console.log(" [관찰] 대시보드 그리드 DOM 감지");
|
|
} catch (e) {
|
|
console.log(" [경고] 대시보드 셀렉터 타임아웃, 계속 진행");
|
|
}
|
|
|
|
await page.waitForTimeout(1500);
|
|
await screenshot("02_dashboard_loaded", { fullPage: true });
|
|
console.log(" [관찰] 로드 완료 후 전체 페이지 캡처");
|
|
|
|
// 2-3. 대시보드 영역만 캡처 (4개 카드)
|
|
const dashboardCards = await page.$$(
|
|
'.report-page-content [class*="grid"] > div[class*="rounded-xl"]'
|
|
);
|
|
console.log(` [관찰] 대시보드 카드 수: ${dashboardCards.length}개`);
|
|
|
|
if (dashboardCards.length > 0) {
|
|
await dashboardCards[0].scrollIntoViewIfNeeded();
|
|
await page.waitForTimeout(300);
|
|
await screenshot("03_dashboard_area_focus", { fullPage: false });
|
|
}
|
|
|
|
// 2-4. 리포트 목록 테이블 영역 확인
|
|
const listSection = await page.$(".report-page-content [class*='overflow-hidden rounded-xl']");
|
|
if (listSection) {
|
|
await listSection.scrollIntoViewIfNeeded();
|
|
await page.waitForTimeout(500);
|
|
await screenshot("04_report_list_section", { fullPage: true });
|
|
}
|
|
|
|
results.success.push("리포트 목록 대시보드 검증 완료");
|
|
} catch (error) {
|
|
console.error("검증 중 오류:", error);
|
|
results.failed.push(error.message);
|
|
await screenshot("99_error_state", { fullPage: true });
|
|
} finally {
|
|
await browser.close();
|
|
}
|
|
|
|
console.log("\n=== 결과 요약 ===\n");
|
|
results.success.forEach((s) => console.log(" [OK]", s));
|
|
results.failed.forEach((s) => console.log(" [FAIL]", s));
|
|
console.log("\n스크린샷 파일:", results.screenshots.join("\n "));
|
|
return results;
|
|
}
|
|
|
|
runVerification()
|
|
.then((r) => process.exit(r.failed.length > 0 ? 1 : 0))
|
|
.catch((e) => {
|
|
console.error(e);
|
|
process.exit(1);
|
|
});
|