pw-repl 0.8.0 → 0.8.2

package/lib/elements.js

@@ -242,12 +242,10 @@ async function smoothWheel(dx, dy) {
   }
 }
 
-// While the tab records, text is typed at a pace a viewer can follow, steady rather than human-like,
-// and faster for long text, so it takes 8s at most: a paragraph at 60ms a key would outrun send's 20s
-// default and hold every client's commands meanwhile. Otherwise at once, as before.
-function typingPace(text) {
-  if (!recordingOf(state.page) || !text.length) return 0;
-  return Math.round(Math.min(60, 8000 / text.length));
+// While the tab records, text is typed at a pace a viewer can follow, steady rather than human-like.
+// Otherwise at once, as before.
+function typingPace() {
+  return recordingOf(state.page) ? 60 : 0;
 }
 
 // check, uncheck and upload's button click it at its centre, where aimFor put the cursor.
@@ -399,7 +397,7 @@ const commands = {
     const paced = /^\s*--delay(?:=|\s+)(\S*)(?:\s+|$)/.exec(line || '');
     if (paced && !/^\d+$/.test(paced[1])) throw new Error('Usage: type --delay=<ms> [<selector>] <text>, the pause between keys, e.g. type --delay=80 #search garden hose');
     const { args, submit } = submitFlag(paced ? line.slice(paced[0].length) : line);
-    const delay = text => (paced ? Number(paced[1]) : typingPace(text));
+    const delay = () => (paced ? Number(paced[1]) : typingPace());
     // One word, or one quoted, is typed into the focused element, as playwright-cli's type does.
     const sole = splitSelector(args);
     if (sole && sole.rest === undefined) {
@@ -414,7 +412,7 @@ const commands = {
       const usage = 'type <selector> <text> types into an element, e.g. type #search garden hose';
       if (!focused) throw new Error(`Nothing on the page has focus: ${usage}`);
       if (!focused.editable) throw new Error(`The focused element, ${focused.name}, takes no text: ${usage}`);
-      await state.page.keyboard.type(sole.word, { delay: delay(sole.word) });
+      await state.page.keyboard.type(sole.word, { delay: delay() });
       if (submit) await state.page.keyboard.press('Enter');
       out.log(`Typed into the focused ${focused.name}${submit ? ', and submitted' : ''}`);
       return;
@@ -435,7 +433,7 @@ const commands = {
         getSelection().addRange(range);
       }
     }, null, { timeout }));
-    await state.page.keyboard.type(value, { delay: delay(value) });
+    await state.page.keyboard.type(value, { delay: delay() });
     if (submit) await state.page.keyboard.press('Enter');
     out.log(`Typed into${submit ? ' and submitted' : ''}: ${shown}`);
   },

package/lib/emulation.js

@@ -220,4 +220,4 @@ const commands = {
   },
 };
 
-module.exports = { commands, viewportText, EMULATE_KINDS, emulatedKinds, deviceMetrics, viewportMetrics, setEmulation, setViewport };
+module.exports = { commands, viewportText, EMULATE_KINDS, emulatedKinds, deviceMetrics, viewportMetrics, setEmulation, setViewport, settled };

package/lib/help.js

@@ -199,9 +199,9 @@ Examples: fill #name Ada Lovelace, fill "text=Your name" Ada, fill e7 Ada`,
 --submit at the end presses Enter afterwards.
 
 Keys are sent all at once. While the tab is recording (help record), they are 60ms apart, so the video
-shows the text being typed; long text goes faster, so typing never takes more than 8s, well within
-pw-repl send's 20s default. type --delay=<ms> <selector> <text> sets the gap between keys yourself, with no limit on the
-total; for long text, raise send's -t. It is a gap between keys, not a wait before starting like
+shows the text being typed. type --delay=<ms> <selector> <text> sets the gap between keys yourself. The
+whole text takes its length times the gap, and send waits 20s by default: about 300 characters at 60ms
+need a longer send -t, or a shorter --delay. It is a gap between keys, not a wait before starting like
 screenshot's --delay. A page that reacts to each key, such as search as you type, may react to each one.`,
   },
   press: { usage: 'press <key> | press <selector> <key>', summary: 'press a key (Enter, Escape, Control+A; any case), maybe on an element' },
@@ -378,7 +378,9 @@ odd width or height loses a pixel), a phone's too under emulate mobile: a Pixel
 sharp than the phone draws it. It has no pointer (cursor on draws one) and no browser toolbars,
 and a tab behind another, hidden or headless keeps recording. Set the size first with viewport
 (1280x720 fills a 16:9 player); a page that changes size while recording is fitted into the first size.
-Chrome sends a frame as the page draws, and a still page keeps its real length.
+Chrome sends a frame as the page draws, and a still page keeps its real length. Under viewport or
+emulate, a page the tab loads while recording holds the last frame until the new page's HTML is in,
+and is then recorded at the viewport's size.
 
 While a tab records, type sends keys at a pace the video can show (help type), and mousewheel scrolls in
 small eased steps over up to 1s rather than at once; fill still sets the whole

package/lib/record.js

@@ -8,6 +8,8 @@ const out = require('./output');
 const { tabState } = require('./tabstate');
 const { clock, NO_TAB, STOPPED_RECORDING, ENDED_UNSEEN } = require('./util');
 const { shellWords, splitSelector } = require('./syntax');
+const { keptSession } = require('./cdp');
+const { deviceMetrics, viewportMetrics, settled } = require('./emulation');
 
 const FPS = 25;
 const MAX_SECONDS = 3600;
@@ -126,6 +128,17 @@ function recordingOf(p) {
   return tabState(p).recording || null;
 }
 
+async function restoreMetrics(p, rec) {
+  if (rec?.finishing) return;
+  const tab = tabState(p);
+  if (!tab.viewport && !tab.emulation?.device) return;
+  const kept = await keptSession(p);
+  if (rec?.finishing) return;
+  if (tab.viewport) await viewportMetrics(kept, tab.viewport);
+  else if (tab.emulation?.device) await deviceMetrics(kept, tab.emulation.device);
+  await settled(p);
+}
+
 // The tabs recording now, for the modes they count as.
 function recordingPages() {
   if (!state.browser) return [];
@@ -137,12 +150,17 @@ async function startRecording(p, file, seconds, format) {
   // As screenshot does: a tab that has not been in front since it was emulated as a phone can
   // be drawn at the window's size.
   await p.bringToFront();
+  // Bringing an emulated tab to the front can leave Chrome's capture surface at the window's size
+  // after its next navigation. Reapply the active screen metrics on the kept session before measuring
+  // or starting this recording, then wait for the page to draw at them.
+  await restoreMetrics(p);
   // Its own session: Chrome keeps one screencast per session, and the kept session's keeps the tab drawing.
   const session = await p.context().newCDPSession(p);
   const rec = {
     page: p, file, format, exe, session, owner: state.client, startedAt: Date.now(), firstFrameAt: null,
     size: null, resizedAt: null, written: 0, dropped: 0, latest: null, ff: null, timer: null, limit: null, finishing: null,
     ffmpegError: '', starting: true, scale: 1, steps: [], step: null, stepsFile: null,
+    holdFrames: false, restarting: false, navigationVersion: 0, restoreError: null, mainFrameId: null, screencastParams: null,
   };
   // The size is the page's as the screen shows it, in CSS pixels (a phone's too, whose frames come in
   // its device pixels), and Chrome scales each frame to fit it. Not the first frame's: just after a
@@ -150,11 +168,39 @@ async function startRecording(p, file, seconds, format) {
   // frames have them (innerWidth has them; the viewport's clientWidth does not).
   const even = n => Math.max(2, Math.round(n) - (Math.round(n) % 2));
   try {
+    await session.send('Page.enable');
+    const tree = await session.send('Page.getFrameTree');
+    rec.mainFrameId = tree.frameTree.frame.id;
+    // Full document navigations reset Chrome's capture surface; SPA route changes do not.
+    session.on('Page.frameNavigated', ({ frame }) => {
+      if (frame.id !== rec.mainFrameId || rec.finishing) return;
+      rec.navigationVersion += 1;
+      const tab = tabState(p);
+      rec.holdFrames = !!(tab.viewport || tab.emulation?.device);
+    });
+    session.on('Page.domContentEventFired', async () => {
+      if (!rec.holdFrames || rec.finishing) return;
+      const version = rec.navigationVersion;
+      try {
+        await restoreMetrics(p, rec);
+        if (rec.finishing || version !== rec.navigationVersion) return;
+        await session.send('Page.stopScreencast');
+        if (rec.finishing || version !== rec.navigationVersion) return;
+        rec.holdFrames = false;
+        rec.restarting = true;
+        await session.send('Page.startScreencast', rec.screencastParams);
+      } catch (error) {
+        if (rec.finishing || p.isClosed() || version !== rec.navigationVersion) return;
+        rec.restoreError = error.message;
+        out.notice(await finishRecording(rec, `Could not restore the recording size: ${error.message}`), p);
+      }
+    });
     const { cssVisualViewport: vv } = await session.send('Page.getLayoutMetrics');
     const { result } = await session.send('Runtime.evaluate', { expression: '[innerWidth, innerHeight]', returnByValue: true });
     const [width, height] = result.value;
     rec.scale = vv.scale || 1;
     rec.size = { width: even(width * rec.scale), height: even(height * rec.scale) };
+    rec.screencastParams = { format: 'jpeg', quality: 85, maxWidth: rec.size.width, maxHeight: rec.size.height };
   } catch (error) {
     session.detach().catch(() => {});
     throw error;
@@ -180,6 +226,11 @@ async function startRecording(p, file, seconds, format) {
     if (!size) return;
     // A frame the size of the video, to a pixel (Chrome scales it to fit, keeping its shape).
     const fits = Math.abs(size.width - rec.size.width) <= 1 && Math.abs(size.height - rec.size.height) <= 1;
+    if (rec.restarting && rec.latest) {
+      if (!fits) { tick(); return; }
+      rec.restarting = false;
+    }
+    if (rec.holdFrames && rec.latest) { tick(); return; }
     if (!rec.ff) {
       rec.firstFrameAt = Date.now();
       rec.ff = spawnFfmpeg(rec);
@@ -195,7 +246,7 @@ async function startRecording(p, file, seconds, format) {
     rec.latest = image;
   });
   try {
-    await session.send('Page.startScreencast', { format: 'jpeg', quality: 85, maxWidth: rec.size.width, maxHeight: rec.size.height });
+    await session.send('Page.startScreencast', rec.screencastParams);
   } catch (error) {
     delete tabState(p).recording;
     session.detach().catch(() => {});
@@ -263,7 +314,7 @@ function finishRecording(rec, why = null, { shuttingDown = false } = {}) {
     const text = typeof result === 'string' ? result : result.text;
     // A recording that saved nothing, or that ffmpeg cut short, makes record off fail rather than
     // report it as done.
-    rec.failed = typeof result !== 'string' || !!rec.exitedEarly;
+    rec.failed = typeof result !== 'string' || !!rec.exitedEarly || !!rec.restoreError;
     const said = why ? `${why}. ${text}` : text;
     // A failure is kept unreported until record off (or record on) has failed with it. One that
     // ended by itself is unseen until record shows it, and the REPL stopping logs it for stop.

package/package.json

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