99 lines
3.0 KiB
JavaScript
99 lines
3.0 KiB
JavaScript
|
#!/usr/bin/env bun
|
|||
|
|
/**
|
|||
|
|
* ALL ICONS COMPREHENSIVE TEST
|
|||
|
|
* Check ALL icon types for consistent size and transparent backgrounds
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
import { chromium } from "playwright";
|
|||
|
|
|
|||
|
|
const URL = "http://localhost:1999";
|
|||
|
|
|
|||
|
|
async function testAllIcons() {
|
|||
|
|
console.log("🧪 ALL ICONS COMPREHENSIVE TEST\n");
|
|||
|
|
console.log("=".repeat(70));
|
|||
|
|
|
|||
|
|
const browser = await chromium.launch({ headless: false });
|
|||
|
|
const page = await browser.newPage({ viewport: { width: 1400, height: 1080 } });
|
|||
|
|
|
|||
|
|
await page.goto(URL);
|
|||
|
|
await page.waitForTimeout(2000);
|
|||
|
|
|
|||
|
|
console.log("\n📋 Checking ALL icon types:\n");
|
|||
|
|
|
|||
|
|
const iconData = await page.evaluate(() => {
|
|||
|
|
const selectors = [
|
|||
|
|
{ name: 'Company Logos', selector: '.company-logo img' },
|
|||
|
|
{ name: 'Award Logos', selector: '.award-logo img' },
|
|||
|
|
{ name: 'Project Icons', selector: '.project-icon img' },
|
|||
|
|
{ name: 'Course Icons', selector: '.course-icon img' },
|
|||
|
|
{ name: 'Default Company', selector: '.default-company-icon' },
|
|||
|
|
{ name: 'Default Award', selector: '.default-award-icon' },
|
|||
|
|
{ name: 'Default Project', selector: '.default-project-icon' },
|
|||
|
|
{ name: 'Default Course', selector: '.default-course-icon' }
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const results = [];
|
|||
|
|
|
|||
|
|
selectors.forEach(({ name, selector }) => {
|
|||
|
|
const elements = document.querySelectorAll(selector);
|
|||
|
|
const samples = [];
|
|||
|
|
|
|||
|
|
elements.forEach((el, i) => {
|
|||
|
|
if (i < 3) { // Check first 3 of each type
|
|||
|
|
const style = window.getComputedStyle(el);
|
|||
|
|
samples.push({
|
|||
|
|
index: i + 1,
|
|||
|
|
width: style.width,
|
|||
|
|
height: style.height,
|
|||
|
|
background: style.backgroundColor,
|
|||
|
|
opacity: style.opacity
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
results.push({
|
|||
|
|
type: name,
|
|||
|
|
count: elements.length,
|
|||
|
|
samples
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return results;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
iconData.forEach(({ type, count, samples }) => {
|
|||
|
|
console.log(`\n${type}:`);
|
|||
|
|
console.log(` Total found: ${count}`);
|
|||
|
|
|
|||
|
|
samples.forEach(sample => {
|
|||
|
|
console.log(` #${sample.index}: ${sample.width} × ${sample.height}, bg: ${sample.background}, opacity: ${sample.opacity}`);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Check consistency
|
|||
|
|
if (samples.length > 0) {
|
|||
|
|
const uniqueSizes = new Set(samples.map(s => `${s.width}×${s.height}`));
|
|||
|
|
const uniqueBgs = new Set(samples.map(s => s.background));
|
|||
|
|
|
|||
|
|
if (uniqueSizes.size === 1) {
|
|||
|
|
console.log(` ✅ Consistent size: ${Array.from(uniqueSizes)[0]}`);
|
|||
|
|
} else {
|
|||
|
|
console.log(` ❌ INCONSISTENT sizes: ${Array.from(uniqueSizes).join(', ')}`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const bg = Array.from(uniqueBgs)[0];
|
|||
|
|
if (bg.includes('rgba(0, 0, 0, 0)') || bg === 'transparent') {
|
|||
|
|
console.log(` ✅ Transparent background`);
|
|||
|
|
} else {
|
|||
|
|
console.log(` ⚠️ Background: ${bg}`);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log("\n" + "=".repeat(70));
|
|||
|
|
console.log("\nBrowser will stay open for 30 seconds for visual inspection...");
|
|||
|
|
await page.waitForTimeout(30000);
|
|||
|
|
await browser.close();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
await testAllIcons();
|