tracker

6.4 KB

1. // tests/realdata-057.mjs — mission 057 (tracker#17), NOT the gate: opening a season on a COPY of live storage/ (STATUS.md has the
2. // procedure). Signed in (cookie from .scratch/real-sid) at 390 + 1280, per show in REAL_SHOWS: full page load, then per
3. // collapsed season in REAL_SEASONS (indexes into the season list, top = 0): click its toggle and measure IN THE PAGE
4. // (performance.now, polled every animation frame) when a skeleton row first shows, when the season's real episode rows are
5. // all there, and when the skeleton is gone; then the same click closes it again (time until its rows are gone). Each
6. // measurement repeated REAL_REPEAT times; how many skeleton rows showed and which faces were sent (captureWs). Screenshots of the open state → $REAL_OUT. Env: REAL_PORT (8730), REAL_CHROME (8731).
7. import { writeFileSync, readFileSync, 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 || 8730}`, OUT = process.env.REAL_OUT || '/tmp/w057/real';
11. const SID = readFileSync('.scratch/real-sid', 'utf8').trim();
12. const SHOWS = (process.env.REAL_SHOWS || '/shows/The-Daily-Show-with-Trevor-Noah,/shows/Last-Week-Tonight-with-John-Oliver').split(',');
13. const SEASONS = (process.env.REAL_SEASONS || '1,3').split(',').map(Number);
14. const REPEAT = Number(process.env.REAL_REPEAT || 3);
15. mkdirSync(OUT, { recursive: true });
16. const browser = await launchBrowser({ debugPortRange: [Number(process.env.REAL_CHROME || 8731), Number(process.env.REAL_CHROME || 8731)] });
17. const page = await browser.newPage();
18. await page.captureWs(); // which faces a season click sends
19. const ev = (e) => page.evaluate(e);
20. const hydrated = () => page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1 && document.readyState === "complete"', { timeout: 60000, label: 'hydrated' });
21. const shot = async (n) => writeFileSync(`${OUT}/${n}.png`, Buffer.from((await page.send('Page.captureScreenshot', { format: 'png' })).data, 'base64'));
22. // click season #i's toggle, poll per frame: first skeleton, all `want` new episode rows, skeleton gone (or, closing: rows gone)
23. const toggle = (i) => ev(`new Promise((res) => {
24. const row = document.querySelectorAll('season-row')[${i}];
25. const opening = row.classList.contains('collapsed');
26. const want = Number(row.querySelector('season-count').textContent.split(' ')[0]);
27. const n0 = document.querySelectorAll('episode-row').length;
28. const t0 = performance.now(); let skel = null, rows = null, gone = null, maxSkel = 0;
29. row.querySelector('button.season-toggle').click();
30. const tick = () => {
31. const t = performance.now() - t0, n = document.querySelectorAll('episode-row').length, s = document.querySelectorAll('skeleton-row').length;
32. if (s > 0 && skel == null) skel = t;
33. if (s > maxSkel) maxSkel = s;
34. if (opening && rows == null && n >= n0 + want) rows = t;
35. if (!opening && rows == null && n <= n0 - want) rows = t;
36. if (rows != null && s === 0) { gone = t; return res(JSON.stringify({ opening, want, skel, rows, gone, maxSkel, dup: n !== n0 + (opening ? want : -want) })); }
37. if (t > 30000) return res(JSON.stringify({ opening, want, skel, rows, gone, timeout: true, n, n0 }));
38. requestAnimationFrame(tick);
39. };
40. requestAnimationFrame(tick);
41. })`).then(JSON.parse);
42. const r = (x) => x == null ? '-' : Math.round(x);
43. await page.send('Network.setCookie', { name: 'trackersid', value: SID, url: BASE });
44. const out = [];
45. for (const [w, h, mobile] of [[390, 844, true], [1280, 900, false]]) {
46. await page.send('Emulation.setDeviceMetricsOverride', { width: w, height: h, deviceScaleFactor: mobile ? 2 : 1, mobile });
47. for (const path of SHOWS) {
48. const t = Date.now();
49. await page.goto(BASE + path, { timeout: 60000 });
50. await hydrated();
51. const seasons = await ev(`document.querySelectorAll('season-row').length`);
52. const open = await ev(`document.querySelectorAll('episode-row').length`);
53. out.push(`${w} ${path}: load ${Date.now() - t} ms, ${seasons} seasons, ${open} episode rows open`);
54. for (const i of SEASONS) {
55. if (i >= seasons) continue;
56. const label = await ev(`document.querySelectorAll('season-row')[${i}].querySelector('season-label').textContent`);
57. const opens = [], closes = [];
58. for (let k = 0; k < REPEAT; k++) {
59. const o = await toggle(i); opens.push(o);
60. if (k === 0) { await ev(`document.querySelectorAll('season-row')[${i}].scrollIntoView()`); await shot(`open-${path.split('/').pop().slice(0, 20)}-${i}-${w}`); }
61. closes.push(await toggle(i));
62. }
63. const sent = (await page.wsSent()).join(' ');
64. out.push(` #${i} ${label} (${opens[0].want} ep): skeleton rows ${opens[0].maxSkel}, faces sent so far: showSeasonEpisodes ${(sent.match(/showSeasonEpisodes/g) || []).length}, showRows ${(sent.match(/showRows/g) || []).length}; open skeleton/rows/skeletonGone ms ${opens.map(o => `${r(o.skel)}/${r(o.rows)}/${r(o.gone)}${o.dup ? ' DUP' : ''}${o.timeout ? ' TIMEOUT' : ''}`).join(' ')}; close ${closes.map(c => r(c.rows)).join(' ')}`);
65. }
66. }
67. }
68. // the client-filled watch state equals the server's: open season #1 (client fills it from `watchedEpisodes`), note every
69. // check's class, then click an episode check of the open TOP season twice (watch + unwatch on the COPY: the face
70. // showToggleEpisode rebuilds EVERY row on the server with the same open seasons) and compare
71. for (const path of SHOWS) {
72. await page.goto(BASE + path, { timeout: 60000 });
73. await hydrated();
74. await toggle(1);
75. const classes = () => ev(`JSON.stringify(Array.from(document.querySelectorAll('show-seasons button.checkicon')).map(b => b.value + ' ' + b.getAttribute('class')))`);
76. const client = await classes();
77. const sel = 'episode-row button.checkicon';
78. for (let k = 0; k < 2; k++) {
79. const before = await ev(`document.querySelector('${sel}').getAttribute('class')`);
80. await ev(`document.querySelector('${sel}').click()`);
81. await page.waitFor(`document.querySelector('${sel}').getAttribute('class') !== '${before}'`, { timeout: 15000, label: 'toggled' });
82. }
83. await new Promise(r => setTimeout(r, 500));
84. const server = await classes();
85. const solid = JSON.parse(client).filter(c => c.endsWith('solid')).length;
86. out.push(`watch state ${path}: client-filled == server-built: ${client === server} (${JSON.parse(client).length} checks, ${solid} solid)`);
87. }
88. console.log(out.join('\n'));
89. console.log('problems', JSON.stringify(page.problems ? page.problems() : []));
90. await browser.close();