87 lines
2.8 KiB
TypeScript
87 lines
2.8 KiB
TypeScript
/**
|
|
* UI 리디자인 검증 스크립트
|
|
* 1. 로그인 페이지 스크린샷
|
|
* 2. 로그인
|
|
* 3. 대시보드 스크린샷
|
|
* 4. 사이드바 스크린샷
|
|
*/
|
|
|
|
import { chromium } from "playwright";
|
|
import * as path from "path";
|
|
import * as fs from "fs";
|
|
|
|
const BASE_URL = "http://localhost:9771";
|
|
const SCREENSHOT_DIR = path.join(__dirname, "../verification-screenshots");
|
|
|
|
async function main() {
|
|
if (!fs.existsSync(SCREENSHOT_DIR)) {
|
|
fs.mkdirSync(SCREENSHOT_DIR, { recursive: true });
|
|
}
|
|
|
|
const browser = await chromium.launch({ headless: true });
|
|
const context = await browser.newContext({ viewport: { width: 1280, height: 800 } });
|
|
const page = await context.newPage();
|
|
|
|
try {
|
|
// Step 1: 로그인 페이지 접속 및 스크린샷
|
|
console.log("Step 1: 로그인 페이지 접속...");
|
|
await page.goto(`${BASE_URL}/login`, { waitUntil: "commit", timeout: 30000 });
|
|
await page.waitForTimeout(1500);
|
|
await page.screenshot({
|
|
path: path.join(SCREENSHOT_DIR, "01-login-page.png"),
|
|
fullPage: true,
|
|
});
|
|
console.log(" -> 01-login-page.png 저장됨");
|
|
|
|
// Step 2: 로그인
|
|
console.log("Step 2: 로그인...");
|
|
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(3000);
|
|
|
|
const currentUrl = page.url();
|
|
if (currentUrl.includes("/login")) {
|
|
console.log(" -> 로그인 실패, 현재 URL:", currentUrl);
|
|
} else {
|
|
console.log(" -> 로그인 성공, 리다이렉트:", currentUrl);
|
|
|
|
// Step 3: 메인 페이지로 이동 (대시보드)
|
|
if (!currentUrl.includes("/main") && !currentUrl.includes("/admin")) {
|
|
await page.goto(`${BASE_URL}/main`, { waitUntil: "load", timeout: 20000 });
|
|
await page.waitForTimeout(2000);
|
|
}
|
|
|
|
// 대시보드 전체 스크린샷
|
|
await page.screenshot({
|
|
path: path.join(SCREENSHOT_DIR, "02-dashboard.png"),
|
|
fullPage: true,
|
|
});
|
|
console.log(" -> 02-dashboard.png 저장됨");
|
|
|
|
// Step 4: 사이드바 포커스 스크린샷 (좌측 영역)
|
|
const sidebar = page.locator("aside");
|
|
if ((await sidebar.count()) > 0) {
|
|
await sidebar.first().screenshot({
|
|
path: path.join(SCREENSHOT_DIR, "03-sidebar.png"),
|
|
});
|
|
console.log(" -> 03-sidebar.png 저장됨");
|
|
}
|
|
}
|
|
|
|
await browser.close();
|
|
console.log("\n검증 완료. 스크린샷:", SCREENSHOT_DIR);
|
|
} catch (error) {
|
|
console.error("오류:", error);
|
|
await page.screenshot({
|
|
path: path.join(SCREENSHOT_DIR, "error.png"),
|
|
fullPage: true,
|
|
}).catch(() => {});
|
|
await browser.close();
|
|
process.exit(1);
|
|
}
|
|
}
|
|
|
|
main();
|