pw-repl 0.12.5 → 0.12.6

package/bin/pw-repl.js

@@ -38,7 +38,9 @@ $PW_ENDPOINT, then $PW_SOCKET, then the default.
 send -c <client> (or $PW_CLIENT) sends as a client of the REPL's with a selected tab of its own, so
 several agents can share one REPL; pw-repl help session has the rest.
 
-send exit status: 0 ok, 1 command error, 2 completion not confirmed, 64 usage or unreachable.
+send exit status: 0 ok, 1 command error, 2 completion not confirmed, 64 usage or unreachable. send -t is
+how long send waits for the answer (default 20s); it does not lengthen a command's own limits, such as
+the 5s an action waits for its element.
 
 send --file <file> runs each line of a file as a command, in order, as if typed at the REPL's prompt:
 quoted as the prompt reads it (no shell), with a file it records, uploads or saves relative to this

package/lib/elements.js

@@ -5,7 +5,7 @@ const { state, onShutdown } = require('./state');
 const out = require('./output');
 const { takeOptions } = require('./cli-names');
 const { unquote, toSelector, keyName, splitSelector, REF } = require('./syntax');
-const { numbers, hints } = require('./util');
+const { numbers, hints, BUSY_PAGE } = require('./util');
 const { tabState } = require('./tabstate');
 const { cursorOf, aiming, aimAt, glideTo, showClick, showSelect } = require('./cursor');
 const { recordingOf, stepTarget, pauseToShow } = require('./record');
@@ -95,8 +95,13 @@ async function onElement(selector, action, budget = 5000) {
 // or the check the element kept failing.
 function lastBlocker(log) {
   const lines = log.split('\n').map(line => line.trim().replace(/^-\s*/, ''));
+  // Its last step was the action itself: it was sent, and the page stopped answering, as when the click
+  // sets off a long task. A profile started now would miss that task: Chrome traces only what begins
+  // after it starts.
+  const sent = /^performing (\w+) action$/.exec(lines.filter(Boolean).pop() || '');
+  if (sent) return `the ${sent[1]} was sent, and may have landed, but the page stopped answering after it, likely busy with what it set off. A profile shows that only if it is on before the action: profile on, then the action again, if repeating it is safe`;
   const line = lines.reverse().find(l => /intercepts pointer events|element is not |element is outside|not attached|detached/.test(l));
-  if (!line) return 'it never became ready to act on';
+  if (!line) return `it never became ready to act on; ${BUSY_PAGE}`;
   return line.length > 240 ? `${line.slice(0, 240)}…` : line;
 }
 

package/lib/help.js

@@ -69,7 +69,8 @@ tab on its own lists them all.`,
   interact: {
     intro: `Selectors are Playwright selectors (CSS, text=..., role=...) or snapshot refs such as e5.
 Commands use the first match (click, dblclick and hover the first they can use: help click); see help
-fill for selectors with spaces. mousemove and the other mouse commands act at a point instead.`,
+fill for selectors with spaces. mousemove and the other mouse commands act at a point instead. An action
+scrolls its element into view first, as Playwright does; profile counts that scroll in the action's step.`,
     commands: ['click', 'dblclick', 'hover', 'fill', 'type', 'press', 'select', 'check', 'uncheck', 'upload', 'mousemove', 'mouseclick', 'mousedown', 'mouseup', 'mousewheel'],
   },
   inspect: {
@@ -734,6 +735,14 @@ each click or key press with its time to the next paint (input delay, handlers,
 burst of wheel or scroll events and each drag, with the main thread's busy time and the frames drawn and
 dropped. Times are from when it started. --all lists every long task and step, not the first ones.
 
+Long tasks read kind, what set it off, script: scripting, click event, app.js:120 handleClick. The kind
+is what most of its time went to (GC, style/layout); what set it off is the event or callback that began
+it (timer, promise callbacks); promise callbacks a click handler queued run in the click's task, so
+show as click event. No script is named when none of its code came from a page URL.
+
+A page that freezes: profile on, then do what freezes it. Your commands wait for the page meanwhile, and
+may time out, but the profile records it all; profile off once the page answers again.
+
 Size: a busy page fills Chrome's trace buffer in under a minute (one that restyles many elements as it
 draws, sooner), which stops the profile there, and the summary says so. Stopping a long one takes a
 while, as Chrome writes out its trace: give send time, pw-repl send -t 60 profile off. If send gives up
@@ -755,6 +764,13 @@ small hot function called in a loop can show as the loop's function.
 A wheel-zoom or drag the page handles in its own script (a map) shows as a step from its events; one the
 browser handles alone, with no listener, may show only as frames.
 
+A page gets scroll events for any scroll, input or not. Those next to a click or key press, with no wheel
+event (an action's scroll into view, or a handler's scrollTo), are that step's: it says the page
+scrolled. A burst of scroll events alone may also be the page's own script scrolling.
+
+A step under way when the profile began (an action still running at profile on) reads before, without
+its busy time: the trace has nothing from before it began.
+
 profile on and off each run console.timeStamp in the page, which prints nothing, so the tab is found in
 the trace even when its page did nothing. The trace is kept in a temporary folder until the next
 profile, or until the REPL stops.`,

package/lib/inspect.js

@@ -6,7 +6,7 @@ const out = require('./output');
 const { printOutput } = out;
 const { devices } = require('playwright-core');
 const { toSelector, REF, unquote } = require('./syntax');
-const { regexOf, COMMAND_TIMEOUT } = require('./util');
+const { regexOf, COMMAND_TIMEOUT, BUSY_PAGE } = require('./util');
 const { tabState } = require('./tabstate');
 const { keptSession } = require('./cdp');
 const { CDP_REFUSED } = require('./dialogs');
@@ -127,6 +127,13 @@ async function waitGone(locator, what, timeout) {
 
 const SNAPSHOT_HINT_LINES = 60;
 
+function evaluated(promise) {
+  return withTimeout(promise, 'Page evaluation', COMMAND_TIMEOUT).catch(error => {
+    if (error.message === 'Page evaluation timed out') error.message += ` after ${COMMAND_TIMEOUT / 1000}s; ${BUSY_PAGE}`;
+    throw error;
+  });
+}
+
 // Each matching line (any part of it: role, name, flags such as [disabled]),
 // with the named elements it sits in, so a match can be placed without the
 // rest of the tree.
@@ -480,7 +487,7 @@ const commands = {
       try {
         // Made from its text by the debugger, as eval is, so a page's CSP cannot
         // refuse it, and in the element's own frame, which may be an iframe.
-        const fn = await withTimeout((await el.ownerFrame()).evaluateHandle(unquote(onRef[1])), 'Page evaluation', COMMAND_TIMEOUT);
+        const fn = await evaluated((await el.ownerFrame()).evaluateHandle(unquote(onRef[1])));
         try {
           printOutput(await el.evaluate((e, f) => f(e), fn), all);
         } finally {
@@ -502,13 +509,13 @@ const commands = {
     const call = `const value = (${args}\n); return typeof value === 'function' ? value() : value;`;
     if (awaits && !single && compiles(AsyncFunction, args)) {
       const session = await keptSession(state.page);
-      const { result, exceptionDetails } = await withTimeout(session.send('Runtime.evaluate', { expression: args, replMode: true, awaitPromise: true, returnByValue: true }), 'Page evaluation', COMMAND_TIMEOUT);
+      const { result, exceptionDetails } = await evaluated(session.send('Runtime.evaluate', { expression: args, replMode: true, awaitPromise: true, returnByValue: true }));
       if (exceptionDetails) throw new Error(exceptionDetails.exception?.description || exceptionDetails.text);
       printOutput(result.value !== undefined ? result.value : result.description ?? 'undefined', all);
       return;
     }
     const expression = single ? `(${awaits ? 'async ' : ''}() => { ${call} })()` : args;
-    const value = await withTimeout(state.page.evaluate(expression), 'Page evaluation', COMMAND_TIMEOUT);
+    const value = await evaluated(state.page.evaluate(expression));
     // An empty string is shown as one, not as no output at all.
     printOutput(value === '' ? '""' : value, all);
     // Quotes around the whole of it, as a shell's quoting sent on, make it a string, not code to run:

package/lib/profile.js

@@ -35,9 +35,15 @@ function workDir() {
 
 // A trace event naming the tab's frame, from its renderer, so an idle tab is still found in the trace.
 // console.timeStamp prints nothing in the console. A page held by a dialog does not answer: no wait.
-async function mark(page) {
+// At the end it waits two frames and 100ms more first: a click's timing reaches the trace only after the
+// paint that follows it, and its step takes in what the page did for 100ms after it.
+async function mark(page, { last = false } = {}) {
   if (page.isClosed()) return;
-  await Promise.race([page.evaluate(() => console.timeStamp('pw-repl profile')).catch(() => {}), new Promise(resolve => setTimeout(resolve, 1000))]);
+  const marked = page.evaluate(async settle => {
+    if (settle) await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(() => setTimeout(resolve, 100))));
+    console.timeStamp('pw-repl profile');
+  }, last).catch(() => {});
+  await Promise.race([marked, new Promise(resolve => setTimeout(resolve, 1000))]);
 }
 
 function forget(profile) {
@@ -121,7 +127,7 @@ function finishProfile() {
   clearTimeout(profile.cap);
   profile.unlisten();
   profile.finished = (async () => {
-    await mark(profile.page);
+    await mark(profile.page, { last: true });
     const endedAt = Date.now();
     const raw = path.join(workDir(), `raw-${process.pid}-${endedAt}.json`);
     try {
@@ -212,10 +218,13 @@ function printProfile(profile, all = false) {
     const steps = all ? s.steps : s.steps.slice(0, SHOWN * 2);
     for (const step of steps) {
       const span = step.latency != null
-        ? `${Math.round(step.latency)}ms to next paint (input delay ${Math.round(step.delay)}ms, handlers ${Math.round(step.handlers)}ms, presentation ${Math.round(step.presentation)}ms)`
+        ? `${Math.round(step.latency)}ms to next paint (input delay ${Math.round(step.delay)}ms, handlers ${Math.round(step.handlers)}ms, presentation ${Math.round(step.presentation)}ms)${step.scrolled ? ', the page scrolled' : ''}`
         : `${secs(step.end - step.start)}, ${step.events} event${step.events === 1 ? '' : 's'}`;
       const frames = step.frames ? `, frames ${step.frames} drawn, ${step.dropped} dropped` : '';
-      lines.push(`  ${at(step.start).padStart(8)}  ${step.kind}  ${span}; busy ${ms(step.busy)}${step.longest ? `, longest task ${ms(step.longest)}` : ''}${frames}`);
+      // One under way at profile on (an action still running): what ran before it began is not in the
+      // trace, so its busy time would be only the end of it.
+      const busy = step.start < s.t0 ? 'began before the profile: its busy time was not recorded' : `busy ${ms(step.busy)}${step.longest ? `, longest task ${ms(step.longest)}` : ''}`;
+      lines.push(`  ${(step.start < s.t0 ? 'before' : at(step.start)).padStart(8)}  ${step.kind}  ${span}; ${busy}${frames}`);
     }
     if (steps.length < s.steps.length) lines.push(`  (the first ${steps.length} of ${s.steps.length}; profile --all lists them all)`);
     if (profile.drawing && s.steps.some(step => step.frames)) {
@@ -307,4 +316,4 @@ onShutdown(async () => {
   if (dir) fs.rmSync(dir, { recursive: true, force: true });
 });
 
-module.exports = { commands, currentProfile, finishProfile };
+module.exports = { commands, currentProfile, finishProfile, printProfile };

package/lib/trace.js

@@ -10,6 +10,9 @@ const BIG_REQUEST = 100 * 1024;
 const STEP_GAP = 300000;
 // A step's frames and busy time include this long after its last input, for what it drew.
 const STEP_TAIL = 100000;
+// How long before its scroll events a scroll's frame can be drawn: the compositor scrolls and draws, and
+// the page gets the scroll event in its next frame, later still when frames are being dropped.
+const SCROLL_LEAD = 50000;
 
 const BUCKETS = ['scripting', 'style/layout', 'paint', 'GC', 'other'];
 
@@ -433,8 +436,9 @@ function steps(tracks, events, { taskOf, tasks }) {
   const began = e => (e.task >= 0 ? events.ts[e.task] : e.ts);
   let burst = null;
   for (const e of dispatches.filter(d => /^(?:wheel|mousewheel|scroll)$/.test(d.type))) {
-    if (burst && e.ts - burst.end <= STEP_GAP) { burst.end = e.ts + e.dur; burst.events += 1; continue; }
-    burst = { kind: 'wheel/scroll', start: began(e), end: e.ts + e.dur, events: 1 };
+    const wheel = e.type !== 'scroll';
+    if (burst && e.ts - burst.end <= STEP_GAP) { burst.end = e.ts + e.dur; burst.events += 1; burst.wheel ||= wheel; continue; }
+    burst = { kind: 'wheel/scroll', start: began(e), end: e.ts + e.dur, events: 1, wheel };
     found.push(burst);
   }
   let down = null;
@@ -470,6 +474,16 @@ function steps(tracks, events, { taskOf, tasks }) {
       presentation: Math.max(0, latency - (processingEnd - startAt)),
     });
   }
+  // A page gets scroll events for any scroll, not only input: a click's scroll into view (dispatched in
+  // the frame after it, or before it when the click waited a frame) or its handler's scrollTo. Scroll
+  // events with no wheel event next to a click or key press are that step's.
+  for (const burst of found.filter(s => s.kind === 'wheel/scroll' && !s.wheel)) {
+    const step = found.find(s => s.latency != null && burst.start <= s.end + STEP_TAIL && burst.end >= s.start - STEP_TAIL);
+    if (!step) continue;
+    step.scrolled = true;
+    step.end = Math.max(step.end, burst.end);
+    found.splice(found.indexOf(burst), 1);
+  }
   found.sort((a, b) => a.start - b.start);
   const taskStarts = tasks.map(t => t.ts);
   const frames = tracks.frames.sort((a, b) => a.ts - b.ts);
@@ -488,7 +502,14 @@ function steps(tracks, events, { taskOf, tasks }) {
     }
     step.frames = 0;
     step.dropped = 0;
-    for (let k = lowerBound(frameTimes, step.start); k < frames.length && frames[k].ts < end; k++) {
+    let first = lowerBound(frameTimes, step.start);
+    // A scroll's own frame comes before its scroll event: the last frame before it, if close and not
+    // the step before's.
+    if (step.kind === 'wheel/scroll' && first > 0) {
+      const before = frames[first - 1].ts;
+      if (step.start - before <= SCROLL_LEAD && before > (found[i - 1]?.start ?? -Infinity)) first -= 1;
+    }
+    for (let k = first; k < frames.length && frames[k].ts < end; k++) {
       step.frames += 1;
       if (frames[k].dropped) step.dropped += 1;
     }

package/lib/util.js

@@ -7,6 +7,9 @@ const COMMAND_TIMEOUT = 15000;
 
 const MAX_EVENT_TEXT = 4000;
 
+// For a command that timed out waiting on the page.
+const BUSY_PAGE = 'a page busy with a long task does not answer meanwhile: profile on, then try again, shows what it is busy with';
+
 // For a command that needs a tab, when none is selected.
 const NO_TAB = 'No tab is selected; select one with tab <index|url-part>, or open one with tab new';
 
@@ -66,4 +69,4 @@ function playwrightBrowsersDir() {
   return path.join(cache, 'ms-playwright');
 }
 
-module.exports = { STOPPED_RECORDING, ENDED_UNSEEN, COMMAND_TIMEOUT, MAX_EVENT_TEXT, NO_TAB, hints, clipText, numbers, regexOf, patternText, clock, playwrightBrowsersDir };
+module.exports = { BUSY_PAGE, STOPPED_RECORDING, ENDED_UNSEEN, COMMAND_TIMEOUT, MAX_EVENT_TEXT, NO_TAB, hints, clipText, numbers, regexOf, patternText, clock, playwrightBrowsersDir };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pw-repl",
-  "version": "0.12.5",
+  "version": "0.12.6",
   "description": "Text REPL for driving an existing Chromium through Playwright over CDP",
   "keywords": [
     "playwright",