tracker

7.4 KB

1. // tests/realdata-026.mjs — tracker.worldapi.org#26, NOT the gate: on a COPY of live storage/ with the REAL TMDB (STATUS.md
2. // "ticket #26"). For each person: their page (the fill adds the titles we don't have), then a filmography row of a title that
3. // is still INCOMPLETE (one movie, one series — rows are tried until one shows the loading state) is clicked (client-side):
4. // time until the page shows (skeleton), until it is complete (skeleton gone) and until the poster is loaded; /movies is asked
5. // every 100 ms meanwhile (how long other requests wait); then a full reload of the same title (complete at once). Screenshots
6. // (skeleton + complete) to $REAL_OUT. Env: REAL_PORT (8750), REAL_CHROME (8752-8753), REAL_OUT (/tmp/w059/real),
7. // REAL_PEOPLE ('Slug-A:390,Slug-B:1280'; '' = none), REAL_TRIES (8 rows per kind at most), REAL_TITLES (see below).
8. import { writeFileSync, mkdirSync } from 'node:fs';
9. import { launchBrowser } from './cdp.mjs';
10. process.env.HL_CHROME ||= '/opt/google/chrome/chrome';
11. const BASE = `http://127.0.0.1:${process.env.REAL_PORT || 8750}`, OUT = process.env.REAL_OUT || '/tmp/w059/real';
12. mkdirSync(OUT, { recursive: true });
13. const [CH_FROM, CH_TO] = (process.env.REAL_CHROME || '8752-8753').split('-').map(Number);
14. const TRIES = Number(process.env.REAL_TRIES || 8);
15. const browser = await launchBrowser({ debugPortRange: [CH_FROM, CH_TO || CH_FROM] });
16. const page = await browser.newPage();
17. const ev = (e) => page.evaluate(e);
18. const hydrated = () => page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1 && document.readyState === "complete"', { timeout: 30000, label: 'hydrated' });
19. 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');
20. const shot = async (n) => writeFileSync(`${OUT}/${n}.png`, Buffer.from((await page.send('Page.captureScreenshot', { format: 'png' })).data, 'base64'));
21. const state = () => ev(`JSON.stringify({ h1: (document.querySelector('show-header h1') || {}).textContent || null, loading: !!document.querySelector('#showloading'),
22. poster: !!document.querySelector('show-poster img'), posterLoaded: !!(document.querySelector('show-poster img') && document.querySelector('show-poster img').complete && document.querySelector('show-poster img').naturalWidth > 0),
23. links: Array.from(document.querySelectorAll('show-links a.extlink')).map(a => a.textContent).join(','), genres: document.querySelectorAll('a.genre-pill').length,
24. cast: document.querySelectorAll('a.artist-link').length, seasons: document.querySelectorAll('season-row').length, episodes: document.querySelectorAll('episode-row').length,
25. summary: ((document.querySelector('show-summary') || {}).textContent || '').length, scrollW: document.documentElement.scrollWidth, marker: window.__w059 || null })`).then(JSON.parse);
26. const out = [];
27. const people = (process.env.REAL_PEOPLE ?? 'Patrick-Stewart:390,Maya-Rudolph:1280').split(',').filter(Boolean).map(c => c.split(':'));
28. for (const [slug, width] of people) {
29. const w = Number(width), mobile = w < 600;
30. await page.send('Emulation.setDeviceMetricsOverride', { width: w, height: mobile ? 844 : 900, deviceScaleFactor: mobile ? 2 : 1, mobile });
31. await page.goto(BASE + '/person/' + slug); await hydrated();
32. await page.waitFor(`!document.querySelector('#personloading')`, { timeout: 120000, label: 'person filled' });
33. const rows = JSON.parse(await ev(`JSON.stringify(Array.from(document.querySelectorAll('a.film-row')).map(a => [a.getAttribute('href'), a.querySelector('film-type').textContent, a.querySelector('film-title').textContent]))`));
34. out.push(`${slug} (${w} px): ${rows.length} filmography rows`);
35. for (const kind of ['Movie', 'Series']) {
36. let tried = 0, done = false;
37. for (const [href, type, title] of rows.filter(r => r[1] === kind)) {
38. if (done || tried >= TRIES) break;
39. tried++;
40. await page.goto(BASE + '/person/' + slug); await hydrated();
41. await ev(`window.__w059 = 'same'`);
42. let polling = true; const lat = [];
43. 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)); } })();
44. const t0 = Date.now();
45. await page.click(`a.film-row[href="${href}"]`);
46. await page.waitFor(`location.pathname === ${JSON.stringify(href)} && !!document.querySelector('show-header h1')`, { timeout: 20000, label: 'title shown' });
47. const shown = Date.now() - t0;
48. const s0 = await state();
49. if (!s0.loading) { polling = false; await poll; out.push(` ${kind} "${title}" ${href}: already complete (no loading) — next`); continue; }
50. await shot(`${kind.toLowerCase()}-skeleton-${w}`);
51. await page.waitFor(`!document.querySelector('#showloading')`, { timeout: 60000, label: 'complete' });
52. const complete = Date.now() - t0;
53. await page.waitFor(`!document.querySelector('show-poster img') || (document.querySelector('show-poster img').complete && document.querySelector('show-poster img').naturalWidth > 0)`, { timeout: 20000, label: 'poster' }).catch(() => {});
54. const posterAt = Date.now() - t0;
55. polling = false; await poll;
56. await imgsDone();
57. const s1 = await state();
58. await shot(`${kind.toLowerCase()}-complete-${w}`);
59. out.push(` ${kind} "${title}" ${href}: shown ${shown} ms (skeleton), complete ${complete} ms, poster ${posterAt} ms; before ${JSON.stringify(s0)}; after ${JSON.stringify(s1)}; /movies meanwhile n=${lat.length} max=${Math.max(...lat)} ms median=${lat.sort((a, b) => a - b)[lat.length >> 1]} ms`);
60. const t2 = Date.now();
61. await page.goto(BASE + href); await hydrated(); await imgsDone();
62. const s2 = await state();
63. out.push(` reload: full load ${Date.now() - t2} ms, loading=${s2.loading}, same parts=${s2.cast === s1.cast && s2.seasons === s1.seasons && s2.links === s1.links && s2.poster === s1.poster}`);
64. await shot(`${kind.toLowerCase()}-reload-${w}`);
65. done = true;
66. }
67. if (!done) out.push(` ${kind}: no incomplete title among ${tried} tried`);
68. }
69. }
70. // REAL_TITLES='Slug-A,Slug-B': incomplete titles opened DIRECTLY (full load, 1280) — e.g. a talk show with thousands of episodes
71. for (const slug of (process.env.REAL_TITLES || '').split(',').filter(Boolean)) {
72. await page.send('Emulation.setDeviceMetricsOverride', { width: 1280, height: 900, deviceScaleFactor: 1, mobile: false });
73. let polling = true; const lat = [];
74. 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)); } })();
75. const t0 = Date.now();
76. await page.goto(BASE + '/shows/' + slug); await hydrated();
77. const s0 = await state();
78. await page.waitFor(`!document.querySelector('#showloading')`, { timeout: 120000, label: 'complete' });
79. const complete = Date.now() - t0;
80. polling = false; await poll;
81. await imgsDone();
82. const s1 = await state();
83. await shot(`direct-${slug}-1280`);
84. out.push(`direct ${slug}: loading at first=${s0.loading}, complete ${complete} ms after the request; after ${JSON.stringify(s1)}; /movies meanwhile n=${lat.length} max=${Math.max(...lat)} ms median=${lat.sort((a, b) => a - b)[lat.length >> 1]} ms`);
85. }
86. console.log(out.join('\n'));
87. console.log('problems', JSON.stringify(page.problems()));
88. await browser.close();