qa360 2.1.7 → 2.2.0

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

@@ -0,0 +1,760 @@
+#!/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);
+});