105 lines
3.7 KiB
TypeScript
105 lines
3.7 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
|
|
test.describe('Test des couleurs bleues', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto('http://localhost:3000');
|
|
});
|
|
|
|
test('Vérifier les couleurs bleues dans la page', async ({ page }) => {
|
|
// Attendre que la page charge
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Capturer tous les éléments avec des couleurs bleues via les classes
|
|
const blueElements = await page.locator('*[class*="blue"]').all();
|
|
|
|
console.log('Nombre d\'éléments avec "blue" dans leur classe:', blueElements.length);
|
|
|
|
// Pour chaque élément avec une classe bleue, capturer les détails
|
|
for (let i = 0; i < Math.min(blueElements.length, 20); i++) {
|
|
const element = blueElements[i];
|
|
const tagName = await element.evaluate(el => el.tagName);
|
|
const className = await element.evaluate(el => el.className);
|
|
const backgroundColor = await element.evaluate(el => window.getComputedStyle(el).backgroundColor);
|
|
const color = await element.evaluate(el => window.getComputedStyle(el).color);
|
|
const textContent = await element.evaluate(el => el.textContent?.substring(0, 50));
|
|
|
|
console.log(`Élément ${i + 1}:`, {
|
|
tagName,
|
|
className: className.substring(0, 100),
|
|
backgroundColor,
|
|
color,
|
|
textContent
|
|
});
|
|
}
|
|
|
|
// Chercher aussi les styles inline bleus
|
|
const elementsWithBlueStyle = await page.locator('*[style*="blue"]').all();
|
|
console.log('Nombre d\'éléments avec style "blue":', elementsWithBlueStyle.length);
|
|
|
|
// Prendre une capture d'écran pour visualisation
|
|
await page.screenshot({ path: 'blue-color-test.png', fullPage: true });
|
|
|
|
// Vérifier spécifiquement les boutons
|
|
const buttons = await page.locator('button').all();
|
|
console.log('Nombre total de boutons:', buttons.length);
|
|
|
|
for (let i = 0; i < Math.min(buttons.length, 10); i++) {
|
|
const button = buttons[i];
|
|
const backgroundColor = await button.evaluate(el => window.getComputedStyle(el).backgroundColor);
|
|
const color = await button.evaluate(el => window.getComputedStyle(el).color);
|
|
const textContent = await button.evaluate(el => el.textContent?.substring(0, 30));
|
|
|
|
if (backgroundColor.includes('blue') || backgroundColor.includes('rgb(37, 99, 235)') ||
|
|
backgroundColor.includes('rgb(29, 78, 216)') || backgroundColor.includes('rgb(59, 130, 246)')) {
|
|
console.log('Bouton bleu trouvé:', {
|
|
backgroundColor,
|
|
color,
|
|
textContent
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
test('Vérifier les variables CSS du thème', async ({ page }) => {
|
|
// Attendre que la page charge
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Récupérer les variables CSS du root
|
|
const cssVars = await page.evaluate(() => {
|
|
const rootStyle = getComputedStyle(document.documentElement);
|
|
const variables: Record<string, string> = {};
|
|
|
|
// Variables de thème principales
|
|
const varNames = [
|
|
'--background',
|
|
'--foreground',
|
|
'--primary',
|
|
'--primary-foreground',
|
|
'--secondary',
|
|
'--accent',
|
|
'--border',
|
|
'--ring'
|
|
];
|
|
|
|
varNames.forEach(varName => {
|
|
variables[varName] = rootStyle.getPropertyValue(varName).trim();
|
|
});
|
|
|
|
return variables;
|
|
});
|
|
|
|
console.log('Variables CSS du thème:', cssVars);
|
|
|
|
// Vérifier si les teintes contiennent des valeurs bleues (220-260)
|
|
for (const [varName, value] of Object.entries(cssVars)) {
|
|
const hueMatch = value.match(/(\d+)\s*\)/);
|
|
if (hueMatch) {
|
|
const hue = parseInt(hueMatch[1]);
|
|
if (hue >= 220 && hue <= 260) {
|
|
console.log(`⚠️ ${varName} contient une teinte bleue: ${value}`);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|