ui improvements

tests/simple-test.spec.ts

@@ -0,0 +1,66 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Simple Page Inspection', () => {
+  test('should load page and inspect DOM', async ({ page }) => {
+    await page.goto('/');
+
+    // Wait for page to load
+    await page.waitForLoadState('networkidle');
+
+    // Take screenshot
+    await page.screenshot({ path: 'debug-screenshots/page-loaded.png', fullPage: true });
+
+    // Get page title
+    const title = await page.title();
+    console.log('Page title:', title);
+
+    // Get all headings
+    const headings = await page.locator('h1, h2, h3, h4').allTextContents();
+    console.log('Headings:', headings);
+
+    // Get all form elements
+    const formElements = await page.locator('form input, form select, form button').allTextContents();
+    console.log('Form elements text:', formElements);
+
+    // Get the form HTML
+    const formHtml = await page.locator('form').innerHTML();
+    console.log('Form HTML length:', formHtml.length);
+
+    // Save form HTML to file for inspection
+    await page.evaluate((html) => {
+      const blob = new Blob([html], { type: 'text/html' });
+      const url = URL.createObjectURL(blob);
+      console.log('Form HTML saved to blob:', url);
+      return html.substring(0, 1000) + '...';
+    }, formHtml);
+
+    // Check for specific elements
+    const playerNameInput = page.locator('input[id="playerName"]');
+    const exists = await playerNameInput.count() > 0;
+    console.log('Player name input exists:', exists);
+
+    if (exists) {
+      console.log('Player name input is visible:', await playerNameInput.isVisible());
+    }
+
+    // Get all input IDs
+    const inputIds = await page.locator('input[id]').evaluateAll(inputs =>
+      inputs.map(input => input.id)
+    );
+    console.log('Input IDs:', inputIds);
+
+    // Get all select IDs
+    const selectIds = await page.locator('select[id]').evaluateAll(selects =>
+      selects.map(select => select.id)
+    );
+    console.log('Select IDs:', selectIds);
+
+    // Get all button texts
+    const buttonTexts = await page.locator('button').allTextContents();
+    console.log('Button texts:', buttonTexts);
+
+    // Look for crime category buttons
+    const crimeButtons = await page.locator('button').filter({ hasText: /offenses/ }).allTextContents();
+    console.log('Crime category buttons:', crimeButtons);
+  });
+});