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

test.describe('Debug Error Message Selector', () => {
    test('Find exact error message selector', async ({ page }) => {
        // Navigate to community login page
        await page.goto('/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(3000);
        
        // Find the error message using text
        const textLocator = page.locator('text="Invalid username or password."');
        if (await textLocator.isVisible()) {
            // Get the HTML of the error element
            const element = textLocator.first();
            const html = await element.evaluate(el => el.outerHTML);
            const tagName = await element.evaluate(el => el.tagName);
            const className = await element.evaluate(el => el.className);
            const id = await element.evaluate(el => el.id);
            
            console.log('Error element details:');
            console.log(`  HTML: ${html}`);
            console.log(`  Tag: ${tagName}`);
            console.log(`  Class: ${className}`);
            console.log(`  ID: ${id}`);
            
            // Try to get parent element details
            const parentHtml = await element.evaluate(el => el.parentElement?.outerHTML);
            console.log(`  Parent HTML: ${parentHtml}`);
        } else {
            console.log('Error message not found');
            
            // Check if it's in some container
            const possibleContainers = [
                '.error', '.notice', '.message', '.alert', 
                '[role="alert"]', '.login-error', '#login_error', '.tec-community-events',
                '.hvac-error', '.community-error'
            ];
            
            for (const container of possibleContainers) {
                const containerElement = page.locator(container);
                if (await containerElement.isVisible()) {
                    const containerText = await containerElement.textContent();
                    if (containerText?.includes('Invalid')) {
                        console.log(`Found error in container ${container}: "${containerText}"`);
                        const containerHtml = await containerElement.evaluate(el => el.outerHTML);
                        console.log(`Container HTML: ${containerHtml}`);
                    }
                }
            }
        }
    });
});