56 lines
1.7 KiB
JavaScript
56 lines
1.7 KiB
JavaScript
|
#!/usr/bin/env node
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Quick visual check of info modal on mobile
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { launch } from 'puppeteer';
|
||
|
|
|
||
|
|
const BASE_URL = process.env.CV_TEST_URL || 'http://localhost:1999';
|
||
|
|
|
||
|
|
(async () => {
|
||
|
|
const browser = await launch({ headless: false });
|
||
|
|
const page = await browser.newPage();
|
||
|
|
|
||
|
|
await page.setViewport({
|
||
|
|
width: 375,
|
||
|
|
height: 667,
|
||
|
|
isMobile: true,
|
||
|
|
hasTouch: true
|
||
|
|
});
|
||
|
|
|
||
|
|
await page.goto(`${BASE_URL}?lang=en`, { waitUntil: 'networkidle0' });
|
||
|
|
await page.click('#info-button');
|
||
|
|
await page.waitForSelector('#info-modal[open]', { visible: true });
|
||
|
|
await new Promise(r => setTimeout(r, 500));
|
||
|
|
|
||
|
|
const metrics = await page.evaluate(() => {
|
||
|
|
const get = (sel) => {
|
||
|
|
const el = document.querySelector(sel);
|
||
|
|
return el ? window.getComputedStyle(el).fontSize : null;
|
||
|
|
};
|
||
|
|
return {
|
||
|
|
title: get('.info-modal-header h2'),
|
||
|
|
cvTitle: get('.info-modal-cv-title'),
|
||
|
|
desc: get('.info-modal-description'),
|
||
|
|
tech: get('.info-tech-item span'),
|
||
|
|
btn: get('.info-modal-github')
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log('Mobile Font Sizes:');
|
||
|
|
console.log(' h2 Title:', metrics.title);
|
||
|
|
console.log(' CV Title:', metrics.cvTitle);
|
||
|
|
console.log(' Description:', metrics.desc);
|
||
|
|
console.log(' Tech Items:', metrics.tech);
|
||
|
|
console.log(' GitHub Button:', metrics.btn);
|
||
|
|
console.log('\nKeeping browser open for visual check...');
|
||
|
|
console.log('Press Ctrl+C when done.');
|
||
|
|
|
||
|
|
await page.screenshot({ path: '/Users/txeo/Git/yo/cv/tests/screenshots/modal-mobile-final.png' });
|
||
|
|
console.log('Screenshot saved: tests/screenshots/modal-mobile-final.png');
|
||
|
|
|
||
|
|
// Keep open
|
||
|
|
await new Promise(() => {});
|
||
|
|
})();
|