Success
Mobile toast notification test - this is a longer message to test wrapping
`;
const container = document.querySelector('.hvac-toast-container');
if (container) {
container.appendChild(toast);
}
});
await page.waitForTimeout(1000);
// Check if toast is visible and properly positioned
const toast = page.locator('.hvac-toast');
await expect(toast).toBeVisible();
// Verify toast doesn't overflow viewport
const toastBox = await toast.boundingBox();
const viewport = page.viewportSize();
if (toastBox && viewport) {
expect(toastBox.x + toastBox.width).toBeLessThanOrEqual(viewport.width);
expect(toastBox.y).toBeGreaterThanOrEqual(0);
}
// Take screenshot
await page.screenshot({ path: `test-results/mobile-toast-375x667.png` });
});
test('Form interaction on mobile devices', async ({ page }) => {
test.setTimeout(25000);
// Set mobile viewport
await page.setViewportSize({ width: 375, height: 667 });
// Login
await page.goto(`${STAGING_URL}/community-login`);
await page.fill('#user_login', 'test_trainer');
await page.fill('#user_pass', 'Test123!');
await page.click('#wp-submit');
await page.waitForLoadState('networkidle');
// Go to create event page to test forms
await page.goto(`${STAGING_URL}/manage-event`);
await page.waitForLoadState('networkidle');
// Test form field interactions
const titleField = page.locator('#event_title');
if (await titleField.isVisible()) {
// Check field is properly sized for mobile
const fieldBox = await titleField.boundingBox();
expect(fieldBox?.height).toBeGreaterThanOrEqual(40);
// Test touch interaction
await titleField.tap();
await titleField.fill('Mobile Test Event');
const value = await titleField.inputValue();
expect(value).toBe('Mobile Test Event');
}
// Check form buttons are touch-friendly
const buttons = page.locator('button, input[type="submit"]');
const buttonCount = await buttons.count();
if (buttonCount > 0) {
const button = buttons.first();
if (await button.isVisible()) {
const buttonBox = await button.boundingBox();
expect(buttonBox?.height).toBeGreaterThanOrEqual(40);
}
}
// Take screenshot
await page.screenshot({ path: `test-results/mobile-form-375x667.png` });
});
test('Responsive breakpoints verification', async ({ page }) => {
test.setTimeout(35000);
const breakpoints = [
{ name: 'Mobile-Small', width: 320, height: 568 },
{ name: 'Mobile-Medium', width: 375, height: 667 },
{ name: 'Tablet-Portrait', width: 768, height: 1024 },
];
for (const breakpoint of breakpoints) {
// Set viewport
await page.setViewportSize({ width: breakpoint.width, height: breakpoint.height });
// Login
await page.goto(`${STAGING_URL}/community-login`);
await page.fill('#user_login', 'test_trainer');
await page.fill('#user_pass', 'Test123!');
await page.click('#wp-submit');
await page.waitForLoadState('networkidle');
// Check dashboard layout
await expect(page).toHaveURL(/hvac-dashboard/);
// Verify content is visible and accessible
const mainContent = page.locator('.hvac-dashboard-wrapper, .entry-content');
await expect(mainContent).toBeVisible();
// Check navigation is appropriate for screen size
if (breakpoint.width <= 767) {
// Mobile: navigation should adapt
const nav = page.locator('.hvac-dashboard-nav');
await expect(nav).toBeVisible();
} else {
// Tablet/Desktop: should see regular nav
const desktopNav = page.locator('.hvac-dashboard-nav');
await expect(desktopNav).toBeVisible();
}
// Take screenshot
await page.screenshot({
path: `test-results/responsive-${breakpoint.name}-${breakpoint.width}x${breakpoint.height}.png`,
fullPage: false
});
console.log(`✓ Verified ${breakpoint.name} (${breakpoint.width}x${breakpoint.height})`);
}
});
test('UX enhancements load correctly', async ({ page }) => {
test.setTimeout(20000);
// Set mobile viewport
await page.setViewportSize({ width: 375, height: 667 });
// Login
await page.goto(`${STAGING_URL}/community-login`);
await page.fill('#user_login', 'test_trainer');
await page.fill('#user_pass', 'Test123!');
await page.click('#wp-submit');
await page.waitForLoadState('networkidle');
// Check that UX enhancement assets are loaded
const uxEnhancementsLoaded = await page.evaluate(() => {
// Check if HVACToast is available
const hasToast = typeof window.HVACToast !== 'undefined';
// Check if UX CSS is loaded by looking for specific classes
const uxStyles = Array.from(document.styleSheets).some(sheet => {
try {
return Array.from(sheet.cssRules).some(rule =>
rule.selectorText && rule.selectorText.includes('hvac-toast')
);
} catch (e) {
return false;
}
});
return {
hasToast,
uxStyles,
mobileNav: !!document.querySelector('.hvac-mobile-nav-container, .hvac-mobile-nav-toggle')
};
});
console.log('UX Enhancements status:', uxEnhancementsLoaded);
// At minimum, some UX elements should be present
expect(uxEnhancementsLoaded.hasToast || uxEnhancementsLoaded.uxStyles).toBe(true);
await page.screenshot({ path: `test-results/ux-enhancements-loaded.png` });
});
});