# Help Center Test Hints

## Overview
This file contains specific patterns and selectors for testing the Help Center functionality in Halo QA. Tests should follow REG-21 through REG-23 patterns for consistency.

## Test Structure
```typescript
// Required timeout for all help center tests
test.setTimeout(10 * 60 * 1000);

// Test naming pattern
test('@help-center REG-2X: Test description', async ({ page, context }) => {
  // Note: Include context parameter when testing new tab navigation
});

// Required imports
import { test, expect } from '@playwright/test';
import { LoginPage } from '../../../../pages/login.page';
import { DashboardMainPage } from '../../../../pages/dashboard-main.page';
import * as dotenv from 'dotenv';

// Environment setup
dotenv.config();
const testEmail = process.env.TEST_EMAIL || 'cdp@hy.ly';
const testPassword = process.env.TEST_PASSWORD || 'BMy2L1rRXZlkKoTU7';
```

## Help Center Structure

### Test Cases
1. **Access Help Center (REG-21)**
   - Verifies help center accessibility
   - Tests launcher button visibility
   - Confirms widget opens/closes properly

2. **Navigate Help Items (REG-22)**
   - Tests navigation between help items
   - Verifies items open in new tabs
   - Checks link functionality

3. **Submit Bug Report (REG-23)**
   - Tests bug report form submission
   - Validates form fields and validation
   - Confirms successful submission

### Main Components
The Help Center is a widget-based system with the following key elements:

1. **Launcher Button** (`.button-launcher`)
   - Bottom-right corner of the screen
   - Always visible after dashboard loads
   - Position: typically left > 1000px

2. **Help Center Widget** (`.modern-widget.pfruits-button-popup`)
   - Opens when launcher button is clicked
   - Contains sections for help items
   - Can be closed and reopened

3. **Home Section** (`.section-home`)
   - Main content area of help center
   - Contains help items organized in a list

4. **Help Items** (`.boxed-home-item`)
   - Individual help resources
   - Types: `.home-item-link` (links) and `.home-item-article` (articles)
   - Typically 4-5 items available

## Key Selectors

### Primary Selectors
```typescript
// Help Center launcher button
const helpCenterButton = page.locator('.button-launcher').first();

// Help Center widget/popup
const helpCenterWidget = page.locator('.modern-widget.pfruits-button-popup').first();

// Home section
const homeSection = page.locator('.section-home').first();

// Home items container
const homeItemsContainer = page.locator('.home-items');

// Individual help items
const homeItems = page.locator('.boxed-home-item');

// Help item links
const linkItems = page.locator('.boxed-home-item.home-item-link');

// Help item articles
const articleItems = page.locator('.boxed-home-item.home-item-article');

// Close button
const closeButton = page.locator('.mobile-close, .modern-mobile-btn').first();
```

## Test Patterns

### Standard Test Flow Patterns

#### 1. Login and Initial Setup
```typescript
await test.step('Navigate and Login to Halo QA', async () => {
  await loginPage.goto();
  await loginPage.login(testEmail, testPassword);
  await dashboardPage.waitForDashboardLoad();
  console.log('✅ Successfully logged in to Halo QA');
});

// Required wait for dashboard stability
await page.waitForTimeout(5000);
```

#### 2. Opening Help Center
```typescript
await test.step('Open Help Center', async () => {
  const helpCenterButton = page.locator('.button-launcher').first();
  await helpCenterButton.waitFor({ state: 'visible', timeout: 30000 });
  await helpCenterButton.click();
  await page.waitForTimeout(2000);

  const helpCenterWidget = page.locator('.modern-widget.pfruits-button-popup').first();
  await helpCenterWidget.waitFor({ state: 'visible', timeout: 10000 });
  console.log('✅ Help Center opened');
});
```

#### 3. Help Item Navigation and Verification
```typescript
await test.step('Verify and Navigate Help Items', async () => {
  const homeItems = page.locator('.boxed-home-item');
  const itemCount = await homeItems.count();
  expect(itemCount).toBeGreaterThan(0);
  console.log(`📊 Found ${itemCount} help center items`);

  // Count by type
  const linkItems = await page.locator('.boxed-home-item.home-item-link').count();
  const articleItems = await page.locator('.boxed-home-item.home-item-article').count();
  console.log(`📋 Breakdown: ${linkItems} links, ${articleItems} articles`);

  // Navigate to each link item
  const links = await page.locator('.boxed-home-item.home-item-link').all();
  for (let i = 0; i < links.length; i++) {
    const [newPage] = await Promise.all([
      context.waitForEvent('page'),
      links[i].click()
    ]);
    await newPage.waitForLoadState();
    console.log(`✅ New tab opened for link ${i + 1}`);
    await newPage.close();
  }
});
```

#### 4. Bug Report Submission
```typescript
await test.step('Submit Bug Report', async () => {
  // Navigate to bug report form
  const bugReportButton = page.locator('text=Report a Bug').first();
  await bugReportButton.click();
  await page.waitForTimeout(2000);

  // Fill form
  await page.locator('input[name="title"]').fill('Test Bug Report');
  await page.locator('textarea[name="description"]').fill('This is a test bug report description');
  
  // Add screenshot if needed
  const fileInput = page.locator('input[type="file"]');
  await fileInput.setInputFiles(['path/to/screenshot.png']);

  // Submit form
  await page.locator('button:text("Submit")').click();
  
  // Verify submission
  await page.waitForSelector('text=Bug report submitted successfully', { timeout: 10000 });
  console.log('✅ Bug report submitted successfully');
});
```

#### 5. Closing Help Center
```typescript
await test.step('Close Help Center', async () => {
  // Method 1: Close button
  const closeButton = page.locator('.mobile-close, .modern-mobile-btn').first();
  const closeButtonVisible = await closeButton.isVisible({ timeout: 5000 }).catch(() => false);

  if (closeButtonVisible) {
    await closeButton.click();
  } else {
    // Method 2: Click launcher button again to toggle
    const helpCenterButton = page.locator('.button-launcher').first();
    await helpCenterButton.click();
  }

  await page.waitForTimeout(2000);
  console.log('✅ Help Center closed');
});
```

## Position Verification

### Button Position Check
```typescript
const buttonBox = await helpCenterButton.boundingBox();
if (buttonBox) {
  console.log(`📍 Position: left=${buttonBox.x}, top=${buttonBox.y}`);
  // Help center button should be on right side
  expect(buttonBox.x).toBeGreaterThan(1000);
}
```

## Common Issues & Solutions

### Issue 1: Button not visible immediately
**Solution**: Wait for dashboard to fully load before checking
```typescript
await dashboardPage.waitForDashboardLoad();
await page.waitForTimeout(5000); // Additional wait for widgets
```

### Issue 2: Widget doesn't appear after clicking
**Solution**: Ensure proper wait time after click
```typescript
await helpCenterButton.click();
await page.waitForTimeout(2000); // Widget animation time
```

### Issue 3: Help items not loading
**Solution**: Wait for home section to be visible first
```typescript
const homeSection = page.locator('.section-home').first();
await homeSection.waitFor({ state: 'visible', timeout: 10000 });
```

## Best Practices

1. **Always wait for button visibility** before interacting
2. **Use .first()** for selectors as there may be multiple instances
3. **Verify widget structure** after opening (button-section, home-items)
4. **Count items** to ensure help content is loaded
5. **Test both open and close** functionality
6. **Use timeouts** for widget animations (2-3 seconds)

## Test Coverage

### Essential Tests
- ✅ Launcher button is visible
- ✅ Widget opens when button clicked
- ✅ Home section displays
- ✅ Help items are present
- ✅ Widget can be closed
- ✅ Widget can be reopened

### Extended Tests (Future)
- Search help articles (REG-22)
- Submit bug report (REG-23)
- Navigate help item links
- Verify article content

## HTML Structure Reference

```html
<!-- Help Center Launcher Button -->
<div class="modern-reset button-launcher"></div>

<!-- Help Center Widget -->
<div class="modern-widget pfruits-button-popup">
  <button class="modern-mobile-btn mobile-close"></button>
  <div class="button-section">
    <div class="section-home">
      <div class="home-items">
        <div class="boxed-home-item home-item-link"></div>
        <div class="boxed-home-item home-item-link"></div>
        <div class="boxed-home-item home-item-article"></div>
      </div>
    </div>
  </div>
</div>
```

## Bug Report Functionality (REG-23)

### Bug Report Selectors
```typescript
// Report Bug button (div, not button element)
const reportBugButton = page.locator('.button-switcher-button:has-text("Report Bug")').first();

// Feedback form container
const feedbackPopup = page.locator('.productfruits--feedback-popup-text').first();

// Bug description textarea (mandatory)
const textarea = page.locator('.productfruits--feedback-popup-textarea').first();

// Screenshot button
const screenshotButton = page.locator('.productfruits--feedback-popup-getscreenshot').first();

// Screenshot Attach button (appears immediately, screenshot auto-captured)
const attachScreenshotButton = page.getByRole('button', { name: 'Attach' }).first();

// Video record button
const recordButton = page.locator('.productfruits--feedback-popup-record').first();

// Stop button (recording starts automatically)
const stopButton = page.getByRole('button', { name: 'STOP' }).first();

// Video Attach button (in editor after stopping)
const attachVideoButton = page.getByRole('button', { name: 'Attach' });

// Attachments area
const attachmentsArea = page.locator('.productfruits--feedback-popup-attachments-area').first();

// Submit/Send button
const sendButton = page.locator('.productfruits--feedback-popup-sendfeedback, .productfruits--feedback-popup-send').first();

// Success popup
const successPopup = page.locator('.productfruits--feedback-popup-success').first();

// Close button (success popup)
const closeButton = page.locator('.productfruits--feedback-popup-close-std').first();
```

### Bug Report Workflow
```typescript
await test.step('Submit Bug Report', async () => {
  // 1. Open feedback form
  const reportBugButton = page.locator('.button-switcher-button:has-text("Report Bug")').first();
  await reportBugButton.click();

  // 2. Fill mandatory description
  const textarea = page.locator('.productfruits--feedback-popup-textarea').first();
  await textarea.fill('Bug description here');

  // 3. Attach screenshot (wait for screenshot to be captured)
  const screenshotButton = page.locator('.productfruits--feedback-popup-getscreenshot').first();
  await screenshotButton.click();
  console.log('⏳ Waiting for screenshot to be captured...');
  await page.waitForTimeout(3000); // Wait for screenshot capture

  const attachScreenshotButton = page.getByRole('button', { name: 'Attach' }).first();
  await attachScreenshotButton.waitFor({ state: 'visible', timeout: 10000 });
  await attachScreenshotButton.click();

  // 4. Record and attach video (5-second initialization before recording)
  const recordButton = page.locator('.productfruits--feedback-popup-record').first();
  await recordButton.click();
  console.log('⏳ Waiting 5 seconds for recording to initialize...');
  await page.waitForTimeout(5000); // Wait for recording initialization

  const stopButton = page.getByRole('button', { name: 'STOP' }).first();
  await stopButton.waitFor({ state: 'visible', timeout: 10000 });
  console.log('🎥 Recording for 5 seconds...');
  await page.waitForTimeout(5000); // Record for 5 seconds

  await stopButton.click();
  await page.waitForTimeout(3000); // Wait for editor

  const attachVideoButton = page.getByRole('button', { name: 'Attach' });
  await attachVideoButton.waitFor({ state: 'visible', timeout: 15000 });
  await attachVideoButton.click();

  // 5. Submit bug report
  const sendButton = page.locator('.productfruits--feedback-popup-sendfeedback').first();
  await sendButton.click();
  await page.waitForTimeout(4000); // Loader runs ~3 seconds

  // 6. Verify success and close
  const successPopup = page.locator('.productfruits--feedback-popup-success').first();
  await successPopup.waitFor({ state: 'visible', timeout: 10000 });

  const closeButton = page.locator('.productfruits--feedback-popup-close-std').first();
  await closeButton.click();
});
```

### Bug Report Timing
- **Screenshot Capture Delay**: Wait 3 seconds after clicking screenshot button for screenshot to be captured
- **Screenshot Modal**: Wait for Attach button to become visible (up to 10 seconds)
- **Video Recording Initialization**: Wait 5 seconds after clicking record button before recording starts
- **Recording Start**: Stop button appears after 5-second initialization
- **Recording Duration**: 5 seconds recommended
- **Video Editor**: Wait 3 seconds after stop for editor to appear
- **Submission Loader**: ~3-4 seconds
- **Success Popup**: Wait up to 10 seconds to appear

### Bug Report Validation
```typescript
// Verify description is filled
const filledText = await textarea.inputValue();
expect(filledText).toBe(bugDescription);

// Verify attachments are added
const attachmentCount = await attachmentsArea.locator('[class*="attachment"]').count();
expect(attachmentCount).toBeGreaterThan(0); // Screenshot attached
expect(attachmentCount).toBeGreaterThan(1); // Video also attached

// Verify success message
const successMessage = await successPopup.textContent();
console.log(`Success: ${successMessage?.trim()}`);
```

## Related Files
- Test: `tests/regression/test-cases/help-center/access-help-center.spec.ts` (REG-21)
- Test: `tests/regression/test-cases/help-center/navigate-help-items.spec.ts` (REG-22)
- Test: `tests/regression/test-cases/help-center/submit-bug-report.spec.ts` (REG-23)
- JSON: `critical-noncritical-flows-by-functionality.json`
- Master Hints: `hints/master-hints.md`