trip-planner/tests/e2e/visual-auth.test.js

const { By, until } = require('selenium-webdriver');

describe('Visual Authentication Test', () => {
  let driver;

  beforeAll(async () => {
    console.log('Starting Chrome browser...');
    driver = await global.createDriver();
    console.log('Browser started!');
  });

  afterAll(async () => {
    console.log('Test complete - keeping browser open for 5 seconds...');
    await driver.sleep(5000);
    await global.quitDriver(driver);
  });

  test('should test registration and login visually', async () => {
    console.log('Navigating to app...');
    await driver.get(global.testConfig.baseUrl);

    // Wait for page load
    console.log('Waiting for page to load...');
    await driver.sleep(2000);

    // Check if auth container exists
    try {
      const authContainer = await driver.findElement(By.className('auth-container'));
      console.log('✓ Found auth container');

      // Click Register tab
      console.log('Clicking Register tab...');
      const registerButton = await driver.findElement(By.css('.auth-toggle button:last-child'));
      await registerButton.click();
      await driver.sleep(1000);

      // Fill registration form
      console.log('Filling registration form...');
      const nameInput = await driver.findElement(By.id('name'));
      await nameInput.sendKeys('Test User');
      await driver.sleep(500);

      const emailInput = await driver.findElement(By.id('email'));
      await emailInput.sendKeys('test' + Date.now() + '@example.com');
      await driver.sleep(500);

      const passwordInput = await driver.findElement(By.id('password'));
      await passwordInput.sendKeys('password123');
      await driver.sleep(500);

      const confirmPasswordInput = await driver.findElement(By.id('password_confirmation'));
      await confirmPasswordInput.sendKeys('password123');
      await driver.sleep(1000);

      console.log('Submitting registration form...');
      const submitButton = await driver.findElement(By.css('button[type="submit"]'));
      await submitButton.click();

      // Wait to see the result
      console.log('Waiting for registration response...');
      await driver.sleep(3000);

      // Check for success message
      try {
        const successMessage = await driver.findElement(By.className('alert-success'));
        const text = await successMessage.getText();
        console.log('✓ Registration successful:', text);
      } catch (e) {
        console.log('No success message found');

        // Check for errors
        try {
          const errorMessage = await driver.findElement(By.className('alert-error'));
          const errorText = await errorMessage.getText();
          console.log('✗ Error:', errorText);
        } catch (e2) {
          console.log('No error message found either');
        }
      }

      // Now test login
      console.log('\nSwitching to Login form...');
      const loginButton = await driver.findElement(By.css('.auth-toggle button:first-child'));
      await loginButton.click();
      await driver.sleep(1000);

      console.log('Filling login form...');
      const loginEmail = await driver.findElement(By.css('.login-form #email'));
      await loginEmail.clear();
      await loginEmail.sendKeys('test@example.com');
      await driver.sleep(500);

      const loginPassword = await driver.findElement(By.css('.login-form #password'));
      await loginPassword.clear();
      await loginPassword.sendKeys('password123');
      await driver.sleep(1000);

      console.log('Submitting login form...');
      const loginSubmit = await driver.findElement(By.css('.login-form button[type="submit"]'));
      await loginSubmit.click();

      console.log('Waiting for login response...');
      await driver.sleep(3000);

      // Check if we reached dashboard
      try {
        const dashboard = await driver.findElement(By.className('dashboard'));
        console.log('✓ Successfully logged in - Dashboard visible');
      } catch (e) {
        console.log('Dashboard not found - checking for login errors...');

        try {
          const errorMessage = await driver.findElement(By.className('alert-error'));
          const errorText = await errorMessage.getText();
          console.log('✗ Login error:', errorText);
        } catch (e2) {
          console.log('Still on login form');
        }
      }

    } catch (error) {
      console.log('✗ Auth container not found');
      console.log('Error:', error.message);

      // Check if already logged in
      try {
        const dashboard = await driver.findElement(By.className('dashboard'));
        console.log('User appears to be already logged in (dashboard visible)');
      } catch (e) {
        console.log('Dashboard not found either - page structure might be different');
      }
    }

    expect(true).toBe(true);
  }, 120000);
});