4.2 KiB

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: all.spec.js >> base project comprehensive tests and scrolling benchmarks
  • Location: test/all.spec.js:3:1

Error details

Error: expect(received).toBeGreaterThan(expected)

Expected: > 0
Received:   0

Page snapshot

- generic [active] [ref=e1]:
  - heading "All Tests Passed 🎉" [level=1] [ref=e3]
  - generic [ref=e4]:
    - button "Fast List" [ref=e5] [cursor=pointer]
    - button "Fast Grouped" [ref=e6] [cursor=pointer]
    - button "Fast Tree" [ref=e7] [cursor=pointer]
    - button "Normal Tree" [ref=e8] [cursor=pointer]
    - button "AutoForm Controls" [ref=e9] [cursor=pointer]
  - heading "Fast List (Variable Height)" [level=5] [ref=e12]

Test source

  1  | import { test, expect } from '@playwright/test';
  2  | 
  3  | test('base project comprehensive tests and scrolling benchmarks', async ({ page }) => {
  4  |     test.setTimeout(60000);
  5  |     page.on('console', msg => console.log('BROWSER LOG:', msg.text()));
  6  |     page.on('pageerror', err => console.log('BROWSER EXCEPTION:', err.message, err.stack));
  7  |     await page.goto('http://127.0.0.1:8082/test/index.html');
  8  |     
  9  |     // Wait for testStatus to be set (includes basic unit tests and scrolling refresh test)
  10 |     await page.waitForFunction(() => window.testStatus !== undefined, { timeout: 60000 });
  11 |     
  12 |     const status = await page.evaluate(() => window.testStatus);
  13 |     expect(status).toBe('passed');
  14 | 
  15 |     // Simulate real scrolling and check dynamic rendering for FastList
  16 |     console.log('Simulating real scroll on FastList...');
  17 |     const scrollInfo = await page.evaluate(async () => {
  18 |         window.switchTab?.('ll');
  19 |         await new Promise(r => setTimeout(r, 200)); // wait for render
  20 |         const el = document.getElementById('ll');
  21 |         const results = [];
  22 |         
  23 |         const getRenderedCount = () => el.querySelectorAll('.border-primary').length;
  24 |         
  25 |         results.push({ 
  26 |             id: 'initial',
  27 |             scrollTop: el.scrollTop, 
  28 |             scrollHeight: el.scrollHeight,
  29 |             clientHeight: el.clientHeight,
  30 |             renderedCount: getRenderedCount(),
  31 |             renderedListLen: el.state.renderedList?.length
  32 |         });
  33 | 
  34 |     // Scroll to middle
  35 |     el.scrollTop = 50000;
  36 |     el.refresh?.();
  37 |     await new Promise(r => setTimeout(r, 500));
  38 |     const midCount = getRenderedCount();
  39 |     const midHtml = el.innerHTML.length;
  40 |     results.push({ 
  41 |         id: 'deep-middle',
  42 |         scrollTop: el.scrollTop, 
  43 |         renderedCount: midCount,
  44 |         htmlLen: midHtml,
  45 |         prevHeight: el.state.prevHeight,
  46 |         postHeight: el.state.postHeight,
  47 |         renderedListLen: el.state._renderedList?.length
  48 |     });
  49 |     
  50 |     // Scroll to end
  51 |     el.scrollTop = el.scrollHeight;
  52 |     el.refresh?.();
  53 |     await new Promise(r => setTimeout(r, 500));
  54 |     results.push({ 
  55 |         id: 'end',
  56 |         scrollTop: el.scrollTop, 
  57 |         renderedCount: getRenderedCount(),
  58 |         scrollHeight: el.scrollHeight,
  59 |         prevHeight: el.state.prevHeight,
  60 |         postHeight: el.state.postHeight
  61 |     });
  62 |         
  63 |         return results;
  64 |     });
  65 |     
  66 |     console.log('Scroll Details:', JSON.stringify(scrollInfo, null, 2));
> 67 |     expect(scrollInfo[0].renderedCount).toBeGreaterThan(0);
     |                                         ^ Error: expect(received).toBeGreaterThan(expected)
  68 |     expect(scrollInfo[1].scrollTop).toBeGreaterThan(0);
  69 | 
  70 |     const bench = await page.evaluate(() => window.benchResults);
  71 |     if (bench) {
  72 |         Object.entries(bench).forEach(([name, time]) => {
  73 |             console.log(`BENCHMARK [${name}]: ${time.toFixed(2)}ms`);
  74 |         });
  75 |     }
  76 | });
  77 |