juanatsap
97 lines
3.5 KiB
JavaScript
97 lines
3.5 KiB
JavaScript
import { chromium } from '@playwright/test';
|
|
import { fileURLToPath } from 'url';
|
|
import { dirname, join } from 'path';
|
|
import fs from 'fs';
|
|
|
|
const __filename = fileURLToPath(import.meta.url);
|
|
const __dirname = dirname(__filename);
|
|
const screenshotsDir = join(__dirname, 'test-screenshots');
|
|
|
|
if (!fs.existsSync(screenshotsDir)) {
|
|
fs.mkdirSync(screenshotsDir);
|
|
}
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch({ headless: false });
|
|
const context = await browser.newContext({
|
|
viewport: { width: 1920, height: 1080 }
|
|
});
|
|
const page = await context.newPage();
|
|
|
|
console.log('🎨 Testing Refined Color Scheme...\n');
|
|
|
|
await page.goto('http://localhost:1999');
|
|
await page.waitForLoadState('networkidle');
|
|
await page.waitForTimeout(1000);
|
|
|
|
// Clear storage
|
|
await page.evaluate(() => localStorage.clear());
|
|
await page.reload();
|
|
await page.waitForLoadState('networkidle');
|
|
await page.waitForTimeout(500);
|
|
|
|
const shortcutsBtn = page.locator('#shortcuts-button');
|
|
|
|
// Open shortcuts modal
|
|
console.log('📸 Opening shortcuts modal...\n');
|
|
await shortcutsBtn.click();
|
|
await page.waitForTimeout(500);
|
|
|
|
// Check subtitle color (should be ORANGE)
|
|
console.log('✅ Modal Subtitle (should be ORANGE #f39c12):');
|
|
const subtitleColor = await page.locator('#shortcuts-modal .info-modal-cv-title').evaluate(el => {
|
|
const styles = window.getComputedStyle(el);
|
|
return styles.color;
|
|
});
|
|
console.log(' Color:', subtitleColor);
|
|
|
|
// Check section header text color (should be #827a6e)
|
|
console.log('\n✅ Section Header Text (should be #827a6e - brownish-gray):');
|
|
const headerTextColor = await page.locator('.shortcuts-section-title').first().evaluate(el => {
|
|
const styles = window.getComputedStyle(el);
|
|
return {
|
|
color: styles.color,
|
|
borderColor: styles.borderBottomColor
|
|
};
|
|
});
|
|
console.log(' Text color:', headerTextColor.color);
|
|
console.log(' Border color:', headerTextColor.borderColor);
|
|
|
|
// Check section header icon color (should be ORANGE)
|
|
console.log('\n✅ Section Header Icons (should be ORANGE #f39c12):');
|
|
const headerIconColor = await page.locator('.shortcuts-section-title iconify-icon').first().evaluate(el => {
|
|
const styles = window.getComputedStyle(el);
|
|
return styles.color;
|
|
});
|
|
console.log(' Icon color:', headerIconColor);
|
|
|
|
// Check kbd element colors (should be BLUE)
|
|
console.log('\n✅ Keyboard Keys (should be BLUE #3498db):');
|
|
const kbdStyles = await page.locator('.shortcut-keys kbd').first().evaluate(el => {
|
|
const styles = window.getComputedStyle(el);
|
|
return {
|
|
color: styles.color,
|
|
background: styles.backgroundColor,
|
|
borderColor: styles.borderColor
|
|
};
|
|
});
|
|
console.log(' Text color:', kbdStyles.color);
|
|
console.log(' Background:', kbdStyles.background);
|
|
console.log(' Border color:', kbdStyles.borderColor);
|
|
|
|
// Take screenshot
|
|
await page.screenshot({ path: join(screenshotsDir, 'refined-colors-modal.png'), fullPage: true });
|
|
|
|
console.log('\n🎯 Refined Color Scheme Summary:');
|
|
console.log(' ✓ Modal subtitle "Learn the Shortcuts": ORANGE (#f39c12)');
|
|
console.log(' ✓ Section header text: Brownish-gray (#827a6e)');
|
|
console.log(' ✓ Section header icons: ORANGE (#f39c12)');
|
|
console.log(' ✓ Section borders: Light brownish-gray');
|
|
console.log(' ✓ Keyboard keys (kbd): BLUE (#3498db)');
|
|
|
|
console.log('\n📁 Screenshot saved to: test-screenshots/refined-colors-modal.png');
|
|
|
|
await page.waitForTimeout(5000);
|
|
await browser.close();
|
|
})();
|