88c7b87606
- Add welcome guide modal functionality tests with navigation and dismissal - Add tooltip system tests for hover behavior and positioning - Add documentation page tests for content accuracy and navigation - Add integration tests for complete user journey through help features - Test cookie persistence, accessibility, and cross-page functionality - Verify asset loading and JavaScript initialization 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
341 lines
No EOL
14 KiB
TypeScript
341 lines
No EOL
14 KiB
TypeScript
/**
|
|
* Help System - Welcome Guide E2E Tests
|
|
*
|
|
* Tests the interactive welcome guide modal functionality including:
|
|
* - Modal appearance on first login
|
|
* - Navigation between cards
|
|
* - Cookie-based dismissal
|
|
* - Accessibility features
|
|
*/
|
|
|
|
import { test, expect } from '@playwright/test';
|
|
import { STAGING_URL, PATHS, TIMEOUTS } from './config/staging-config';
|
|
|
|
test.describe('Help System - Welcome Guide @help @welcome-guide', () => {
|
|
|
|
test.beforeEach(async ({ page, context }) => {
|
|
// Clear cookies to ensure fresh state for welcome guide
|
|
await context.clearCookies();
|
|
});
|
|
|
|
test('Welcome guide appears on first dashboard visit', async ({ page }) => {
|
|
console.log('Testing welcome guide appearance on first visit...');
|
|
|
|
// Login as trainer
|
|
await page.goto(PATHS.login);
|
|
await page.fill('#user_login', 'test_trainer');
|
|
await page.fill('#user_pass', 'Test123!');
|
|
await page.click('#wp-submit');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Navigate to dashboard
|
|
await page.goto(PATHS.dashboard);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Wait for welcome modal to appear
|
|
const welcomeModal = page.locator('#hvac-welcome-modal');
|
|
await expect(welcomeModal).toBeVisible({ timeout: TIMEOUTS.standard });
|
|
|
|
// Verify modal header
|
|
await expect(page.locator('.hvac-modal-header h2')).toContainText('Welcome to Upskill HVAC Training Network!');
|
|
|
|
// Verify first card is active
|
|
const firstCard = page.locator('.hvac-welcome-card[data-card="0"]');
|
|
await expect(firstCard).toHaveClass(/active/);
|
|
|
|
// Verify first card content
|
|
await expect(firstCard.locator('h3')).toContainText('Verified Expert Platform');
|
|
await expect(firstCard.locator('p')).toContainText('vetted community');
|
|
|
|
console.log('✓ Welcome guide appears correctly on first visit');
|
|
await page.screenshot({ path: 'test-results/screenshots/welcome-guide-first-card.png' });
|
|
});
|
|
|
|
test('Welcome guide navigation works correctly', async ({ page, context }) => {
|
|
console.log('Testing welcome guide navigation...');
|
|
|
|
// Clear cookies and login
|
|
await context.clearCookies();
|
|
await page.goto(PATHS.login);
|
|
await page.fill('#user_login', 'test_trainer');
|
|
await page.fill('#user_pass', 'Test123!');
|
|
await page.click('#wp-submit');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
await page.goto(PATHS.dashboard);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Wait for modal
|
|
await expect(page.locator('#hvac-welcome-modal')).toBeVisible();
|
|
|
|
// Test Next button navigation
|
|
const nextButton = page.locator('#hvac-next-card');
|
|
await nextButton.click();
|
|
|
|
// Verify second card is active
|
|
const secondCard = page.locator('.hvac-welcome-card[data-card="1"]');
|
|
await expect(secondCard).toHaveClass(/active/);
|
|
await expect(secondCard.locator('h3')).toContainText('Create & Manage Events');
|
|
|
|
// Test indicator navigation
|
|
const thirdIndicator = page.locator('.hvac-indicator[data-card="2"]');
|
|
await thirdIndicator.click();
|
|
|
|
// Verify third card is active
|
|
const thirdCard = page.locator('.hvac-welcome-card[data-card="2"]');
|
|
await expect(thirdCard).toHaveClass(/active/);
|
|
await expect(thirdCard.locator('h3')).toContainText('Keep 100% Revenue');
|
|
|
|
// Test Previous button
|
|
const prevButton = page.locator('#hvac-prev-card');
|
|
await prevButton.click();
|
|
|
|
// Verify second card is active again
|
|
await expect(secondCard).toHaveClass(/active/);
|
|
|
|
// Navigate to last card
|
|
const fourthIndicator = page.locator('.hvac-indicator[data-card="3"]');
|
|
await fourthIndicator.click();
|
|
|
|
// Verify fourth card content
|
|
const fourthCard = page.locator('.hvac-welcome-card[data-card="3"]');
|
|
await expect(fourthCard).toHaveClass(/active/);
|
|
await expect(fourthCard.locator('h3')).toContainText('Professional Certificates');
|
|
|
|
// Verify Next button becomes "Finish" on last card
|
|
await expect(nextButton).toContainText('Finish');
|
|
|
|
console.log('✓ Welcome guide navigation works correctly');
|
|
await page.screenshot({ path: 'test-results/screenshots/welcome-guide-navigation.png' });
|
|
});
|
|
|
|
test('Welcome guide keyboard navigation works', async ({ page, context }) => {
|
|
console.log('Testing welcome guide keyboard navigation...');
|
|
|
|
await context.clearCookies();
|
|
await page.goto(PATHS.login);
|
|
await page.fill('#user_login', 'test_trainer');
|
|
await page.fill('#user_pass', 'Test123!');
|
|
await page.click('#wp-submit');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
await page.goto(PATHS.dashboard);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
await expect(page.locator('#hvac-welcome-modal')).toBeVisible();
|
|
|
|
// Test right arrow key
|
|
await page.keyboard.press('ArrowRight');
|
|
const secondCard = page.locator('.hvac-welcome-card[data-card="1"]');
|
|
await expect(secondCard).toHaveClass(/active/);
|
|
|
|
// Test left arrow key
|
|
await page.keyboard.press('ArrowLeft');
|
|
const firstCard = page.locator('.hvac-welcome-card[data-card="0"]');
|
|
await expect(firstCard).toHaveClass(/active/);
|
|
|
|
console.log('✓ Keyboard navigation works correctly');
|
|
});
|
|
|
|
test('Welcome guide dismissal with "Don\'t show again" works', async ({ page, context }) => {
|
|
console.log('Testing welcome guide permanent dismissal...');
|
|
|
|
await context.clearCookies();
|
|
await page.goto(PATHS.login);
|
|
await page.fill('#user_login', 'test_trainer');
|
|
await page.fill('#user_pass', 'Test123!');
|
|
await page.click('#wp-submit');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
await page.goto(PATHS.dashboard);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
await expect(page.locator('#hvac-welcome-modal')).toBeVisible();
|
|
|
|
// Check "Don't show again" checkbox
|
|
await page.check('#hvac-dont-show-again');
|
|
|
|
// Click "Get Started" button
|
|
await page.click('#hvac-get-started');
|
|
|
|
// Modal should disappear
|
|
await expect(page.locator('#hvac-welcome-modal')).not.toBeVisible();
|
|
|
|
// Refresh page to test cookie persistence
|
|
await page.reload();
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Modal should not appear again
|
|
await expect(page.locator('#hvac-welcome-modal')).not.toBeVisible();
|
|
|
|
console.log('✓ Welcome guide dismissal with cookie works correctly');
|
|
});
|
|
|
|
test('Welcome guide close button works', async ({ page, context }) => {
|
|
console.log('Testing welcome guide close button...');
|
|
|
|
await context.clearCookies();
|
|
await page.goto(PATHS.login);
|
|
await page.fill('#user_login', 'test_trainer');
|
|
await page.fill('#user_pass', 'Test123!');
|
|
await page.click('#wp-submit');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
await page.goto(PATHS.dashboard);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
await expect(page.locator('#hvac-welcome-modal')).toBeVisible();
|
|
|
|
// Click close button
|
|
await page.click('.hvac-modal-close');
|
|
|
|
// Modal should disappear
|
|
await expect(page.locator('#hvac-welcome-modal')).not.toBeVisible();
|
|
|
|
// Refresh page - modal should appear again (not permanently dismissed)
|
|
await page.reload();
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Modal should appear again since we didn't check "don't show again"
|
|
await expect(page.locator('#hvac-welcome-modal')).toBeVisible();
|
|
|
|
console.log('✓ Welcome guide close button works correctly');
|
|
});
|
|
|
|
test('Welcome guide ESC key closes modal', async ({ page, context }) => {
|
|
console.log('Testing welcome guide ESC key functionality...');
|
|
|
|
await context.clearCookies();
|
|
await page.goto(PATHS.login);
|
|
await page.fill('#user_login', 'test_trainer');
|
|
await page.fill('#user_pass', 'Test123!');
|
|
await page.click('#wp-submit');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
await page.goto(PATHS.dashboard);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
await expect(page.locator('#hvac-welcome-modal')).toBeVisible();
|
|
|
|
// Press ESC key
|
|
await page.keyboard.press('Escape');
|
|
|
|
// Modal should disappear
|
|
await expect(page.locator('#hvac-welcome-modal')).not.toBeVisible();
|
|
|
|
console.log('✓ ESC key closes welcome guide correctly');
|
|
});
|
|
|
|
test('Welcome guide only appears on dashboard page', async ({ page, context }) => {
|
|
console.log('Testing welcome guide page-specific behavior...');
|
|
|
|
await context.clearCookies();
|
|
await page.goto(PATHS.login);
|
|
await page.fill('#user_login', 'test_trainer');
|
|
await page.fill('#user_pass', 'Test123!');
|
|
await page.click('#wp-submit');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Visit profile page first
|
|
await page.goto(PATHS.profile);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Modal should not appear on profile page
|
|
await expect(page.locator('#hvac-welcome-modal')).not.toBeVisible();
|
|
|
|
// Now visit dashboard
|
|
await page.goto(PATHS.dashboard);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Modal should appear on dashboard
|
|
await expect(page.locator('#hvac-welcome-modal')).toBeVisible();
|
|
|
|
console.log('✓ Welcome guide appears only on dashboard page');
|
|
});
|
|
|
|
test('Welcome guide has proper accessibility attributes', async ({ page, context }) => {
|
|
console.log('Testing welcome guide accessibility...');
|
|
|
|
await context.clearCookies();
|
|
await page.goto(PATHS.login);
|
|
await page.fill('#user_login', 'test_trainer');
|
|
await page.fill('#user_pass', 'Test123!');
|
|
await page.click('#wp-submit');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
await page.goto(PATHS.dashboard);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
await expect(page.locator('#hvac-welcome-modal')).toBeVisible();
|
|
|
|
// Check close button has aria-label
|
|
await expect(page.locator('.hvac-modal-close')).toHaveAttribute('aria-label', 'Close welcome guide');
|
|
|
|
// Check navigation buttons are properly labeled
|
|
await expect(page.locator('#hvac-prev-card')).toContainText('Previous');
|
|
await expect(page.locator('#hvac-next-card')).toContainText('Next');
|
|
|
|
// Test focus management
|
|
await page.keyboard.press('Tab');
|
|
const focusedElement = await page.locator(':focus').first();
|
|
|
|
console.log('✓ Welcome guide has proper accessibility features');
|
|
});
|
|
|
|
test('Welcome guide cards contain expected content', async ({ page, context }) => {
|
|
console.log('Testing welcome guide content accuracy...');
|
|
|
|
await context.clearCookies();
|
|
await page.goto(PATHS.login);
|
|
await page.fill('#user_login', 'test_trainer');
|
|
await page.fill('#user_pass', 'Test123!');
|
|
await page.click('#wp-submit');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
await page.goto(PATHS.dashboard);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
await expect(page.locator('#hvac-welcome-modal')).toBeVisible();
|
|
|
|
// Test all four cards
|
|
const expectedCards = [
|
|
{
|
|
title: 'Verified Expert Platform',
|
|
keywords: ['vetted', 'community', 'screening']
|
|
},
|
|
{
|
|
title: 'Create & Manage Events',
|
|
keywords: ['create', 'events', 'pricing', 'reviewed']
|
|
},
|
|
{
|
|
title: 'Keep 100% Revenue',
|
|
keywords: ['100%', 'ticket', 'sales', 'Stripe']
|
|
},
|
|
{
|
|
title: 'Professional Certificates',
|
|
keywords: ['certificates', 'completion', 'professional']
|
|
}
|
|
];
|
|
|
|
for (let i = 0; i < expectedCards.length; i++) {
|
|
// Navigate to card
|
|
const indicator = page.locator(`.hvac-indicator[data-card="${i}"]`);
|
|
await indicator.click();
|
|
|
|
const card = page.locator(`.hvac-welcome-card[data-card="${i}"]`);
|
|
await expect(card).toHaveClass(/active/);
|
|
|
|
// Check title
|
|
await expect(card.locator('h3')).toContainText(expectedCards[i].title);
|
|
|
|
// Check that description contains expected keywords
|
|
const description = card.locator('p');
|
|
for (const keyword of expectedCards[i].keywords) {
|
|
await expect(description).toContainText(keyword);
|
|
}
|
|
}
|
|
|
|
console.log('✓ All welcome guide cards contain expected content');
|
|
await page.screenshot({ path: 'test-results/screenshots/welcome-guide-content-check.png' });
|
|
});
|
|
}); |