pw-repl 0.8.1 → 0.8.2

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

@@ -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.1",
+  "version": "0.8.2",
   "description": "Text REPL for driving an existing Chromium through Playwright over CDP",
   "keywords": [
     "playwright",