# 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: deep_dump.spec.js >> Capability demo page deep DOM dump
- Location: test/deep_dump.spec.js:3:1

# Error details

```
Error: expect(received).toBeGreaterThan(expected)

Expected: > 0
Received:   0
```

# Page snapshot

```yaml
- generic [ref=e2]:
  - navigation [ref=e4]
  - generic [ref=e6]:
    - generic [ref=e7]:
      - heading "项目概览" [level=2] [ref=e8]
      - button " 切换主题" [ref=e10] [cursor=pointer]:
        - generic [ref=e11]: 
        - text: 切换主题
    - generic [ref=e12]:
      - generic [ref=e13]: 
      - heading "Apigo Base Mega Demo" [level=1] [ref=e14]
      - paragraph [ref=e15]: 点击左侧菜单查看不同组件的能力展示
    - generic [ref=e16]:
      - heading "核心原子能力验证 (State singleton)" [level=4] [ref=e17]
      - generic [ref=e18]:
        - generic [ref=e20]:
          - generic [ref=e21]: 1. $text & 样式绑定
          - generic [ref=e22]:
            - paragraph [ref=e23]: Synchronous State Ready
            - button "切换颜色" [ref=e24] [cursor=pointer]
        - generic [ref=e26]:
          - generic [ref=e27]: 2. $if 显式模板判断
          - generic [ref=e28]:
            - generic [ref=e29]: 已激活 ($if="true")
            - button "切换显示状态" [ref=e30] [cursor=pointer]
        - generic [ref=e32]:
          - generic [ref=e33]: 3. $each 循环渲染
          - generic [ref=e35]:
            - generic [ref=e36]: Alpha
            - generic [ref=e37]: Beta
            - generic [ref=e38]: Gamma
        - generic [ref=e40]:
          - generic [ref=e41]: 4. $if 嵌套 $each
          - generic [ref=e42]:
            - generic [ref=e43]:
              - generic [ref=e44]: Red
              - generic [ref=e45]: Green
              - generic [ref=e46]: Blue
            - button "切换外层容器" [ref=e47] [cursor=pointer]
        - generic [ref=e49]:
          - generic [ref=e50]:
            - text: 5. $each 嵌套 $if (奇偶成员过滤)
            - button "仅看奇数项" [ref=e51] [cursor=pointer]
          - generic [ref=e53]:
            - generic [ref=e54]:
              - generic [ref=e55]: 
              - text: Alice (1)
            - generic [ref=e56]:
              - generic [ref=e57]: 
              - text: Bob (2)
            - generic [ref=e58]:
              - generic [ref=e59]: 
              - text: Charlie (3)
            - generic [ref=e60]:
              - generic [ref=e61]: 
              - text: David (4)
            - generic [ref=e62]:
              - generic [ref=e63]: 
              - text: Eve (5)
```

# Test source

```ts
  1  | import { test, expect } from '@playwright/test';
  2  | 
  3  | test('Capability demo page deep DOM dump', async ({ page }) => {
  4  |     page.on('console', msg => console.log('BROWSER:', msg.text()));
  5  | 
  6  |     await page.goto('http://localhost:5173/test/capability.html');
  7  |     await page.waitForTimeout(3000);
  8  | 
  9  |     const dump = await page.evaluate(() => {
  10 |         const nav = document.getElementById('mainNav');
  11 |         const form = document.getElementById('demoForm');
  12 |         return {
  13 |             nav: {
  14 |                 tagName: nav?.tagName,
  15 |                 childCount: nav?.children.length,
  16 |                 innerHTML: nav?.innerHTML
  17 |             },
  18 |             form: {
  19 |                 tagName: form?.tagName,
  20 |                 childCount: form?.children.length,
  21 |                 innerHTML: form?.innerHTML
  22 |             }
  23 |         };
  24 |     });
  25 |     
  26 |     console.log('Deep DOM Dump:', JSON.stringify(dump, null, 2));
  27 | 
> 28 |     expect(dump.nav.childCount).toBeGreaterThan(0);
     |                                 ^ Error: expect(received).toBeGreaterThan(expected)
  29 | });
  30 | 
```