108 lines
3.7 KiB
TypeScript
108 lines
3.7 KiB
TypeScript
import { chromium, test, expect } from '@playwright/test';
|
|
|
|
const THEME = {
|
|
brand: '#c20600',
|
|
bgPrimary: '#0a0a0a',
|
|
bgSecondary: '#121212',
|
|
bgTertiary: '#1a1a1a',
|
|
bgElevated: '#202020',
|
|
textPrimary: '#d4d4d4',
|
|
textSecondary: '#a3a3a3',
|
|
textMuted: '#737373',
|
|
borderSubtle: '#1a1a1a',
|
|
borderDefault: '#2a2a2a',
|
|
borderHighlight: '#3a3a3a',
|
|
};
|
|
|
|
function rgbToHex(rgb: string): string {
|
|
const match = rgb.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
|
|
if (!match) return rgb;
|
|
const [, r, g, b] = match.map(Number);
|
|
return `#${[r, g, b].map((x) => x.toString(16).padStart(2, '0')).join('')}`;
|
|
}
|
|
|
|
test.describe('Theme Colors', () => {
|
|
test('header should have correct border color', async ({ page }) => {
|
|
await page.goto('https://code-dev.g4dge7.com:5174/');
|
|
await page.waitForLoadState('networkidle');
|
|
await page.waitForTimeout(2000);
|
|
|
|
const header = page.locator('header').first();
|
|
await expect(header).toBeVisible();
|
|
|
|
const borderColor = await header.evaluate((el) => {
|
|
return window.getComputedStyle(el).borderBottomColor;
|
|
});
|
|
|
|
const actualHex = rgbToHex(borderColor);
|
|
const expectedHex = THEME.borderSubtle;
|
|
|
|
console.log('Header border-bottom-color:', actualHex, '(expected:', expectedHex, ')');
|
|
expect(actualHex.toLowerCase()).toBe(expectedHex);
|
|
});
|
|
|
|
test('body should have correct background color', async ({ page }) => {
|
|
await page.goto('https://code-dev.g4dge7.com:5174/');
|
|
await page.waitForLoadState('networkidle');
|
|
await page.waitForTimeout(2000);
|
|
|
|
const bgColor = await page.evaluate(() => {
|
|
return window.getComputedStyle(document.body).backgroundColor;
|
|
});
|
|
|
|
const actualHex = rgbToHex(bgColor);
|
|
const expectedHex = THEME.bgPrimary;
|
|
|
|
console.log('Body background-color:', actualHex, '(expected:', expectedHex, ')');
|
|
expect(actualHex.toLowerCase()).toBe(expectedHex);
|
|
});
|
|
|
|
test('header text should have correct color', async ({ page }) => {
|
|
await page.goto('https://code-dev.g4dge7.com:5174/');
|
|
await page.waitForLoadState('networkidle');
|
|
await page.waitForTimeout(2000);
|
|
|
|
const header = page.locator('header').first();
|
|
const link = header.locator('a').first();
|
|
|
|
const color = await link.evaluate((el) => {
|
|
return window.getComputedStyle(el).color;
|
|
});
|
|
|
|
const actualHex = rgbToHex(color);
|
|
const expectedHex = THEME.textPrimary;
|
|
|
|
console.log('Header link color:', actualHex, '(expected:', expectedHex, ')');
|
|
expect(actualHex.toLowerCase()).toBe(expectedHex);
|
|
});
|
|
|
|
test('all theme colors should match spec', async ({ page }) => {
|
|
await page.goto('https://code-dev.g4dge7.com:5174/');
|
|
await page.waitForLoadState('networkidle');
|
|
await page.waitForTimeout(2000);
|
|
|
|
const results: string[] = [];
|
|
|
|
const header = page.locator('header').first();
|
|
const headerBorder = await header.evaluate((el) => {
|
|
const c = window.getComputedStyle(el).borderBottomColor;
|
|
const m = c.match(/rgb\((\d+),\s*(\d+),\s*(\d+)/);
|
|
if (!m) return c;
|
|
return '#' + [m[1], m[2], m[3]].map(x => parseInt(x).toString(16).padStart(2, '0')).join('');
|
|
});
|
|
results.push(`header border: ${headerBorder}`);
|
|
|
|
const bodyBg = await page.evaluate(() => {
|
|
const c = window.getComputedStyle(document.body).backgroundColor;
|
|
const m = c.match(/rgb\((\d+),\s*(\d+),\s*(\d+)/);
|
|
if (!m) return c;
|
|
return '#' + [m[1], m[2], m[3]].map(x => parseInt(x).toString(16).padStart(2, '0')).join('');
|
|
});
|
|
results.push(`body bg: ${bodyBg}`);
|
|
|
|
console.log('Theme verification:', results.join(', '));
|
|
|
|
expect(headerBorder.toLowerCase()).toBe(THEME.borderSubtle);
|
|
expect(bodyBg.toLowerCase()).toBe(THEME.bgPrimary);
|
|
});
|
|
}); |