Files
kokken/tests/debug-calendar.spec.ts
Alex Polo 570c41f465 Add comprehensive Playwright tests for calendar functionality
- Implemented tests for debugging browser cache vs server response.
- Verified calendar displays correct dates for November 2025.
- Added visual inspection screenshot for calendar layout.
- Created tests to ensure calendar fits within its container.
- Checked for correct styling of available and blocked dates.
- Debugged login form behavior and cookie handling.
- Added tests for forced browser refresh and cache verification.
- Conducted visual tests to compare actual calendar layout with expected.
- Enhanced logging for better traceability during test execution.
2025-11-07 14:09:22 +01:00

41 lines
1.5 KiB
TypeScript

import { test } from '@playwright/test';
test('Debug calendar DOM structure', async ({ page }) => {
// Set basic auth header
await page.setExtraHTTPHeaders({
'Authorization': 'Basic ' + Buffer.from('brotha:makefood1').toString('base64')
});
await page.goto('http://localhost:3000/admin/availability');
await page.waitForSelector('.cook-calendar');
// Log all classes i kalenderen
const calendarHTML = await page.locator('.cook-calendar').innerHTML();
console.log('Calendar HTML structure:');
console.log(calendarHTML.slice(0, 1000) + '...');
// Find alle elements med rdp classes
const rdpElements = await page.locator('[class*="rdp"]').all();
console.log(`Found ${rdpElements.length} elements with rdp classes`);
for (let i = 0; i < Math.min(10, rdpElements.length); i++) {
const className = await rdpElements[i].getAttribute('class');
const tagName = await rdpElements[i].evaluate(el => el.tagName);
console.log(`${i}: ${tagName}.${className}`);
}
// Tjek computed styles på nogle elements
const dayElements = await page.locator('.cook-calendar [class*="day"]').all();
console.log(`Found ${dayElements.length} day elements`);
if (dayElements.length > 0) {
const firstDayStyle = await dayElements[0].evaluate((el) => {
const computed = window.getComputedStyle(el);
return {
backgroundColor: computed.backgroundColor,
className: el.className
};
});
console.log('First day style:', firstDayStyle);
}
});