qa360 2.2.1 → 2.2.13

package/tests/e2e/real-world/the-internet-herokuapp.test.mjs

@@ -1,760 +0,0 @@
-#!/usr/bin/env node
-/**
- * QA360 Real-World E2E Tests - The Internet (Herokuapp)
- *
- * Tests on https://the-internet.herokuapp.com/
- * This is a popular testing site with many interactive elements.
- *
- * Usage: node tests/e2e/real-world/the-internet-herokuapp.test.mjs
- */
-
-import { chromium } from '@playwright/test';
-import { join, dirname } from 'path';
-import { fileURLToPath } from 'url';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-// Test utilities
-let testsPassed = 0;
-let testsFailed = 0;
-
-// Timeout configuration for real-world tests (network can be slow)
-const TIMEOUTS = {
-  default: 10000,      // 10s for normal operations
-  navigation: 15000,   // 15s for page loads
-  network: 20000,      // 20s for network idle
-  dialog: 5000,        // 5s for dialogs
-  short: 3000,         // 3s for quick transitions
-};
-
-function log(message, type = 'info') {
-  const colors = {
-    info: '\x1b[36m',
-    success: '\x1b[32m',
-    error: '\x1b[31m',
-    warning: '\x1b[33m',
-    dim: '\x1b[90m',
-  };
-  const reset = '\x1b[0m';
-  console.log(`${colors[type] || ''}${message}${reset}`);
-}
-
-function assert(condition, message) {
-  if (condition) {
-    testsPassed++;
-    log(`  OK ${message}`, 'success');
-  } else {
-    testsFailed++;
-    log(`  FAIL ${message}`, 'error');
-    throw new Error(`Assertion failed: ${message}`);
-  }
-}
-
-function assertEqual(actual, expected, message) {
-  if (actual === expected) {
-    testsPassed++;
-    log(`  OK ${message}`, 'success');
-  } else {
-    testsFailed++;
-    log(`  FAIL ${message}`, 'error');
-    log(`     Expected: "${expected}"`, 'dim');
-    log(`     Got: "${actual}"`, 'dim');
-    throw new Error(`Assertion failed: ${message}`);
-  }
-}
-
-function assertContains(haystack, needle, message) {
-  if (haystack.includes(needle)) {
-    testsPassed++;
-    log(`  OK ${message}`, 'success');
-  } else {
-    testsFailed++;
-    log(`  FAIL ${message}`, 'error');
-    log(`     Expected to contain: "${needle}"`, 'dim');
-    log(`     In: "${haystack}"`, 'dim');
-    throw new Error(`Assertion failed: ${message}`);
-  }
-}
-
-const BASE_URL = 'https://the-internet.herokuapp.com';
-
-// ============================================================================
-// TESTS
-// ============================================================================
-
-async function testHomePageLoads() {
-  log('\n[Test 1] Home page loads', 'info');
-
-  const browser = await chromium.launch({ headless: true });
-  const context = await browser.newContext();
-  const page = await context.newPage();
-
-  try {
-    await page.goto(BASE_URL);
-    const title = await page.title();
-    assertEqual(title, 'The Internet', 'Page title is correct');
-
-    const heading = await page.textContent('h1');
-    assertContains(heading || '', 'Welcome to', 'Main heading is correct');
-
-    // Check that examples list exists
-    const examples = await page.locator('#content ul li').count();
-    assert(examples > 0, `Examples list has ${examples} items`);
-
-  } finally {
-    await browser.close();
-  }
-}
-
-async function testCheckboxes() {
-  log('\n[Test 2] Checkboxes interaction', 'info');
-
-  const browser = await chromium.launch({ headless: true });
-  const context = await browser.newContext();
-  const page = await context.newPage();
-
-  try {
-    await page.goto(`${BASE_URL}/checkboxes`);
-
-    // Wait for checkboxes to load
-    await page.waitForSelector('input[type="checkbox"]');
-
-    const checkboxes = await page.locator('input[type="checkbox"]').count();
-    assertEqual(checkboxes, 2, 'There are 2 checkboxes');
-
-    // Check first checkbox
-    await page.check('input[type="checkbox"]:first-child');
-    let isChecked1 = await page.isChecked('input[type="checkbox"]:first-child');
-    assert(isChecked1, 'First checkbox is checked');
-
-    // Uncheck first checkbox
-    await page.uncheck('input[type="checkbox"]:first-child');
-    isChecked1 = await page.isChecked('input[type="checkbox"]:first-child');
-    assert(!isChecked1, 'First checkbox is unchecked');
-
-    // Check second checkbox
-    await page.check('input[type="checkbox"]:last-child');
-    const isChecked2 = await page.isChecked('input[type="checkbox"]:last-child');
-    assert(isChecked2, 'Second checkbox is checked');
-
-  } finally {
-    await browser.close();
-  }
-}
-
-async function testDropdown() {
-  log('\n[Test 3] Dropdown list interaction', 'info');
-
-  const browser = await chromium.launch({ headless: true });
-  const context = await browser.newContext();
-  const page = await context.newPage();
-
-  try {
-    await page.goto(`${BASE_URL}/dropdown`);
-
-    const dropdown = page.locator('#dropdown');
-    await dropdown.waitFor();
-
-    // Select option 1
-    await dropdown.selectOption('1');
-    let value = await dropdown.inputValue();
-    assertEqual(value, '1', 'Selected option 1');
-
-    // Select option 2
-    await dropdown.selectOption('2');
-    value = await dropdown.inputValue();
-    assertEqual(value, '2', 'Selected option 2');
-
-    // Check all options exist
-    const options = await dropdown.locator('option').count();
-    assertEqual(options, 3, 'Dropdown has 3 options (Please select, Option 1, Option 2)');
-
-  } finally {
-    await browser.close();
-  }
-}
-
-async function testInputs() {
-  log('\n[Test 4] Input field interaction', 'info');
-
-  const browser = await chromium.launch({ headless: true });
-  const context = await browser.newContext();
-  const page = await context.newPage();
-
-  try {
-    await page.goto(`${BASE_URL}/inputs`);
-
-    const input = page.locator('input[type="number"]');
-    await input.waitFor();
-
-    // Type a number
-    await input.fill('123');
-    let value = await input.inputValue();
-    assertEqual(value, '123', 'Input value is 123');
-
-    // Clear and type another number
-    await input.fill('456');
-    value = await input.inputValue();
-    assertEqual(value, '456', 'Input value is 456');
-
-    // Use keyboard arrows
-    await input.click();
-    await page.keyboard.press('ArrowUp');
-    value = await input.inputValue();
-    assertEqual(value, '457', 'Value increased to 457 after ArrowUp');
-
-  } finally {
-    await browser.close();
-  }
-}
-
-async function testKeyPresses() {
-  log('\n[Test 5] Key presses', 'info');
-
-  const browser = await chromium.launch({ headless: true });
-  const context = await browser.newContext();
-  const page = await context.newPage();
-
-  try {
-    await page.goto(`${BASE_URL}/key_presses`, { timeout: TIMEOUTS.navigation });
-
-    const input = page.locator('#target');
-    await input.waitFor({ state: 'visible', timeout: TIMEOUTS.default });
-
-    // Press a key
-    await input.press('KeyA');
-    // Wait for result to update
-    await page.waitForSelector('#result:not(:empty)', { timeout: TIMEOUTS.short });
-    const result = await page.textContent('#result');
-    assertContains(result || '', 'A', 'Result shows key A was pressed');
-
-    // Press Enter
-    await input.press('Enter');
-    // Wait for result content to change - use waitForFunction for better reliability
-    await page.waitForFunction(() => {
-      const result = document.querySelector('#result');
-      return result && result.textContent !== '' && result.textContent.includes('You entered');
-    }, { timeout: TIMEOUTS.short });
-    const result2 = await page.textContent('#result');
-    assert(result2 !== '', 'Result shows key was pressed');
-
-  } finally {
-    await browser.close();
-  }
-}
-
-async function testHorizontalSlider() {
-  log('\n[Test 6] Horizontal slider', 'info');
-
-  const browser = await chromium.launch({ headless: true });
-  const context = await browser.newContext();
-  const page = await context.newPage();
-
-  try {
-    await page.goto(`${BASE_URL}/horizontal_slider`);
-
-    const slider = page.locator('input[type="range"]');
-    const valueDisplay = page.locator('#range');
-    await slider.waitFor();
-
-    // Get initial value
-    const initialValue = await valueDisplay.textContent();
-    log(`  Initial slider value: ${initialValue}`, 'dim');
-
-    // Set slider value
-    await slider.fill('5');
-    await page.waitForTimeout(100);
-
-    const finalValue = await valueDisplay.textContent();
-    assertEqual(finalValue, '5', 'Slider value changed to 5');
-
-  } finally {
-    await browser.close();
-  }
-}
-
-async function testAlerts() {
-  log('\n[Test 7] JavaScript Alerts', 'info');
-
-  const browser = await chromium.launch({ headless: true });
-  const context = await browser.newContext();
-  const page = await context.newPage();
-
-  try {
-    await page.goto(`${BASE_URL}/javascript_alerts`);
-
-    const result = page.locator('#result');
-    const clickButton = page.locator('button[onclick="jsAlert()"]');
-
-    // Handle alert
-    page.on('dialog', async dialog => {
-      assertEqual(dialog.type(), 'alert', 'Dialog type is alert');
-      assertEqual(dialog.message(), 'I am a JS Alert', 'Alert message is correct');
-      await dialog.accept();
-    });
-
-    await clickButton.click();
-    await page.waitForTimeout(100);
-
-    const resultText = await result.textContent();
-    assertContains(resultText || '', 'successfully clicked an alert', 'Result shows alert was clicked');
-
-  } finally {
-    await browser.close();
-  }
-}
-
-async function testConfirm() {
-  log('\n[Test 8] JavaScript Confirm', 'info');
-
-  const browser = await chromium.launch({ headless: true });
-  const context = await browser.newContext();
-  const page = await context.newPage();
-
-  try {
-    await page.goto(`${BASE_URL}/javascript_alerts`);
-
-    const result = page.locator('#result');
-    const confirmButton = page.locator('button[onclick="jsConfirm()"]');
-
-    // Accept confirm
-    page.on('dialog', async dialog => {
-      assertEqual(dialog.type(), 'confirm', 'Dialog type is confirm');
-      assertEqual(dialog.message(), 'I am a JS Confirm', 'Confirm message is correct');
-      await dialog.accept();
-    });
-
-    await confirmButton.click();
-    await page.waitForTimeout(100);
-
-    let resultText = await result.textContent();
-    assertContains(resultText, 'You clicked: Ok', 'Result shows Ok was clicked');
-
-    // Dismiss confirm
-    page.removeAllListeners('dialog');
-    page.on('dialog', async dialog => {
-      await dialog.dismiss();
-    });
-
-    await confirmButton.click();
-    await page.waitForTimeout(100);
-
-    resultText = await result.textContent();
-    assertContains(resultText, 'You clicked: Cancel', 'Result shows Cancel was clicked');
-
-  } finally {
-    await browser.close();
-  }
-}
-
-async function testPrompt() {
-  log('\n[Test 9] JavaScript Prompt', 'info');
-
-  const browser = await chromium.launch({ headless: true });
-  const context = await browser.newContext();
-  const page = await context.newPage();
-
-  try {
-    await page.goto(`${BASE_URL}/javascript_alerts`);
-
-    const result = page.locator('#result');
-    const promptButton = page.locator('button[onclick="jsPrompt()"]');
-
-    // Accept prompt with text
-    page.on('dialog', async dialog => {
-      assertEqual(dialog.type(), 'prompt', 'Dialog type is prompt');
-      assertEqual(dialog.message(), 'I am a JS prompt', 'Prompt message is correct');
-      await dialog.accept('Hello World');
-    });
-
-    await promptButton.click();
-    await page.waitForTimeout(100);
-
-    const resultText = await result.textContent();
-    assertContains(resultText, 'You entered: Hello World', 'Result shows entered text');
-
-  } finally {
-    await browser.close();
-  }
-}
-
-async function testFrames() {
-  log('\n[Test 10] Frames', 'info');
-
-  const browser = await chromium.launch({ headless: true });
-  const context = await browser.newContext();
-  const page = await context.newPage();
-
-  try {
-    await page.goto(`${BASE_URL}/frames`);
-
-    // Wait for frames to load
-    await page.waitForTimeout(500);
-
-    const frames = page.frames();
-    const contentFrame = frames.find(f => f.url().includes('frames'));
-    assert(contentFrame !== undefined, 'Frame exists');
-
-    const heading = await contentFrame?.locator('h3').textContent();
-    assertEqual(heading, 'Frames', 'Frame heading is correct');
-
-  } finally {
-    await browser.close();
-  }
-}
-
-async function testIframes() {
-  log('\n[Test 11] IFrames', 'info');
-
-  const browser = await chromium.launch({ headless: true });
-  const context = await browser.newContext();
-  const page = await context.newPage();
-
-  try {
-    await page.goto(`${BASE_URL}/iframe`);
-
-    // Wait for iframe to load
-    await page.waitForTimeout(500);
-
-    // Get iframe - the iframe has id mce_0_ifr
-    const iframeElement = await page.$('#mce_0_ifr');
-    assert(iframeElement !== null, 'Iframe element exists');
-
-    const iframe = page.frameLocator('#mce_0_ifr');
-
-    // Wait for content in iframe
-    await iframe.locator('body').waitFor({ state: 'visible', timeout: 5000 });
-
-    const text = await iframe.locator('body').textContent();
-    assert(text !== null && text.length > 0, 'Iframe has content');
-
-  } finally {
-    await browser.close();
-  }
-}
-
-async function testHover() {
-  log('\n[Test 12] Hover effect', 'info');
-
-  const browser = await chromium.launch({ headless: true });
-  const context = await browser.newContext();
-  const page = await context.newPage();
-
-  try {
-    await page.goto(`${BASE_URL}/hovers`);
-
-    // Wait for images to load
-    await page.waitForSelector('.figure', { state: 'visible' });
-
-    const figure = page.locator('.figure').first();
-    await figure.hover();
-
-    const caption = await figure.locator('.figcaption').isVisible();
-    assert(caption, 'Caption is visible on hover');
-
-    const captionText = await figure.locator('.figcaption h5').textContent();
-    assertContains(captionText || '', 'user1', 'Caption shows user1');
-
-  } finally {
-    await browser.close();
-  }
-}
-
-async function testDoubleClick() {
-  log('\n[Test 13] Double click', 'info');
-
-  const browser = await chromium.launch({ headless: true });
-  const context = await browser.newContext();
-  const page = await context.newPage();
-
-  try {
-    await page.goto(`${BASE_URL}/double_click`);
-
-    // Wait for page to load and check if element exists
-    const buttonExists = await page.$('#double-click-btn');
-    if (buttonExists) {
-      const button = page.locator('#double-click-btn');
-      await button.waitFor({ state: 'visible', timeout: 5000 });
-
-      // Double click
-      await button.dblclick();
-
-      await page.waitForTimeout(200);
-
-      // Check if color changed (the double click should change the background color)
-      const className = await button.getAttribute('class');
-      assert(className?.includes('success') || className?.includes('danger'), 'Button color changed on double click');
-    } else {
-      // Skip test if element doesn't exist
-      log('  SKIPPED: Double click button not found', 'warning');
-    }
-
-  } finally {
-    await browser.close();
-  }
-}
-
-async function testDragAndDrop() {
-  log('\n[Test 14] Drag and Drop', 'info');
-
-  const browser = await chromium.launch({ headless: true });
-  const context = await browser.newContext();
-  const page = await context.newPage();
-
-  try {
-    await page.goto(`${BASE_URL}/drag_and_drop`);
-
-    const columnA = page.locator('#column-a');
-    const columnB = page.locator('#column-b');
-
-    await columnA.waitFor();
-    await columnB.waitFor();
-
-    // Get initial text
-    const initialTextA = await columnA.textContent();
-    assertEqual(initialTextA, 'A', 'Column A has text A');
-
-    // Drag from A to B using drag and drop API
-    await columnA.dragTo(columnB);
-
-    await page.waitForTimeout(500);
-
-    // Get text after drag and drop
-    const newTextA = await columnA.textContent();
-    assertEqual(newTextA, 'B', 'Column A now has text B after drag and drop');
-
-  } finally {
-    await browser.close();
-  }
-}
-
-async function testFormAuthentication() {
-  log('\n[Test 15] Form Authentication', 'info');
-
-  const browser = await chromium.launch({ headless: true });
-  const context = await browser.newContext();
-  const page = await context.newPage();
-
-  try {
-    await page.goto(`${BASE_URL}/login`);
-
-    const usernameInput = page.locator('#username');
-    const passwordInput = page.locator('#password');
-    const loginButton = page.locator('button[type="submit"]');
-
-    // Fill in credentials
-    await usernameInput.fill('tomsmith');
-    await passwordInput.fill('SuperSecretPassword!');
-
-    // Submit form
-    await loginButton.click();
-
-    // Check for successful login
-    await page.waitForURL('**/secure');
-    const flashMessage = await page.textContent('#flash');
-    assertContains(flashMessage || '', 'You logged into a secure area!', 'Login successful');
-
-    // Logout
-    await page.click('.button.secondary');
-    await page.waitForURL('**/login');
-
-    const backOnLogin = page.url().includes('/login');
-    assert(backOnLogin, 'Logged out and back on login page');
-
-  } finally {
-    await browser.close();
-  }
-}
-
-async function testFileUpload() {
-  log('\n[Test 16] File Upload', 'info');
-
-  const browser = await chromium.launch({ headless: true });
-  const context = await browser.newContext();
-  const page = await context.newPage();
-
-  try {
-    await page.goto(`${BASE_URL}/upload`);
-
-    const fileInput = page.locator('#file-upload');
-    const uploadButton = page.locator('#file-submit');
-
-    // For the file upload test, we'll just verify the elements exist
-    // since we don't have a real file to upload
-    await fileInput.waitFor();
-    await uploadButton.waitFor();
-
-    assert(await fileInput.isVisible(), 'File input is visible');
-    assert(await uploadButton.isVisible(), 'Upload button is visible');
-
-  } finally {
-    await browser.close();
-  }
-}
-
-async function testDownload() {
-  log('\n[Test 17] File Download', 'info');
-
-  const browser = await chromium.launch({ headless: true });
-  const context = await browser.newContext();
-  const page = await context.newPage();
-
-  try {
-    await page.goto(`${BASE_URL}/download`);
-
-    const downloadLink = page.locator('a[href^="download/"]');
-    const linkText = await downloadLink.first().textContent();
-    assert(linkText, 'Download link exists');
-
-    // Check that multiple download links exist
-    const linksCount = await page.locator('a[href^="download/"]').count();
-    assert(linksCount > 0, `Found ${linksCount} download links`);
-
-  } finally {
-    await browser.close();
-  }
-}
-
-async function testDynamicContent() {
-  log('\n[Test 18] Dynamic Loading', 'info');
-
-  const browser = await chromium.launch({ headless: true });
-  const context = await browser.newContext();
-  const page = await context.newPage();
-
-  try {
-    await page.goto(`${BASE_URL}/dynamic_loading`);
-
-    const startButton = page.locator('a[href="/dynamic_loading/1"]');
-    await startButton.click();
-
-    // Click start button
-    await page.locator('#start button').click();
-
-    // Wait for dynamic content to load
-    await page.waitForSelector('#finish', { timeout: 10000 });
-
-    const finishText = await page.textContent('#finish');
-    assertContains(finishText || '', 'Hello World!', 'Dynamic content loaded');
-
-  } finally {
-    await browser.close();
-  }
-}
-
-async function testMultipleWindows() {
-  log('\n[Test 19] Multiple Windows', 'info');
-
-  const browser = await chromium.launch({ headless: true });
-  const context = await browser.newContext();
-  const page = await context.newPage();
-
-  try {
-    await page.goto(`${BASE_URL}/windows`);
-
-    const clickHereLink = page.locator('a[href="/windows/new"]');
-    const [newPage] = await Promise.all([
-      context.waitForEvent('page'),
-      clickHereLink.click(),
-    ]);
-
-    await newPage.waitForLoadState();
-
-    const newPageHeading = await newPage.locator('h3').textContent();
-    assertEqual(newPageHeading, 'New Window', 'New window opened');
-
-    await newPage.close();
-
-  } finally {
-    await browser.close();
-  }
-}
-
-async function testNotificationMessage() {
-  log('\n[Test 20] Notification Messages', 'info');
-
-  const browser = await chromium.launch({ headless: true });
-  const context = await browser.newContext();
-  const page = await context.newPage();
-
-  try {
-    await page.goto(`${BASE_URL}/notification_message_rendered`);
-
-    const link = page.locator('a[href="/notification_message"]');
-    await link.click();
-
-    await page.waitForSelector('#flash');
-
-    const flashMessage = await page.textContent('#flash');
-    assert(flashMessage, 'Flash message is displayed');
-
-    // Check that message contains actionable content
-    const messageText = flashMessage?.toLowerCase() || '';
-    assert(
-      messageText.includes('successful') ||
-      messageText.includes('unsucessful') ||
-      messageText.includes('action'),
-      'Notification message has meaningful content'
-    );
-
-  } finally {
-    await browser.close();
-  }
-}
-
-// ============================================================================
-// MAIN
-// ============================================================================
-
-async function main() {
-  log('\nQA360 Real-World E2E Tests - The Internet (Herokuapp)', 'info');
-  log('='.repeat(60), 'info');
-
-  const tests = [
-    testHomePageLoads,
-    testCheckboxes,
-    testDropdown,
-    testInputs,
-    testKeyPresses,
-    testHorizontalSlider,
-    testAlerts,
-    testConfirm,
-    testPrompt,
-    testFrames,
-    testIframes,
-    testHover,
-    testDoubleClick,
-    testDragAndDrop,
-    testFormAuthentication,
-    testFileUpload,
-    testDownload,
-    testDynamicContent,
-    testMultipleWindows,
-    testNotificationMessage,
-  ];
-
-  for (const test of tests) {
-    try {
-      await test();
-    } catch (error) {
-      if (!error.message.includes('Assertion failed')) {
-        log(`  ERROR ${error.message}`, 'error');
-      }
-    }
-  }
-
-  log('\n' + '='.repeat(60), 'info');
-  log(`\nResults: ${testsPassed} passed, ${testsFailed} failed`, 'info');
-
-  if (testsFailed > 0) {
-    process.exit(1);
-  } else {
-    log('\nAll real-world E2E tests passed!', 'success');
-  }
-}
-
-main().catch(error => {
-  console.error(error);
-  process.exit(1);
-});