tracker

5.0 KB

1. // tests/realdata-person.mjs — tracker.worldapi.org#16, NOT the gate: the person pages on a COPY of live storage/ with the REAL
2. // TMDB (STATUS.md "ticket #16"). For 3 cast members of followed shows: the show page → the cast link (client-side) → time until
3. // the page shows and until the filmography is filled; /movies asked every 100 ms meanwhile (how long other requests wait); a
4. // second visit (full load, 1280 + 390); a filmography row back to the show. Screenshots to $REAL_OUT.
5. // Env: REAL_PORT (8777), REAL_CHROME (8778-8779), REAL_OUT (/tmp/w055/real), REAL_CASES ('/shows/A:Slug-A,/shows/B:Slug-B').
6. import { writeFileSync } from 'node:fs';
7. import { mkdirSync } from 'node:fs';
8. import { launchBrowser } from './cdp.mjs';
9. process.env.HL_CHROME ||= '/opt/google/chrome/chrome';
10. const BASE = `http://127.0.0.1:${process.env.REAL_PORT || 8777}`, OUT = process.env.REAL_OUT || '/tmp/w055/real';
11. mkdirSync(OUT, { recursive: true });
12. const [CH_FROM, CH_TO] = (process.env.REAL_CHROME || '8778-8779').split('-').map(Number);
13. const browser = await launchBrowser({ debugPortRange: [CH_FROM, CH_TO || CH_FROM] });
14. const page = await browser.newPage();
15. const ev = (e) => page.evaluate(e);
16. const hydrated = () => page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1 && document.readyState === "complete"', { timeout: 30000, label: 'hydrated' });
17. const imgsDone = () => page.waitFor(`Array.from(document.querySelectorAll('img')).filter(i => { const r = i.getBoundingClientRect(); return r.top < innerHeight && r.bottom > 0 }).every(i => i.complete)`, { timeout: 30000, label: 'imgs' }).catch(() => 'imgs timeout');
18. const shot = async (n) => writeFileSync(`${OUT}/${n}.png`, Buffer.from((await page.send('Page.captureScreenshot', { format: 'png' })).data, 'base64'));
19. const out = [];
20. const cases = process.env.REAL_CASES ? process.env.REAL_CASES.split(',').map(c => c.split(':'))
21. : [['/shows/Superman-Lois', 'Tyler-Hoechlin'], ['/shows/The-Flash', 'Grant-Gustin'], ['/shows/Foundation', 'Jared-Harris']];
22. for (const [w, h, mobile] of [[390, 844, true]]) await page.send('Emulation.setDeviceMetricsOverride', { width: w, height: h, deviceScaleFactor: mobile ? 2 : 1, mobile });
23. for (const [show, slug] of cases) {
24. await page.goto(BASE + show); await hydrated();
25. await ev(`window.__w055 = 'same'`);
26. // other requests while the fill runs: /movies every 100 ms, their times
27. let polling = true; const lat = [];
28. const poll = (async () => { while (polling) { const t = Date.now(); await fetch(BASE + '/movies'); lat.push(Date.now() - t); await new Promise(r => setTimeout(r, 100)); } })();
29. const t0 = Date.now();
30. await page.click(`a.artist-link[href="/person/${slug}"]`);
31. await page.waitFor(`location.pathname === '/person/${slug}' && !!document.querySelector('person-meta h1')`, { timeout: 20000, label: 'person shown' });
32. const shown = Date.now() - t0;
33. const before = await ev(`document.querySelectorAll('a.film-row').length + ' rows, loading=' + !!document.querySelector('#personloading')`);
34. await page.waitFor(`!document.querySelector('#personloading')`, { timeout: 120000, label: 'filled' });
35. const filled = Date.now() - t0;
36. polling = false; await poll;
37. await imgsDone();
38. const after = await ev(`JSON.stringify({ rows: document.querySelectorAll('a.film-row').length, marker: window.__w055 || null, err: (document.querySelector('#fillerror')||{}).textContent || null, photo: !!document.querySelector('person-photo img'), facts: Array.from(document.querySelectorAll('person-fact')).map(f => f.textContent), bio: ((document.querySelector('person-bio')||{}).textContent||'').length, scrollW: document.documentElement.scrollWidth })`);
39. out.push(`${slug}: cast click → page ${shown} ms (${before}); filled ${filled} ms; ${after}; other requests during the fill: n=${lat.length} max=${Math.max(...lat)} ms median=${lat.sort((a, b) => a - b)[lat.length >> 1]} ms`);
40. await shot(`${slug}-filled-390`);
41. // second visit, full load, both widths
42. for (const [w, h, mobile] of [[1280, 900, false], [390, 844, true]]) {
43. await page.send('Emulation.setDeviceMetricsOverride', { width: w, height: h, deviceScaleFactor: mobile ? 2 : 1, mobile });
44. const t = Date.now();
45. await page.goto(BASE + '/person/' + slug); await hydrated(); await imgsDone();
46. out.push(` second visit ${w}: full load ${Date.now() - t} ms, loading=${await ev(`!!document.querySelector('#personloading')`)}, rows=${await ev(`document.querySelectorAll('a.film-row').length`)}`);
47. if (w === 1280) await shot(`${slug}-second-1280`);
48. }
49. // back to the show, client-side, from the filmography
50. await ev(`window.__w055 = 'same'`);
51. const t2 = Date.now();
52. await page.click(`a.film-row[href="${show}"]`);
53. await page.waitFor(`location.pathname === '${show}' && !!document.querySelector('show-header h1')`, { timeout: 20000, label: 'back to show' });
54. out.push(` filmography row → ${show} client-side ${Date.now() - t2} ms marker=${await ev('window.__w055 || null')}`);
55. }
56. console.log(out.join('\n'));
57. console.log('problems', JSON.stringify(page.problems()));
58. await browser.close();