base/test-results/verify_style-Check-styles-and-globals/error-context.md

Instructions

• Following Playwright test failed.
• Explain why, be concise, respect Playwright best practices.
• Provide a snippet of code with the fix, if possible.

Test info

• Name: verify_style.spec.js >> Check styles and globals
• Location: test/verify_style.spec.js:3:1

Error details

Test timeout of 30000ms exceeded.

Error: locator.evaluate: Test timeout of 30000ms exceeded.
Call log:
  - waiting for locator('#formH form')

Page snapshot

- generic [ref=e2]:
  - heading "AutoForm Mega Test & Function Showcase" [level=2] [ref=e3]
  - generic [ref=e4]:
    - generic [ref=e7]: 1. Vertical Mode
    - generic [ref=e9]:
      - generic [ref=e11]:
        - generic [ref=e12]: 2. Responsive Horizontal
        - generic [ref=e13]: Try shrinking the window!
      - generic [ref=e16]: 2b. Forced Horizontal
  - generic [ref=e18]:
    - heading "3. Inline Mode Scenarios" [level=4] [ref=e19]
    - generic [ref=e20]:
      - heading "Toolbar (No label, with action)" [level=6] [ref=e22]
      - heading "Compact Config (With labels, no button)" [level=6] [ref=e25]
  - generic [ref=e27]:
    - generic [ref=e28]: Live Data Sync Debug
    - generic [ref=e30]: "{ \"t\": \"Apigo\", \"s\": \"1\", \"c\": [ \"Apple\" ], \"sw\": false, \"cp\": \"#0d6efd\", \"range\": \"2026-01-01\", \"rangeEnd\": \"2026-12-31\" }"

Test source

  1  | import { test, expect } from '@playwright/test';
  2  | 
  3  | test('Check styles and globals', async ({ page }) => {
  4  |     await page.goto('http://localhost:8082/test/form_test.html');
  5  |     
  6  |     // Check if auto-grid-form is grid (horizontal mode)
  7  |     const formH = page.locator('#formH form');
> 8  |     const display = await formH.evaluate(el => window.getComputedStyle(el).display);
     |                                 ^ Error: locator.evaluate: Test timeout of 30000ms exceeded.
  9  |     console.log('formH display:', display);
  10 |     expect(display).toBe('grid');
  11 | 
  12 |     // Get color picker input to check height
  13 |     const colorInput = page.locator('#formH input[type="color"]');
  14 |     if (await colorInput.count() > 0) {
  15 |         const height = await colorInput.evaluate(el => window.getComputedStyle(el).height);
  16 |         console.log('colorInput height:', height);
  17 |         // It shouldn't be very small (like 0 or 2px)
  18 |         expect(parseInt(height)).toBeGreaterThan(20);
  19 |     }
  20 | });
  21 |