88 lines
3.0 KiB
JavaScript
88 lines
3.0 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 Final 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...');
|
||
|
|
await shortcutsBtn.click();
|
||
|
|
await page.waitForTimeout(500);
|
||
|
|
|
||
|
|
// Check section header colors (should be ORANGE)
|
||
|
|
console.log('\n✅ Section Headers (should be ORANGE):');
|
||
|
|
const sectionTitleColor = 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:', sectionTitleColor.color);
|
||
|
|
console.log(' Border color:', sectionTitleColor.borderColor);
|
||
|
|
|
||
|
|
const sectionIconColor = await page.locator('.shortcuts-section-title iconify-icon').first().evaluate(el => {
|
||
|
|
const styles = window.getComputedStyle(el);
|
||
|
|
return styles.color;
|
||
|
|
});
|
||
|
|
console.log(' Icon color:', sectionIconColor);
|
||
|
|
|
||
|
|
// Check kbd element colors (should be BLUE)
|
||
|
|
console.log('\n✅ Keyboard Keys (should be BLUE):');
|
||
|
|
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, 'final-colors-modal.png'), fullPage: true });
|
||
|
|
|
||
|
|
console.log('\n🎯 Final Color Scheme Summary:');
|
||
|
|
console.log(' ✓ Section headers: ORANGE (#f39c12)');
|
||
|
|
console.log(' ✓ Section icons: ORANGE (#f39c12)');
|
||
|
|
console.log(' ✓ Section borders: Light orange');
|
||
|
|
console.log(' ✓ Keyboard keys (kbd): BLUE (#3498db)');
|
||
|
|
console.log(' ✓ kbd backgrounds: Light blue');
|
||
|
|
console.log(' ✓ kbd borders: Blue');
|
||
|
|
|
||
|
|
console.log('\n📁 Screenshot saved to: test-screenshots/final-colors-modal.png');
|
||
|
|
|
||
|
|
await page.waitForTimeout(5000);
|
||
|
|
await browser.close();
|
||
|
|
})();
|