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

test.describe('Debug Login Error Messages', () => {
    test('Find error message elements after invalid login', async ({ page }) => {
        // Navigate to login page
        await page.goto('/events/community/login/');
        
        // Fill invalid credentials
        await page.fill('#user_login', 'invalid@example.com');
        await page.fill('#user_pass', 'wrongpassword');
        
        // Click login button
        await page.click('#wp-submit');
        
        // Wait for error to appear
        await page.waitForTimeout(2000);
        
        // Find all visible error messages
        const errorSelectors = [
            '#login_error',
            '.login-error',
            '.message',
            '.error',
            '.notice-error',
            'form .error-message',
            '[role="alert"]'
        ];
        
        for (const selector of errorSelectors) {
            const elements = await page.locator(selector).all();
            for (const element of elements) {
                if (await element.isVisible()) {
                    const text = await element.textContent();
                    console.log(`Found error with selector '${selector}': "${text}"`);
                }
            }
        }
        
        // Also check the entire page for any text containing 'error' or 'invalid'
        const pageContent = await page.content();
        const errorMatches = pageContent.match(/.*error.*|.*invalid.*|.*incorrect.*/gi);
        if (errorMatches) {
            console.log('Text containing error/invalid/incorrect:', errorMatches.filter(m => m.length < 200));
        }
        
        // Take a screenshot for visual inspection
        await page.screenshot({ path: 'login-error-debug.png', fullPage: true });
        console.log('Screenshot saved to login-error-debug.png');
    });
});