Enhance diagnostic to capture DOM structure and JS errors

Added capturing of:
- HTML structure (not just text content)
- Browser console errors and warnings separately
- Page error events with stack traces

This will help identify if JS is loading but failing to render the app.
This commit is contained in:
rcourtman 2025-11-12 11:49:21 +00:00
parent 48f8473200
commit 320f5e4998

View file

@ -6,8 +6,24 @@ import { test, expect } from '@playwright/test';
test.describe('Login Diagnostic', () => {
test('diagnose login page and API access', async ({ page }) => {
// Enable console logging
page.on('console', msg => console.log('BROWSER CONSOLE:', msg.text()));
// Capture all console messages including errors
page.on('console', msg => {
const type = msg.type();
const text = msg.text();
if (type === 'error') {
console.log('BROWSER ERROR:', text);
} else if (type === 'warning') {
console.log('BROWSER WARNING:', text);
} else {
console.log('BROWSER CONSOLE:', text);
}
});
// Capture page errors
page.on('pageerror', err => {
console.log('PAGE ERROR:', err.message);
console.log('Stack:', err.stack);
});
// Track network requests
page.on('request', req => {
@ -43,7 +59,11 @@ test.describe('Login Diagnostic', () => {
// Check what's actually on the page
const bodyText = await page.locator('body').textContent();
console.log('Page contains:', bodyText?.substring(0, 500));
console.log('Page text content:', bodyText?.substring(0, 500));
// Check the actual DOM structure
const bodyHTML = await page.locator('body').innerHTML();
console.log('Page HTML structure:', bodyHTML.substring(0, 1000));
// Check for various elements
const usernameField = page.locator('input[name="username"]');