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>
344 lines
No EOL
14 KiB
TypeScript
344 lines
No EOL
14 KiB
TypeScript
/**
|
|
* Help System - Documentation Page E2E Tests
|
|
*
|
|
* Tests the documentation page functionality including:
|
|
* - Page content and structure
|
|
* - Navigation menu functionality
|
|
* - FAQ section
|
|
* - Links and buttons
|
|
*/
|
|
|
|
import { test, expect } from '@playwright/test';
|
|
import { STAGING_URL, PATHS, TIMEOUTS } from './config/staging-config';
|
|
|
|
test.describe('Help System - Documentation Page @help @documentation', () => {
|
|
|
|
test.beforeEach(async ({ page }) => {
|
|
// Login as trainer before each test
|
|
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');
|
|
});
|
|
|
|
test('Documentation page loads and displays correctly', async ({ page }) => {
|
|
console.log('Testing documentation page loading...');
|
|
|
|
// Navigate to documentation page
|
|
await page.goto(`${STAGING_URL}/hvac-documentation/`);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Check page title
|
|
await expect(page.locator('h1')).toContainText('Trainer Documentation');
|
|
|
|
// Check subtitle
|
|
await expect(page.locator('.hvac-doc-subtitle')).toContainText('Everything you need to know about managing your training events');
|
|
|
|
// Check main container
|
|
await expect(page.locator('.hvac-documentation')).toBeVisible();
|
|
|
|
console.log('✓ Documentation page loads correctly');
|
|
await page.screenshot({ path: 'test-results/screenshots/documentation-page.png' });
|
|
});
|
|
|
|
test('Documentation navigation menu works', async ({ page }) => {
|
|
console.log('Testing documentation navigation menu...');
|
|
|
|
await page.goto(`${STAGING_URL}/hvac-documentation/`);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Check navigation menu exists
|
|
await expect(page.locator('.hvac-doc-navigation')).toBeVisible();
|
|
|
|
// Test navigation links
|
|
const navLinks = [
|
|
{ text: 'Getting Started', target: '#getting-started' },
|
|
{ text: 'Managing Events', target: '#managing-events' },
|
|
{ text: 'Attendee Management', target: '#attendee-management' },
|
|
{ text: 'Certificates', target: '#certificates' },
|
|
{ text: 'FAQ', target: '#faq' }
|
|
];
|
|
|
|
for (const link of navLinks) {
|
|
const navLink = page.locator('.hvac-doc-link').filter({ hasText: link.text });
|
|
await expect(navLink).toBeVisible();
|
|
await expect(navLink).toHaveAttribute('href', link.target);
|
|
}
|
|
|
|
console.log('✓ Navigation menu structure is correct');
|
|
});
|
|
|
|
test('Documentation smooth scrolling works', async ({ page }) => {
|
|
console.log('Testing documentation smooth scrolling...');
|
|
|
|
await page.goto(`${STAGING_URL}/hvac-documentation/`);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Click on FAQ link and verify smooth scroll
|
|
const faqLink = page.locator('.hvac-doc-link[href="#faq"]');
|
|
await faqLink.click();
|
|
|
|
// Wait for scroll animation
|
|
await page.waitForTimeout(1000);
|
|
|
|
// Check that FAQ section is in view
|
|
const faqSection = page.locator('#faq');
|
|
await expect(faqSection).toBeInViewport();
|
|
|
|
// Click on Getting Started link
|
|
const gettingStartedLink = page.locator('.hvac-doc-link[href="#getting-started"]');
|
|
await gettingStartedLink.click();
|
|
|
|
await page.waitForTimeout(1000);
|
|
|
|
// Check that Getting Started section is in view
|
|
const gettingStartedSection = page.locator('#getting-started');
|
|
await expect(gettingStartedSection).toBeInViewport();
|
|
|
|
console.log('✓ Smooth scrolling navigation works');
|
|
});
|
|
|
|
test('Getting Started section content is correct', async ({ page }) => {
|
|
console.log('Testing Getting Started section content...');
|
|
|
|
await page.goto(`${STAGING_URL}/hvac-documentation/`);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Check Getting Started section
|
|
const gettingStartedSection = page.locator('#getting-started');
|
|
await expect(gettingStartedSection).toBeVisible();
|
|
|
|
// Check section header
|
|
await expect(gettingStartedSection.locator('h2')).toContainText('Getting Started');
|
|
|
|
// Check for the three main cards
|
|
const cards = [
|
|
{ title: '1. Complete Your Profile', buttonText: 'Edit Profile' },
|
|
{ title: '2. Create Your First Event', buttonText: 'Create Event' },
|
|
{ title: '3. Monitor Your Dashboard', buttonText: 'View Dashboard' }
|
|
];
|
|
|
|
for (const card of cards) {
|
|
const cardElement = gettingStartedSection.locator('.hvac-doc-card').filter({ hasText: card.title });
|
|
await expect(cardElement).toBeVisible();
|
|
await expect(cardElement.locator('h3')).toContainText(card.title);
|
|
|
|
// Check action button
|
|
const button = cardElement.locator('.hvac-doc-btn');
|
|
await expect(button).toContainText(card.buttonText);
|
|
}
|
|
|
|
console.log('✓ Getting Started section content is correct');
|
|
});
|
|
|
|
test('Managing Events section content is correct', async ({ page }) => {
|
|
console.log('Testing Managing Events section content...');
|
|
|
|
await page.goto(`${STAGING_URL}/hvac-documentation/`);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Navigate to Managing Events section
|
|
const managingEventsSection = page.locator('#managing-events');
|
|
await expect(managingEventsSection).toBeVisible();
|
|
|
|
// Check section header with icon
|
|
await expect(managingEventsSection.locator('h2')).toContainText('Managing Events');
|
|
await expect(managingEventsSection.locator('h2 i')).toHaveClass(/fa-calendar-alt/);
|
|
|
|
// Check for key features
|
|
const features = [
|
|
'Event Creation Process',
|
|
'Key Event Features',
|
|
'Event Summary Page'
|
|
];
|
|
|
|
for (const feature of features) {
|
|
const featureElement = managingEventsSection.locator('.hvac-feature').filter({ hasText: feature });
|
|
await expect(featureElement).toBeVisible();
|
|
}
|
|
|
|
// Check event creation process steps
|
|
const processSteps = ['Draft:', 'Review:', 'Published:'];
|
|
for (const step of processSteps) {
|
|
await expect(managingEventsSection).toContainText(step);
|
|
}
|
|
|
|
console.log('✓ Managing Events section content is correct');
|
|
});
|
|
|
|
test('FAQ section content is comprehensive', async ({ page }) => {
|
|
console.log('Testing FAQ section content...');
|
|
|
|
await page.goto(`${STAGING_URL}/hvac-documentation/`);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Navigate to FAQ section
|
|
const faqSection = page.locator('#faq');
|
|
await expect(faqSection).toBeVisible();
|
|
|
|
// Check section header with icon
|
|
await expect(faqSection.locator('h2')).toContainText('Frequently Asked Questions');
|
|
await expect(faqSection.locator('h2 i')).toHaveClass(/fa-question-circle/);
|
|
|
|
// Check for expected FAQ items
|
|
const expectedFAQs = [
|
|
'How do I get paid for my events?',
|
|
'How long does event review take?',
|
|
'Can I modify events after they\'re published?',
|
|
'What if I need to cancel an event?',
|
|
'How do I improve my event visibility?',
|
|
'Can I offer different types of training?',
|
|
'What support is available?'
|
|
];
|
|
|
|
for (const faq of expectedFAQs) {
|
|
const faqItem = faqSection.locator('.hvac-faq-item').filter({ hasText: faq });
|
|
await expect(faqItem).toBeVisible();
|
|
await expect(faqItem.locator('h3')).toContainText(faq);
|
|
}
|
|
|
|
// Check that FAQ answers contain relevant information
|
|
await expect(faqSection).toContainText('100%'); // Revenue info
|
|
await expect(faqSection).toContainText('Stripe'); // Payment processor
|
|
await expect(faqSection).toContainText('1-2 business days'); // Review time
|
|
|
|
console.log('✓ FAQ section content is comprehensive');
|
|
await page.screenshot({ path: 'test-results/screenshots/faq-section.png' });
|
|
});
|
|
|
|
test('Documentation action links work correctly', async ({ page }) => {
|
|
console.log('Testing documentation action links...');
|
|
|
|
await page.goto(`${STAGING_URL}/hvac-documentation/`);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Test Edit Profile link
|
|
const editProfileLink = page.locator('.hvac-doc-btn').filter({ hasText: 'Edit Profile' });
|
|
await expect(editProfileLink).toHaveAttribute('href', '/trainer-profile');
|
|
|
|
// Test Create Event link
|
|
const createEventLink = page.locator('.hvac-doc-btn').filter({ hasText: 'Create Event' });
|
|
await expect(createEventLink).toHaveAttribute('href', '/manage-event');
|
|
|
|
// Test View Dashboard link
|
|
const dashboardLink = page.locator('.hvac-doc-btn').filter({ hasText: 'View Dashboard' });
|
|
await expect(dashboardLink).toHaveAttribute('href', '/hvac-dashboard');
|
|
|
|
console.log('✓ Documentation action links are correct');
|
|
});
|
|
|
|
test('Documentation page is accessible via help buttons', async ({ page }) => {
|
|
console.log('Testing documentation page accessibility via help buttons...');
|
|
|
|
// From dashboard
|
|
await page.goto(PATHS.dashboard);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
const helpButtonDashboard = page.locator('a').filter({ hasText: 'Help' });
|
|
if (await helpButtonDashboard.count() > 0) {
|
|
await expect(helpButtonDashboard).toHaveAttribute('href', '/hvac-documentation/');
|
|
console.log('✓ Help button found on dashboard');
|
|
}
|
|
|
|
// From profile page
|
|
await page.goto(PATHS.profile);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
const helpButtonProfile = page.locator('a').filter({ hasText: 'Help' });
|
|
if (await helpButtonProfile.count() > 0) {
|
|
await expect(helpButtonProfile).toHaveAttribute('href', '/hvac-documentation/');
|
|
console.log('✓ Help button found on profile page');
|
|
}
|
|
|
|
// Test clicking help button actually navigates to documentation
|
|
if (await helpButtonProfile.count() > 0) {
|
|
await helpButtonProfile.click();
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
await expect(page).toHaveURL(/hvac-documentation/);
|
|
await expect(page.locator('h1')).toContainText('Trainer Documentation');
|
|
console.log('✓ Help button navigation works');
|
|
}
|
|
});
|
|
|
|
test('Documentation page responsive design works', async ({ page }) => {
|
|
console.log('Testing documentation page responsive design...');
|
|
|
|
await page.goto(`${STAGING_URL}/hvac-documentation/`);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Test desktop view
|
|
await page.setViewportSize({ width: 1200, height: 800 });
|
|
await expect(page.locator('.hvac-documentation')).toBeVisible();
|
|
|
|
// Test tablet view
|
|
await page.setViewportSize({ width: 768, height: 1024 });
|
|
await expect(page.locator('.hvac-documentation')).toBeVisible();
|
|
|
|
// Test mobile view
|
|
await page.setViewportSize({ width: 375, height: 667 });
|
|
await expect(page.locator('.hvac-documentation')).toBeVisible();
|
|
|
|
// Check that navigation menu adapts
|
|
const navMenu = page.locator('.hvac-doc-nav');
|
|
await expect(navMenu).toBeVisible();
|
|
|
|
console.log('✓ Documentation page responsive design works');
|
|
await page.screenshot({ path: 'test-results/screenshots/documentation-mobile.png' });
|
|
});
|
|
|
|
test('Documentation sections have proper styling', async ({ page }) => {
|
|
console.log('Testing documentation styling...');
|
|
|
|
await page.goto(`${STAGING_URL}/hvac-documentation/`);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Check that all sections have the correct CSS classes
|
|
const sections = ['#getting-started', '#managing-events', '#attendee-management', '#certificates', '#faq'];
|
|
|
|
for (const sectionId of sections) {
|
|
const section = page.locator(sectionId);
|
|
await expect(section).toHaveClass(/hvac-doc-section/);
|
|
|
|
// Check section headers have icons
|
|
const header = section.locator('h2');
|
|
await expect(header).toBeVisible();
|
|
|
|
const icon = header.locator('i');
|
|
if (await icon.count() > 0) {
|
|
await expect(icon).toHaveClass(/fa-/);
|
|
}
|
|
}
|
|
|
|
// Check cards have proper styling
|
|
const docCards = page.locator('.hvac-doc-card');
|
|
const cardCount = await docCards.count();
|
|
expect(cardCount).toBeGreaterThan(0);
|
|
|
|
console.log(`✓ Found ${cardCount} properly styled documentation cards`);
|
|
});
|
|
|
|
test('Documentation content is accurate and helpful', async ({ page }) => {
|
|
console.log('Testing documentation content accuracy...');
|
|
|
|
await page.goto(`${STAGING_URL}/hvac-documentation/`);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Check for key platform information
|
|
await expect(page.getByText('100% of your ticket sales')).toBeVisible();
|
|
await expect(page.getByText('minus standard Stripe processing fees')).toBeVisible();
|
|
await expect(page.getByText('1-2 business days')).toBeVisible(); // Review process time
|
|
|
|
// Check for feature mentions
|
|
await expect(page.getByText('certificates')).toBeVisible();
|
|
await expect(page.getByText('check-in')).toBeVisible();
|
|
await expect(page.getByText('email')).toBeVisible();
|
|
|
|
// Check for proper support information
|
|
await expect(page.getByText('support team')).toBeVisible();
|
|
await expect(page.getByText('documentation')).toBeVisible();
|
|
|
|
console.log('✓ Documentation content is accurate and helpful');
|
|
});
|
|
}); |