dea1200efb
- Create modern toast notification system replacing browser alerts - Add mobile-responsive layouts with touch-friendly elements - Implement loading states and progress indicators for all AJAX operations - Add mobile navigation with collapsible menus - Create enhanced form validation with inline error messages - Add accessibility features (keyboard navigation, ARIA labels) - Build comprehensive mobile testing suite - Optimize for 320px to 1024px+ screen sizes - Include progressive enhancement and fallback support 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
326 lines
No EOL
12 KiB
TypeScript
326 lines
No EOL
12 KiB
TypeScript
/**
|
|
* Mobile Responsiveness Test for HVAC Plugin UX Enhancements
|
|
*
|
|
* Simplified mobile testing focusing on key responsiveness features
|
|
*/
|
|
|
|
import { test, expect } from '@playwright/test';
|
|
|
|
const STAGING_URL = 'https://upskill-staging.measurequick.com';
|
|
|
|
// Test responsive breakpoints
|
|
test.describe('Mobile Responsiveness', () => {
|
|
test('Mobile login page layout (iPhone viewport)', async ({ page }) => {
|
|
test.setTimeout(20000);
|
|
|
|
// Set mobile viewport
|
|
await page.setViewportSize({ width: 375, height: 667 });
|
|
|
|
await page.goto(`${STAGING_URL}/community-login`);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Check login form is properly sized for mobile
|
|
const loginForm = page.locator('#hvac_community_loginform');
|
|
await expect(loginForm).toBeVisible();
|
|
|
|
// Verify mobile-optimized form elements
|
|
const usernameField = page.locator('#user_login');
|
|
const passwordField = page.locator('#user_pass');
|
|
const submitButton = page.locator('#wp-submit');
|
|
|
|
await expect(usernameField).toBeVisible();
|
|
await expect(passwordField).toBeVisible();
|
|
await expect(submitButton).toBeVisible();
|
|
|
|
// Check touch target sizes (minimum 44px for iOS)
|
|
const submitBox = await submitButton.boundingBox();
|
|
expect(submitBox?.height).toBeGreaterThanOrEqual(40);
|
|
|
|
// Test form field focus states work on mobile
|
|
await usernameField.focus();
|
|
await passwordField.focus();
|
|
|
|
// Take screenshot for visual verification
|
|
await page.screenshot({ path: `test-results/mobile-login-375x667.png` });
|
|
});
|
|
|
|
test('Mobile dashboard layout and navigation', async ({ page }) => {
|
|
test.setTimeout(30000);
|
|
|
|
// Set mobile viewport
|
|
await page.setViewportSize({ width: 375, height: 667 });
|
|
|
|
// Login first
|
|
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');
|
|
|
|
// Verify we're on dashboard
|
|
await expect(page).toHaveURL(/hvac-dashboard/);
|
|
|
|
// Check dashboard layout adapts to mobile
|
|
const dashboard = page.locator('.hvac-dashboard-wrapper');
|
|
await expect(dashboard).toBeVisible();
|
|
|
|
// Test mobile navigation if present
|
|
const mobileNavToggle = page.locator('.hvac-mobile-nav-toggle');
|
|
if (await mobileNavToggle.isVisible()) {
|
|
await mobileNavToggle.click();
|
|
|
|
const mobileNav = page.locator('.hvac-mobile-nav');
|
|
await expect(mobileNav).toHaveClass(/open/);
|
|
|
|
// Test navigation links work
|
|
const navLinks = page.locator('.hvac-mobile-nav a');
|
|
const navCount = await navLinks.count();
|
|
expect(navCount).toBeGreaterThan(0);
|
|
}
|
|
|
|
// Check stats cards stack properly on mobile
|
|
const statCards = page.locator('.hvac-stat-card');
|
|
const statCount = await statCards.count();
|
|
if (statCount > 0) {
|
|
// Verify cards are visible and properly sized
|
|
for (let i = 0; i < Math.min(statCount, 3); i++) {
|
|
await expect(statCards.nth(i)).toBeVisible();
|
|
}
|
|
}
|
|
|
|
// Test touch scrolling works
|
|
await page.evaluate(() => window.scrollTo(0, 200));
|
|
await page.waitForTimeout(500);
|
|
|
|
// Take screenshot
|
|
await page.screenshot({ path: `test-results/mobile-dashboard-375x667.png` });
|
|
});
|
|
|
|
test('Toast notifications positioning on mobile', 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 certificate reports to trigger potential notifications
|
|
await page.goto(`${STAGING_URL}/certificate-reports`);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Inject test toast to verify mobile positioning
|
|
await page.evaluate(() => {
|
|
// Create toast container if it doesn't exist
|
|
if (!document.querySelector('.hvac-toast-container')) {
|
|
const container = document.createElement('div');
|
|
container.className = 'hvac-toast-container';
|
|
container.style.cssText = `
|
|
position: fixed;
|
|
top: 10px;
|
|
right: 10px;
|
|
left: 10px;
|
|
z-index: 10000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
max-width: none;
|
|
pointer-events: none;
|
|
`;
|
|
document.body.appendChild(container);
|
|
}
|
|
|
|
// Create a test toast
|
|
const toast = document.createElement('div');
|
|
toast.className = 'hvac-toast success show';
|
|
toast.style.cssText = `
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
padding: 16px 20px;
|
|
pointer-events: all;
|
|
transform: translateX(0);
|
|
border-left: 4px solid #10b981;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
max-width: 100%;
|
|
word-wrap: break-word;
|
|
`;
|
|
toast.innerHTML = `
|
|
<div style="width: 20px; height: 20px; color: #10b981; font-weight: bold;">✓</div>
|
|
<div style="flex: 1;">
|
|
<div style="font-weight: 600; font-size: 14px; margin-bottom: 4px;">Success</div>
|
|
<div style="font-size: 13px; color: #6b7280;">Mobile toast notification test - this is a longer message to test wrapping</div>
|
|
</div>
|
|
`;
|
|
|
|
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` });
|
|
});
|
|
}); |