tracker

4.9 KB

1. // tests/realdata-028.mjs — tracker.worldapi.org#28, NOT the gate: cast + crew on a COPY of live storage/ (STATUS.md "ticket #28").
2. // Per title in REAL_TITLES and width (390, 1280): full page load (until hydrated + images), the cast/crew as the page shows them
3. // (names, visible names, labels, toggles), then a click on "Show all" — time until every name is visible (client-side: the
4. // faces sent are counted, must be 0) — screenshots of the collapsed and the expanded cast to $REAL_OUT.
5. // Env: REAL_PORT (8750), REAL_CHROME (8752-8753), REAL_OUT (/tmp/w061/real), REAL_TITLES ('Star-Trek-Picard,Superman,Dune').
6. import { writeFileSync, mkdirSync } from 'node:fs';
7. import { launchBrowser } from './cdp.mjs';
8. process.env.HL_CHROME ||= '/opt/google/chrome/chrome';
9. const BASE = `http://127.0.0.1:${process.env.REAL_PORT || 8750}`, OUT = process.env.REAL_OUT || '/tmp/w061/real';
10. mkdirSync(OUT, { recursive: true });
11. const [CH_FROM, CH_TO] = (process.env.REAL_CHROME || '8752-8753').split('-').map(Number);
12. const TITLES = (process.env.REAL_TITLES || 'Star-Trek-Picard,Superman,Dune').split(',').filter(Boolean);
13. const browser = await launchBrowser({ debugPortRange: [CH_FROM, CH_TO || CH_FROM] });
14. const page = await browser.newPage();
15. await page.captureWs();
16. const ev = (e) => page.evaluate(e);
17. const hydrated = () => page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1 && document.readyState === "complete"', { timeout: 30000, label: 'hydrated' });
18. 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');
19. const shot = async (n) => writeFileSync(`${OUT}/${n}.png`, Buffer.from((await page.send('Page.captureScreenshot', { format: 'png' })).data, 'base64'));
20. const state = () => ev(`JSON.stringify((() => {
21. const vis = (e) => !!e && e.getClientRects().length > 0;
22. const cast = Array.from(document.querySelectorAll('show-cast a.artist-link'));
23. const toggle = (id) => { const b = document.getElementById(id); return b && vis(b) ? Array.from(b.children).filter(vis).map(c => c.textContent).join('') : null; };
24. const crew = []; let job = null;
25. for (const e of document.querySelectorAll('show-crew crew-label, show-crew a.crew-link')) { if (e.tagName === 'CREW-LABEL') { job = { job: e.textContent, names: [] }; crew.push(job); } else if (job) job.names.push(e.textContent + (vis(e) ? '' : '*')); }
26. return { h1: (document.querySelector('show-header h1') || {}).textContent || null, cast: cast.length, castVisible: cast.filter(vis).length, first: cast.slice(0, 5).map(a => a.textContent + (a.getAttribute('data-role') || '')),
27. guestLabel: Array.from(document.querySelectorAll('show-cast cast-label')).map(l => l.textContent + (vis(l) ? '' : '*')).join(','), guestsFrom: cast.findIndex((a, i) => a.previousElementSibling && a.previousElementSibling.tagName === 'CAST-LABEL'),
28. castToggle: toggle('casttoggle'), crewToggle: toggle('crewtoggle'), crew, scrollW: document.documentElement.scrollWidth };
29. })())`).then(JSON.parse);
30. const out = [];
31. for (const slug of TITLES) {
32. for (const w of [390, 1280]) {
33. const mobile = w < 600;
34. await page.send('Emulation.setDeviceMetricsOverride', { width: w, height: mobile ? 844 : 900, deviceScaleFactor: mobile ? 2 : 1, mobile });
35. const t0 = Date.now();
36. await page.goto(BASE + '/shows/' + slug); await hydrated(); await imgsDone();
37. const load = Date.now() - t0;
38. const html = (await (await fetch(BASE + '/shows/' + slug)).text()).length;
39. const s0 = await state();
40. await ev(`(document.querySelector('show-crew') || document.querySelector('show-cast') || document.body).scrollIntoView()`);
41. await shot(`${slug}-collapsed-${w}`);
42. let all = null;
43. if (s0.castToggle) {
44. const sent = (await page.wsSent()).length;
45. all = await ev(`new Promise((res) => { const t = performance.now(); document.getElementById('casttoggle').click();
46. const tick = () => { const n = Array.from(document.querySelectorAll('show-cast a.artist-link')).filter(a => a.getClientRects().length > 0).length;
47. if (n === document.querySelectorAll('show-cast a.artist-link').length) return res(Math.round(performance.now() - t)); requestAnimationFrame(tick); }; requestAnimationFrame(tick); })`);
48. const s1 = await state();
49. out.push(` after "Show all": ${all} ms, visible ${s1.castVisible}/${s1.cast}, toggle "${s1.castToggle}", labels ${s1.guestLabel}, faces sent ${(await page.wsSent()).length - sent}, scrollW ${s1.scrollW}`);
50. await ev(`document.querySelector('show-cast').scrollIntoView()`);
51. await shot(`${slug}-all-${w}`);
52. }
53. out.splice(out.length - (all != null ? 1 : 0), 0, `${slug} @${w}: full load ${load} ms, HTML ${html} bytes; ${JSON.stringify(s0)}`);
54. }
55. }
56. console.log(out.join('\n'));
57. console.log('problems', JSON.stringify(page.problems()));
58. await browser.close();