sample_test.spec.js

// The The-internet E2E Test
// Automated test for The-internet
// Auto-generated from crawl data on 2025-04-10 21:25:36

import { test, expect } from '@playwright/test';

test('The The-internet E2E Test', async ({ page }) => {
  // Configure viewport for better element visibility
  await page.setViewportSize({ width: 1280, height: 800 });

  // Helper function for safer element interactions
  async function safeClick(selector, description) {
    console.log(`Attempting to click ${description}...`);
    try {
      // First check if element exists and is visible
      const element = page.locator(selector);
      const isVisible = await element.isVisible().catch(() => false);
      
      if (!isVisible) {
        console.log(`Element ${description} is not visible, skipping`);
        return false;
      }
      
      // Always scroll before clicking - critical for elements outside viewport
      await element.scrollIntoViewIfNeeded();
      await page.waitForTimeout(500); // Small wait after scrolling
      
      // Now click the element
      await element.click();
      console.log(`Successfully clicked ${description}`);
      await page.waitForTimeout(1000); // Wait after click
      return true;
    } catch (e) {
      console.log(`Could not click ${description}: ${e.message}`);
      return false;
    }
  }

  // Navigate to the application
  console.log('Navigating to application...');
  await page.goto('https://the-internet.herokuapp.com/login');
  
  // Verify the page loaded correctly
  await expect(page).toHaveTitle(/^The.*$/);
  
  // Login process
  console.log('Performing login...');
  await page.fill("input[type='text'][name*='user']", "tomsmith");
  await page.fill("input[type='password']", "SuperSecretPassword!");
  // Click the submit button with safety checks
  await safeClick("button[type='submit']", "login button");
  
  // Verify successful login
  await page.waitForTimeout(2000); // Wait for navigation
  try {
    // Look for common login success indicators
    // 1. URL changes to include secure, account, dashboard, profile, etc.
    const currentUrl = page.url();
    console.log('Post-login URL: ' + currentUrl);
    // 2. Text indicating successful login (welcome, logged in, etc.)
    const pageContent = await page.content();
    const loggedInIndicators = ['welcome', 'logged in', 'sign out', 'logout', 'account'];
    let foundIndicator = false;
    for (const indicator of loggedInIndicators) {
      if (pageContent.toLowerCase().includes(indicator)) {
        foundIndicator = true;
        console.log('Found login success indicator: ' + indicator);
        break;
      }
    }
    // If found indicators, assert successful login
    if (foundIndicator) {
      expect(true).toBeTruthy(); // Successfully found login indicators
    } else {
      console.log('Warning: Could not find clear login success indicators');
    }
  } catch (e) {
    console.log('Error checking login status: ' + e);
  }
  
  // Explore the application - click on main menu items
  console.log('Exploring application navigation...');
  // Interact with Login
  await safeClick("form#login > button", "Login");
  
  // Interact with Elemental Selenium
  await safeClick("div#page-footer > div > div > a", "Elemental Selenium");
  
  // Take a screenshot for verification
  await page.screenshot({ path: 'test-result-screenshot.png' });
});