pw-repl 0.3.1 → 0.4.0

package/lib/commands.js

@@ -1,13 +1,14 @@
 const path = require('path');
 const fs = require('fs');
-const { state, withTimeout, onShutdown, shutdown } = require('./state');
+const { state, clientRecord, withTimeout, onShutdown, shutdown } = require('./state');
 const out = require('./output');
 const HELP = require('./help');
+const { takeOptions } = require('./cli-names');
 const { devices } = require('playwright-core');
-const { toSelector, unquote, splitSelector } = require('./syntax');
+const { toSelector, unquote, splitSelector, REF, keyName } = require('./syntax');
 
 const { printOutput, OUTPUT_LIMIT } = out;
-const SCREENSHOT_DIR = process.env.PW_SCREENSHOT_DIR || '/tmp';
+
 const COMMAND_TIMEOUT = 15000;
 const MAX_CAPTURE_EVENTS = 10000;
 const MAX_CAPTURE_TEXT = 400000;
@@ -56,7 +57,7 @@ async function startCapture(tokens) {
     out.notice('The captured tab closed, which ended the capture; capture shows what it recorded.');
   });
   const capture = {
-    page, label, startedAt, events, handlers, wake: null,
+    page, label, startedAt, events, handlers, wake: null, owner: state.client,
     get dropped() { return dropped; },
     get shortened() { return shortened; },
   };
@@ -115,7 +116,7 @@ function ensureDialogHandler(p) {
 
 // Runs ahead of the command queue (see runner.js), so it still works while
 // commands wait on the dialog; it returns its output rather than printing it.
-async function dialogCommand(args) {
+async function dialogCommand(args, selected = state.page) {
   const [action, ...rest] = (args || '').trim().split(/\s+/).filter(Boolean);
   const pages = state.browser.contexts().flatMap(c => c.pages());
   for (const p of openDialogs.keys()) if (p.isClosed() || !pages.includes(p)) openDialogs.delete(p);
@@ -126,7 +127,7 @@ async function dialogCommand(args) {
   }
   if (action !== 'accept' && action !== 'dismiss') throw new Error('Usage: dialog [accept [text] | dismiss]');
   // The selected tab's dialog, or the only one open.
-  const page = openDialogs.has(state.page) ? state.page : openDialogs.size === 1 ? [...openDialogs.keys()][0] : null;
+  const page = openDialogs.has(selected) ? selected : openDialogs.size === 1 ? [...openDialogs.keys()][0] : null;
   if (!page) throw new Error(openDialogs.size ? 'Several tabs have a dialog open; select one with tab <index|url-part> first' : 'No dialog is open.');
   const dialog = openDialogs.get(page);
   openDialogs.delete(page);
@@ -154,19 +155,20 @@ async function viewportText() {
 
 // A page restored from the back/forward cache never fires its load events
 // again, so back and forward wait only for the navigation, then briefly for
-// the page, rather than time out on a page that is already there.
+// the document to be parsed, which a restored one already is.
 async function historyStep(go, direction) {
   const before = state.page.url();
   const response = await go();
   if (response === null && state.page.url() === before) throw new Error(`No page to go ${direction} to`);
-  await state.page.waitForLoadState('domcontentloaded', { timeout: 3000 }).catch(() => {});
+  await state.page.waitForFunction(() => document.readyState !== 'loading', null, { timeout: 3000 }).catch(() => {});
 }
 
 const SCREENSHOT_DELAY_MAX = 60;
 
 function nextScreenshotPath(name) {
   const filename = name ? `screenshot-${name}` : `screenshot-${Date.now()}`;
-  return path.join(SCREENSHOT_DIR, `${filename}.png`);
+  // A REPL on a socket of its own keeps its screenshots next to it, as its log is.
+  return path.join(process.env.PW_SCREENSHOT_DIR || state.ownDir || '/tmp', `${filename}.png`);
 }
 
 // Per page: a CDP session's emulation applies to the page it is attached to
@@ -196,7 +198,7 @@ async function setNetwork(p, setting) {
     downloadThroughput: setting?.down ? setting.down * 125 : -1,
     uploadThroughput: setting?.up ? setting.up * 125 : -1,
   });
-  if (setting) networkChanged.set(p, setting); else networkChanged.delete(p);
+  if (setting) networkChanged.set(p, { ...setting, owner: state.client }); else networkChanged.delete(p);
 }
 
 function networkText(setting) {
@@ -212,10 +214,18 @@ function emulatedKinds(e) {
   return [e?.device && 'mobile', e?.scheme, e?.locale && 'locale', e?.timezone && 'timezone'].filter(Boolean);
 }
 
+const DEVICES_SHOWN = 20;
+
 function deviceNamed(name) {
-  const found = Object.keys(devices).find(d => d.toLowerCase() === name.toLowerCase());
-  if (!found) throw new Error(`No device ${JSON.stringify(name)}; names are Playwright's, e.g. Pixel 7, iPhone 13, iPad Mini, Galaxy S9+`);
-  return found;
+  const names = Object.keys(devices);
+  const found = names.find(d => d.toLowerCase() === name.toLowerCase());
+  if (found) return found;
+  // The names that have every word typed, so a near miss finds the exact name.
+  const words = name.toLowerCase().split(/\s+/);
+  const close = names.filter(d => !/ landscape$/.test(d) && words.every(w => d.toLowerCase().includes(w)));
+  if (!close.length) throw new Error(`No device ${JSON.stringify(name)}; names are Playwright's, e.g. Pixel 7, iPhone 13, iPad Mini, Galaxy S9+`);
+  const more = close.length > DEVICES_SHOWN ? `, and ${close.length - DEVICES_SHOWN} more` : '';
+  throw new Error(`No device ${JSON.stringify(name)}; matching: ${close.slice(0, DEVICES_SHOWN).join(', ')}${more} (each also as "<name> landscape")`);
 }
 
 function deviceText(name) {
@@ -225,6 +235,14 @@ function deviceText(name) {
 
 // Sends only what changed. Chrome takes the user agent and the languages
 // together, so a change to either sends both.
+function deviceMetrics(session, name) {
+  const d = devices[name];
+  return session.send('Emulation.setDeviceMetricsOverride', {
+    width: d.viewport.width, height: d.viewport.height, deviceScaleFactor: d.deviceScaleFactor, mobile: d.isMobile,
+    screenWidth: d.screen?.width || d.viewport.width, screenHeight: d.screen?.height || d.viewport.height,
+  });
+}
+
 async function setEmulation(p, next) {
   const session = await keptSession(p);
   const previous = emulations.get(p) || {};
@@ -232,10 +250,7 @@ async function setEmulation(p, next) {
   if (next.device !== previous.device) {
     const d = devices[next.device];
     if (d) {
-      await send('Emulation.setDeviceMetricsOverride', {
-        width: d.viewport.width, height: d.viewport.height, deviceScaleFactor: d.deviceScaleFactor, mobile: d.isMobile,
-        screenWidth: d.screen?.width || d.viewport.width, screenHeight: d.screen?.height || d.viewport.height,
-      });
+      await deviceMetrics(session, next.device);
     } else {
       await send('Emulation.clearDeviceMetricsOverride');
     }
@@ -253,7 +268,7 @@ async function setEmulation(p, next) {
   if (next.locale !== previous.locale) await send('Emulation.setLocaleOverride', next.locale ? { locale: next.locale } : {});
   if (next.timezone !== previous.timezone) await send('Emulation.setTimezoneOverride', { timezoneId: next.timezone || '' });
   if (next.scheme !== previous.scheme) await send('Emulation.setEmulatedMedia', { features: next.scheme ? [{ name: 'prefers-color-scheme', value: next.scheme }] : [] });
-  if (emulatedKinds(next).length) emulations.set(p, next); else emulations.delete(p);
+  if (emulatedKinds(next).length) emulations.set(p, { ...next, owner: state.client }); else emulations.delete(p);
 }
 
 function showEmulation() {
@@ -326,14 +341,22 @@ function routeKind(how, rest, usage) {
   if (/^\d{3}$/.test(how)) {
     const status = Number(how);
     if (status < 200 || status > 599) throw new Error('Status must be from 200 to 599');
-    if (!rest) throw new Error(usage);
-    parseJson(rest, 'Body');
-    const preview = rest.length > ROUTE_PREVIEW ? `${rest.slice(0, ROUTE_PREVIEW)}…` : rest;
+    // JSON unless its type is given, so a typo in the JSON is not served as text.
+    const typed = /^--content-type=("(?:[^"\\]|\\.)*"|'[^']*'|\S+)(?:\s+([\s\S]*))?$/.exec(rest || '');
+    const body = typed ? typed[2] || '' : rest || '';
+    if (!typed && body) {
+      try { JSON.parse(body); } catch (error) {
+        throw new Error(`Body is not valid JSON: ${error.message}; for another kind, give its type: route <url-glob> <status> --content-type=text/plain <body>`);
+      }
+    }
+    // Quoted when it has a parameter: --content-type="text/html; charset=utf-8".
+    const contentType = typed ? unquote(typed[1]) : body ? 'application/json' : undefined;
+    const preview = body.length > ROUTE_PREVIEW ? `${body.slice(0, ROUTE_PREVIEW)}…` : body;
     return {
-      text: `${status} ${preview}`,
+      text: `${status}${typed ? ` (${contentType})` : ''}${preview ? ` ${preview}` : ''}`,
       async handle(r, req, tag) {
         markChanged(req, status, 'faked');
-        await r.fulfill({ status, contentType: 'application/json', body: rest });
+        await r.fulfill({ status, contentType, body });
         out.notice(`Faked: ${tag()} -> ${status}`);
       },
     };
@@ -385,7 +408,8 @@ function routeKind(how, rest, usage) {
 function listRoutes() {
   const routes = routesFor(state.page);
   const forms = [
-    ['route <url-glob> <status> <json-body>', 'answer it with this status and JSON'],
+    ['route <url-glob> <status> [json-body]', 'answer it with this status and JSON'],
+    ['route <url-glob> <status> --content-type=<type> <body>', 'or with a body of another type'],
     ['route <url-glob> patch <json>', 'let it through, then change its JSON'],
     ['route <url-glob> delay <seconds>', 'hold it, then let it through'],
     ['route <url-glob> abort', 'fail it as if the connection broke'],
@@ -438,6 +462,8 @@ const requestEntries = new WeakMap();
 const loadedAt = new WeakMap();
 // Tabs this REPL opened with tab new.
 const openedTabs = new WeakSet();
+// page -> the client that opened it (null: the prompt, or a sender without a name).
+const tabOwners = new WeakMap();
 
 function clipText(text) {
   return text.length > MAX_EVENT_TEXT ? `${text.slice(0, MAX_EVENT_TEXT)}…` : text;
@@ -450,6 +476,17 @@ function consoleText(msg) {
   return /^Failed to load resource/.test(text) && url ? `${text}: ${url}` : text;
 }
 
+// A level includes the ones above it, as playwright-cli's console [min-level]
+// does, which sorts the types the same way; a page error is an error.
+const CONSOLE_LEVELS = ['error', 'warning', 'info', 'debug'];
+const DEBUG_TYPES = new Set(['clear', 'debug', 'endGroup', 'profile', 'profileEnd', 'startGroup', 'startGroupCollapsed', 'trace']);
+
+function consoleLevel(type) {
+  if (type === 'error' || type === 'assert' || type === 'pageerror') return 'error';
+  if (type === 'warning') return 'warning';
+  return DEBUG_TYPES.has(type) ? 'debug' : 'info';
+}
+
 function keep(log, entry) {
   log.push(entry);
   if (log.length > RECENT_MAX) log.shift();
@@ -460,12 +497,14 @@ function ensureRecentLog(p) {
   const log = [];
   const logs = [];
   let nextId = 1;
+  let newDocument = false;
   recentLogs.set(p, log);
   consoleLogs.set(p, logs);
   p.on('request', req => {
     let navigation = false;
     try { navigation = req.isNavigationRequest() && req.frame() === p.mainFrame(); } catch {}
     const entry = { id: nextId++, t: Date.now(), method: req.method(), url: req.url(), type: req.resourceType(), status: 'pending', ms: null, response: null, navigation };
+    if (navigation) newDocument = true;
     requestEntries.set(req, entry);
     keep(log, entry);
   });
@@ -485,8 +524,19 @@ function ensureRecentLog(p) {
     } catch {}
     finish(req, changedRequests.has(req) ? `${status} ${changedRequests.get(req)}` : status, res);
   });
-  p.on('requestfailed', req => finish(req, `failed: ${req.failure()?.errorText || 'unknown'}`));
+  p.on('requestfailed', req => {
+    finish(req, `failed: ${req.failure()?.errorText || 'unknown'}`);
+    // A page that never loaded: the app's next route change is not a load either.
+    if (requestEntries.get(req)?.navigation) newDocument = false;
+  });
   p.on('load', () => loadedAt.set(p, Date.now()));
+  // A page load, marked among the messages it comes between; it ages out with them. Only a new
+  // document counts: an app's own route change (pushState, a hash) navigates without loading.
+  p.on('framenavigated', frame => {
+    if (frame !== p.mainFrame() || !newDocument) return;
+    newDocument = false;
+    keep(logs, { t: Date.now(), type: 'load', text: frame.url() });
+  });
   p.on('console', msg => keep(logs, { t: Date.now(), type: msg.type(), text: clipText(consoleText(msg)) }));
   // Uncaught exceptions never reach the console event.
   p.on('pageerror', error => keep(logs, { t: Date.now(), type: 'pageerror', text: clipText(error.stack || error.message) }));
@@ -516,8 +566,9 @@ const WATCH_REQUESTS_SHOWN = 5;
 const WATCH_HIDDEN_TYPES = new Set([...RECENT_HIDDEN_TYPES, 'script']);
 const TYPING_BACKDATE_MAX = 60000;
 const PAGE_ACTIONS = new Set(['click', 'check', 'uncheck', 'select', 'fill', 'type', 'press', 'submit']);
-// Playwright refuses a second binding with the same name, so a retry must not re-register it.
+// page -> its binding's record function; the binding is added once per tab.
 const watchBindings = new WeakMap();
+const WATCH_BINDING = '__pwReplWatch';
 
 // Runs in the page. Describes elements the way snapshot does: role and name.
 const WATCH_SCRIPT = `(() => {
@@ -562,7 +613,7 @@ const WATCH_SCRIPT = `(() => {
   const send = (action, el, extra, since) => {
     // Typing still waiting for its pause is recorded first, so the steps stay in order.
     if (action !== 'type') for (const field of [...pending.keys()]) flushTyping(field);
-    if (typeof window.__pwReplWatch === 'function') window.__pwReplWatch({ action, target: el ? describe(el) : 'page', extra: extra || '', since: since || 0 });
+    if (typeof window.__pwReplWatch === 'function') window.__pwReplWatch(JSON.stringify({ action, target: el ? describe(el) : 'page', extra: extra || '', since: since || 0 }));
   };
   document.addEventListener('click', e => {
     const el = e.target.closest ? (e.target.closest(INTERACTIVE) || e.target) : e.target;
@@ -777,12 +828,22 @@ async function startWatching(p, changes = false, live = false) {
       scheduleSettle(p, created);
     };
     // The page can call the binding itself, so only the page-side actions are
-    // accepted from it, as plain strings; navigations come from here.
+    // accepted from it, as plain strings; navigations come from here. A CDP
+    // binding of its own, not Playwright's exposeBinding: every Playwright
+    // client shares that one, so another tool attached to the browser would
+    // answer each call with a "not exposed" error thrown into the page.
     if (!watchBindings.has(p)) {
       const binding = { record: null };
-      await p.exposeBinding('__pwReplWatch', (_source, event) => {
-        if (binding.record && event && PAGE_ACTIONS.has(event.action)) binding.record(event.action, String(event.target || ''), String(event.extra || ''), event.since);
+      const session = await keptSession(p);
+      session.on('Runtime.bindingCalled', ({ name, payload }) => {
+        if (name !== WATCH_BINDING || !binding.record) return;
+        let event;
+        try { event = JSON.parse(payload); } catch { return; }
+        if (event && PAGE_ACTIONS.has(event.action)) binding.record(event.action, String(event.target || ''), String(event.extra || ''), event.since);
       });
+      // Calls are reported only to a session with Runtime on.
+      await session.send('Runtime.enable');
+      await session.send('Runtime.addBinding', { name: WATCH_BINDING });
       watchBindings.set(p, binding);
     }
     watchBindings.get(p).record = record;
@@ -814,6 +875,51 @@ async function startWatching(p, changes = false, live = false) {
   watch.on = true;
 }
 
+// Set by watch on --next-tab: the next tab to open (by anyone), or the next
+// whose URL contains part, is watched from its first page and selected. Each
+// new tab is watched from the moment it opens, since its first page may load
+// at once; one that turns out not to be it is left as it was.
+let nextTab = null;
+const BROWSER_PAGE = /^(?:about|chrome|chrome-search|devtools|edge):/;
+
+function waitingText() {
+  return `Waiting to watch the next tab that opens${nextTab.part ? ` with a URL containing ${nextTab.part}` : ''}`;
+}
+
+function watchNewTab(p) {
+  const want = nextTab;
+  startWatching(p, want.changes, want.live).then(() => {
+    watches.get(p).owner = want.client;
+    const onNavigate = frame => {
+      if (frame !== p.mainFrame() || BROWSER_PAGE.test(frame.url())) return;
+      const url = frame.url();
+      p.off('framenavigated', onNavigate);
+      const watch = watches.get(p);
+      if (nextTab !== want || (want.part && !url.includes(want.part))) {
+        stopWatching(p, watch);
+        watch.events.length = 0;
+        return;
+      }
+      nextTab = null;
+      // Its record starts at its own page, not the new-tab page before it.
+      const first = watch.events.findIndex(e => e.action === 'navigate' && e.target === clipText(url));
+      if (first > 0) watch.events.splice(0, first);
+      // A page that loaded before the watch was ready: its step is added, at its request's time.
+      if (first < 0) {
+        const request = (recentLogs.get(p) || []).filter(e => e.navigation && e.url === url).pop();
+        watch.events.unshift({ seq: watch.nextSeq++, t: request ? request.t : Date.now(), action: 'navigate', target: clipText(url), extra: '' });
+      }
+      // Selected for the client that asked, whoever's command runs now.
+      const record = clientRecord(want.client);
+      if (record.page !== p) { record.previousPage = record.page; record.page = p; }
+      out.notice(`Watching the new tab ${url}, now the selected tab (watch on --next-tab)`);
+    };
+    p.on('framenavigated', onNavigate);
+    // Opened on its page already, as a link to a new tab does.
+    if (p.url() && !BROWSER_PAGE.test(p.url())) onNavigate(p.mainFrame());
+  }).catch(error => out.notice(`Could not watch the new tab ${p.url()}: ${error.message}`));
+}
+
 // For each step of a watch, the requests made between it and the next step.
 function requestsByStep(watch, p = state.page) {
   const requests = (recentLogs.get(p) || []).filter(r => !WATCH_HIDDEN_TYPES.has(r.type) && !r.url.startsWith('chrome-extension://'));
@@ -880,6 +986,8 @@ function listModes() {
   const all = state.browser.contexts().flatMap(c => c.pages());
   state.tabListing = all.slice();
   const on = all.map((p, i) => [p, i, activeModes(p)]).filter(([, , modes]) => modes.length);
+  if (nextTab) out.log(`${waitingText()} (watch off stops waiting)${nextTab.client ? `, for ${nextTab.client}` : ''}${on.length ? '\n' : ''}`);
+  if (!on.length && nextTab) return;
   if (!on.length) {
     out.log('No modes are on in any tab.');
     out.log(hints([
@@ -892,28 +1000,54 @@ function listModes() {
     return;
   }
   const width = Math.max(...on.map(([p, i]) => `[${i}] ${p.url()}`.length));
-  for (const [p, i, modes] of on) out.log(`${p === state.page ? '*' : ' '} ${`[${i}] ${p.url()}`.padEnd(width)}  (${modes.join(' ')})`);
+  for (const [p, i, modes] of on) {
+    out.log(`${p === state.page ? '*' : ' '} ${`[${i}] ${p.url()}`.padEnd(width)}  (${modes.join(' ')})`);
+    const owners = modeOwners(p);
+    if (owners.some(([owner]) => owner)) out.log(`      on by ${ownersText(owners)}`);
+  }
   out.log(hints([['modes off', 'turn them all off']]));
 }
 
+// Who turned on each mode in a tab: [client, what], client null for the prompt or an unnamed sender.
+function modeOwners(p) {
+  const owners = [];
+  const watch = watches.get(p);
+  if (watch?.on) owners.push([watch.owner ?? null, 'watch']);
+  const network = networkChanged.get(p);
+  if (network) owners.push([network.owner ?? null, network.offline ? 'network:off' : 'network:slow']);
+  const emulated = emulations.get(p);
+  if (emulated) owners.push([emulated.owner ?? null, 'emulate']);
+  for (const [glob, route] of pageRoutes.get(p) || []) owners.push([route.owner ?? null, `route ${glob}`]);
+  if (cap && cap.page === p) owners.push([cap.owner ?? null, 'capture']);
+  return owners;
+}
+
+function ownersText(owners) {
+  const byOwner = new Map();
+  for (const [owner, what] of owners) byOwner.set(owner, [...(byOwner.get(owner) || []), what]);
+  return [...byOwner].map(([owner, whats]) => `${owner || 'unnamed'}: ${whats.join(', ')}`).join('; ');
+}
+
 // Turns off everything the REPL turned on, in every tab: nothing it leaves
-// behind keeps acting on someone's browser.
-async function allModesOff() {
+// behind keeps acting on someone's browser. mine: only what the running client turned on.
+async function allModesOff(mine = false) {
   const all = state.browser.contexts().flatMap(c => c.pages());
+  const ours = owner => !mine || (owner ?? null) === state.client;
   let any = false;
   let failed = 0;
+  if (nextTab && ours(nextTab.client)) { nextTab = null; any = true; out.log('Stopped waiting to watch a new tab'); }
   // A tab that fails (e.g. it crashed) must not keep the others' modes on.
   for (const p of all) {
     const done = [];
     let problem = null;
     try {
       const watch = watches.get(p);
-      if (watch?.on) { stopWatching(p, watch); done.push('watch off'); }
-      if (cap && cap.page === p) { endCapture(); done.push('capture off (capture shows it)'); }
-      const globs = [...(pageRoutes.get(p)?.keys() || [])];
+      if (watch?.on && ours(watch.owner)) { stopWatching(p, watch); done.push('watch off'); }
+      if (cap && cap.page === p && ours(cap.owner)) { endCapture(); done.push('capture off (capture shows it)'); }
+      const globs = [...(pageRoutes.get(p) || [])].filter(([, route]) => ours(route.owner)).map(([glob]) => glob);
       if (globs.length) { await unroute(p, globs); done.push(`${globs.length} route${globs.length === 1 ? '' : 's'} removed`); }
-      if (networkChanged.has(p)) { await setNetwork(p, null); done.push('network on'); }
-      if (emulations.has(p)) { await setEmulation(p, {}); done.push('emulate off'); }
+      if (networkChanged.has(p) && ours(networkChanged.get(p).owner)) { await setNetwork(p, null); done.push('network on'); }
+      if (emulations.has(p) && ours(emulations.get(p).owner)) { await setEmulation(p, {}); done.push('emulate off'); }
     } catch (error) {
       problem = error.message;
     }
@@ -921,7 +1055,7 @@ async function allModesOff() {
     if (problem) { failed += 1; out.error(`${p.url()}: could not turn everything off: ${problem}`); }
   }
   if (failed) throw new Error(`Modes may still be on in ${failed} tab${failed === 1 ? '' : 's'}; modes lists them`);
-  if (!any) out.log('No modes were on.');
+  if (!any) out.log(mine ? 'None of your modes were on.' : 'No modes were on.');
 }
 
 // The type a page sees for a file it is given, from its extension.
@@ -944,6 +1078,31 @@ function soleSelector(args, usage) {
   return toSelector(text);
 }
 
+const MODIFIERS = ['Alt', 'Control', 'ControlOrMeta', 'Meta', 'Shift'];
+
+// click <selector> [button] [--modifiers=<keys>], as playwright-cli's click
+// takes them. The button is read only after a ref or a quoted selector, so
+// click text=Turn right is still one selector.
+function clickArgs(args, usage) {
+  // Found outside quotes only, so a quoted selector keeps whatever is in it.
+  const { found, rest: text } = takeOptions((args || '').trim(), { modifiers: 'value' });
+  const modifiers = found.flatMap(o => (o.value || '').split(',').filter(Boolean).map(keyName));
+  const unknown = modifiers.find(m => !MODIFIERS.includes(m));
+  if (unknown) throw new Error(`Not a modifier: ${unknown}; they are ${MODIFIERS.join(', ')}`);
+  const parsed = splitSelector(text);
+  const button = parsed && /^(?:left|right|middle)$/.test(parsed.rest || '') && (REF.test(parsed.word) || /^["']/.test(text)) ? parsed.rest : null;
+  const selector = button ? parsed.selector : soleSelector(text, usage);
+  const options = { ...(button ? { button } : {}), ...(modifiers.length ? { modifiers } : {}) };
+  return { selector, shown: args.trim(), options };
+}
+
+// A trailing --submit, as playwright-cli's fill and type take: Enter afterwards.
+function submitFlag(args) {
+  if (/(?:^|\s)--submit\s/.test((args || '').trim())) throw new Error('--submit goes at the end of the line');
+  const match = /^([\s\S]*?)\s+--submit$/.exec((args || '').trim());
+  return match ? { args: match[1], submit: true } : { args, submit: false };
+}
+
 function selectorAndValue(args, usage, example) {
   const parsed = splitSelector(args);
   if (!parsed || parsed.rest === undefined) {
@@ -1033,16 +1192,22 @@ const SNAPSHOT_HINT_LINES = 60;
 // 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.
+// needle: text to find in any case, or a RegExp.
 function grepSnapshot(text, needle) {
-  const lower = needle.toLowerCase();
+  const lower = typeof needle === 'string' ? needle.toLowerCase() : null;
+  const matches = line => (lower === null ? needle.test(line) : line.toLowerCase().includes(lower));
   const stack = [];
   const hits = [];
   const label = line => line.trim().replace(/^- /, '').replace(/:$/, '').replace(/^'(.*)'$/, '$1');
   for (const line of text.split('\n')) {
     const indent = line.length - line.trimStart().length;
     while (stack.length && stack[stack.length - 1].indent >= indent) stack.pop();
-    if (line.toLowerCase().includes(lower)) {
-      const path = stack.filter(a => !/^generic(?: \[|$)/.test(a.label)).map(a => a.label.replace(/ \[ref=[^\]]+\]/g, ''));
+    if (matches(line)) {
+      const around = stack.filter(a => !/^generic(?: \[|$)/.test(a.label));
+      // A hit with no ref of its own (text) keeps the ref of what holds it, so
+      // snapshot <ref> can show what sits beside it: the value next to a label.
+      const own = /\[ref=/.test(line);
+      const path = around.map((a, i) => (!own && i === around.length - 1 ? a.label : a.label.replace(/ \[ref=[^\]]+\]/g, '')));
       hits.push([...path, label(line)].join(' › '));
     }
     stack.push({ indent, label: label(line) });
@@ -1050,6 +1215,17 @@ function grepSnapshot(text, needle) {
   return hits;
 }
 
+// For --regex, as playwright-cli's find --regex and requests --filter take one.
+function regexOf(pattern) {
+  try { return new RegExp(pattern); } catch (error) { throw new Error(`Not a regular expression: ${error.message}`); }
+}
+
+// A pattern without its quotes, and with \" inside them as ", as snapshot
+// reads one: other backslashes are the regexp's own (\d).
+function patternText(text) {
+  return text.replace(/^(["'])(.*)\1$/, '$2').replace(/\\"/g, '"');
+}
+
 // Local time with its offset (18:16:15.721-06:00), so it reads against the
 // user's clock and is still unambiguous.
 function clock(t) {
@@ -1090,7 +1266,16 @@ function discardCapture() {
 // person using the browser; Playwright's newPage would bring it to the front.
 const OPEN_TIMEOUT = 10000;
 
+// True while tab new opens a tab: watch on --next-tab waits for one someone
+// else opens, not one a client of the REPL opens for itself.
+let opening = false;
+
 async function openTab() {
+  opening = true;
+  try { return await openOwnTab(); } finally { opening = false; }
+}
+
+async function openOwnTab() {
   const ctx = state.browser.contexts()[0];
   let opened = null;
   const session = await state.browser.newBrowserCDPSession().catch(() => null);
@@ -1105,6 +1290,7 @@ async function openTab() {
   // A browser that cannot open one in the background (e.g. some headless ones) opens it as usual.
   if (!opened) opened = await ctx.newPage();
   openedTabs.add(opened);
+  tabOwners.set(opened, state.client);
   return opened;
 }
 
@@ -1148,11 +1334,17 @@ async function listTabs() {
     // URL first on its own line: it is what distinguishes otherwise
     // identically titled tabs, and titles wrap less badly when indented.
     if (i) out.log('');
-    out.log(`${marker} [${i}] ${p.url()}`);
+    out.log(`${marker} [${i}] ${p.url()}${tabOwners.get(p) ? `  (opened by ${tabOwners.get(p)})` : ''}`);
     out.log(`        ${JSON.stringify(title)}`);
   }
 }
 
+// A function written out (el => ..., function (el) {...}), as one expression.
+function isFunctionText(text) {
+  if (!/^\s*(?:async\s+)?(?:function\b|\([^)]*\)\s*=>|[\w$]+\s*=>)/.test(text)) return false;
+  try { new Function(`return (${text}\n);`); return true; } catch { return false; }
+}
+
 const commands = {
   async tab(args) {
     const trimmed = (args || '').trim();
@@ -1253,15 +1445,15 @@ const commands = {
   },
 
   async click(args) {
-    const selector = soleSelector(args, 'click <selector>');
-    await onElement(selector, () => state.page.click(selector, { timeout: 5000 }));
-    out.log(`Clicked: ${args.trim()}`);
+    const { selector, shown, options } = clickArgs(args, 'click <selector> [left|right|middle] [--modifiers=<key>[,<key>]]');
+    await onElement(selector, () => state.page.click(selector, { ...options, timeout: 5000 }));
+    out.log(`Clicked: ${shown}`);
   },
 
   async dblclick(args) {
-    const selector = soleSelector(args, 'dblclick <selector>');
-    await onElement(selector, () => state.page.dblclick(selector, { timeout: 5000 }));
-    out.log(`Double-clicked: ${args.trim()}`);
+    const { selector, shown, options } = clickArgs(args, 'dblclick <selector> [left|right|middle] [--modifiers=<key>[,<key>]]');
+    await onElement(selector, () => state.page.dblclick(selector, { ...options, timeout: 5000 }));
+    out.log(`Double-clicked: ${shown}`);
   },
 
   async hover(args) {
@@ -1270,14 +1462,36 @@ const commands = {
     out.log(`Hovered: ${args.trim()}`);
   },
 
-  async fill(args) {
-    const { selector, value, shown } = selectorAndValue(args, 'fill <selector> <value>', 'fill #name Ada Lovelace');
+  async fill(line) {
+    const { args, submit } = submitFlag(line);
+    const { selector, value, shown } = selectorAndValue(args, 'fill <selector> <value> [--submit]', 'fill #name Ada Lovelace');
     await onElement(selector, () => state.page.fill(selector, value, { timeout: 5000 }));
-    out.log(`Filled: ${shown}`);
+    if (submit) await state.page.press(selector, 'Enter', { timeout: 5000 });
+    out.log(`Filled${submit ? ' and submitted' : ''}: ${shown}`);
   },
 
-  async type(args) {
-    const { selector, value, shown } = selectorAndValue(args, 'type <selector> <text>', 'type #search garden hose');
+  async type(line) {
+    const { args, submit } = submitFlag(line);
+    // 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) {
+      // Named, since it may not be the element meant; one that takes no text is refused.
+      const focused = await state.page.evaluate(() => {
+        const el = document.activeElement;
+        if (!el || el === document.body || el === document.documentElement) return null;
+        const editable = el.isContentEditable || el.matches('textarea, input:not([type=checkbox],[type=radio],[type=button],[type=submit],[type=reset],[type=image],[type=file],[type=range],[type=color],[type=hidden])');
+        const id = el.id ? `#${el.id}` : el.name ? `[name=${el.name}]` : el.placeholder ? `[placeholder="${el.placeholder}"]` : '';
+        return { editable, name: `${el.tagName.toLowerCase()}${id}` };
+      });
+      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);
+      if (submit) await state.page.keyboard.press('Enter');
+      out.log(`Typed into the focused ${focused.name}${submit ? ', and submitted' : ''}`);
+      return;
+    }
+    const { selector, value, shown } = selectorAndValue(args, 'type [<selector>] <text> [--submit]', 'type #search garden hose');
     // Typed after what the field already holds, as someone clicking into it
     // at the end would; focusing it alone leaves the caret at the start.
     await onElement(selector, () => state.page.locator(selector).first().evaluate(el => {
@@ -1293,18 +1507,19 @@ const commands = {
       }
     }, null, { timeout: 5000 }));
     await state.page.keyboard.type(value);
-    out.log(`Typed into: ${shown}`);
+    if (submit) await state.page.keyboard.press('Enter');
+    out.log(`Typed into${submit ? ' and submitted' : ''}: ${shown}`);
   },
 
   async press(args) {
     const parsed = splitSelector(args);
     if (!parsed) throw new Error('Usage: press <key> | press <selector> <key>, e.g. press Enter or press #name Enter');
     if (parsed.rest === undefined) {
-      await state.page.keyboard.press(parsed.word);
-      out.log(`Pressed: ${parsed.word}`);
+      await state.page.keyboard.press(keyName(parsed.word));
+      out.log(`Pressed: ${keyName(parsed.word)}`);
       return;
     }
-    const key = unquote(parsed.rest);
+    const key = keyName(unquote(parsed.rest));
     await onElement(parsed.selector, () => state.page.press(parsed.selector, key, { timeout: 5000 }));
     out.log(`Pressed ${key} on ${parsed.word}`);
   },
@@ -1332,7 +1547,12 @@ const commands = {
   // container, where the paths mean nothing.
   async upload(args) {
     const parsed = splitSelector(args);
-    if (!parsed || parsed.rest === undefined) throw new Error('Usage: upload <selector> <file>..., e.g. upload "input[type=file]" photo.png; quote a path with spaces');
+    // playwright-cli's upload <file> answers a file picker a click opened. Here
+    // the input is named instead: catching pickers would catch the person's too.
+    const usage = 'Usage: upload <selector> <file>..., naming the file input (or the button that opens it) first, e.g. upload e12 ./doc.pdf; quote a path with spaces';
+    if (!parsed || parsed.rest === undefined) throw new Error(usage);
+    // A path, not a selector; // starts an XPath.
+    if (/^(?:\.{1,2}\/|\/(?!\/)|~)/.test(parsed.word) || (!REF.test(parsed.word) && fs.statSync(path.resolve(parsed.word), { throwIfNoEntry: false })?.isFile())) throw new Error(`${parsed.word} is a file, not the input: ${usage.slice(7)}`);
     const files = [...parsed.rest.matchAll(/"((?:[^"\\]|\\.)*)"|'([^']*)'|(\S+)/g)].map(m => path.resolve(m[1] !== undefined ? m[1].replace(/\\(.)/g, '$1') : m[2] ?? m[3]));
     const payloads = files.map(file => {
       let buffer;
@@ -1442,14 +1662,21 @@ const commands = {
   },
 
   async screenshot(args) {
-    const usage = 'Usage: screenshot [--full] [--delay|-d <seconds>] [name]\nNames may contain letters, digits, underscores, and hyphens.';
-    const tokens = (args || '').trim().split(/\s+/).filter(Boolean);
+    const usage = 'Usage: screenshot [<ref>] [--full] [--delay|-d <seconds>] [name | --filename=<file>]\nNames may contain letters, digits, underscores, and hyphens.';
+    // The file first: a path may be quoted, with spaces in it.
+    let file = null;
+    const rest = (args || '').replace(/(?:^|\s)--filename(?:=|\s+)("(?:[^"\\]|\\.)*"|'[^']*'|\S+)/, (_, value) => { file = unquote(value); return ' '; });
+    const tokens = rest.trim().split(/\s+/).filter(Boolean);
     let full = false;
     let delay = 0;
+    let ref = null;
     const names = [];
     for (let i = 0; i < tokens.length; i++) {
       const token = tokens[i];
-      if (token === '--full') { full = true; continue; }
+      // --full-page and --filename are playwright-cli's.
+      if (token === '--full' || token === '--full-page') { full = true; continue; }
+      if (token === '--filename' || token.startsWith('--filename=')) throw new Error(usage);
+      if (!ref && !names.length && REF.test(token)) { ref = token; continue; }
       if (token === '--delay' || token === '-d') {
         const value = tokens[++i];
         // Capped low on purpose: a timed shot is human-in-the-loop, and a typo
@@ -1460,7 +1687,7 @@ const commands = {
       }
       names.push(token);
     }
-    if (names.length > 1 || (names[0] && !/^[a-zA-Z0-9_-]+$/.test(names[0]))) throw new Error(usage);
+    if (names.length > 1 || (names[0] && !/^[a-zA-Z0-9_-]+$/.test(names[0])) || (file && names.length) || (ref && full)) throw new Error(usage);
     const name = names[0] || null;
     // Counted down out loud so a watcher can time a hover or menu state, and so
     // the wait is distinguishable from a hung command in a tmux capture.
@@ -1469,11 +1696,33 @@ const commands = {
       await state.page.waitForTimeout(1000);
     }
     // Named after the countdown so a default filename timestamps the capture.
-    const filepath = nextScreenshotPath(name);
+    // A file given is relative to the REPL's folder; pw-repl send makes it the sender's.
+    const filepath = file ? path.resolve(file) : nextScreenshotPath(name);
+    const type = /\.jpe?g$/i.test(filepath) ? 'jpeg' : 'png';
+    // Checked before the tab is brought to the front, which can move someone's view.
+    if (fs.existsSync(filepath)) throw new Error(`Screenshot already exists: ${filepath}`);
+    if (!fs.existsSync(path.dirname(filepath))) throw new Error(`No folder ${path.dirname(filepath)} to save ${path.basename(filepath)} in`);
     // Chrome does not draw a tab that is not in front, and tabs open in the
     // background, so the tab is brought to the front for the shot.
     await state.page.bringToFront();
-    const image = await state.page.screenshot({ fullPage: full });
+    let image;
+    try {
+      if (ref) {
+        const selector = toSelector(ref);
+        image = await onElement(selector, () => state.page.locator(selector).screenshot({ type, timeout: 5000 }));
+      } else {
+        image = await state.page.screenshot({ fullPage: full, type });
+      }
+    } finally {
+      // Playwright's screenshot resets the screen size and pixel ratio it
+      // finds; an emulated phone's are set again.
+      const device = emulations.get(state.page)?.device;
+      if (device) {
+        const session = await keptSession(state.page);
+        await session.send('Emulation.clearDeviceMetricsOverride');
+        await deviceMetrics(session, device);
+      }
+    }
     try {
       fs.writeFileSync(filepath, image, { flag: 'wx', mode: 0o600 });
     } catch (error) {
@@ -1488,9 +1737,11 @@ const commands = {
     const full = /^--full(?:\s|$)/.test(rest);
     if (full) rest = rest.slice(6).trim();
     let needle = null;
-    if (/^--grep(?:\s|$)/.test(rest)) {
-      needle = rest.slice(6).trim().replace(/^(["'])(.*)\1$/, '$2').replace(/\\"/g, '"');
-      if (!needle) throw new Error('Usage: snapshot [--full] --grep <text>');
+    const grep = /^--(grep|regex)(?:\s|$)/.exec(rest);
+    if (grep) {
+      needle = rest.slice(grep[0].length).trim().replace(/^(["'])(.*)\1$/, '$2').replace(/\\"/g, '"');
+      if (!needle) throw new Error(`Usage: snapshot [--full] --${grep[1]} <${grep[1] === 'grep' ? 'text' : 'pattern'}>`);
+      if (grep[1] === 'regex') needle = regexOf(needle);
       rest = '';
     }
     // Playwright's labels are e5, or frame-prefixed like f1e5 in newer versions.
@@ -1537,6 +1788,8 @@ const commands = {
     if (value === 'off') {
       await setEmulation(state.page, { ...current, [key]: undefined });
       out.log(`Stopped emulating ${key === 'scheme' ? 'the color scheme' : what} in the selected tab`);
+      // As when turned on: the page keeps what it read at load until it loads again.
+      if ((what === 'mobile' || what === 'locale') && state.page.url() !== 'about:blank') out.log('The page sees its own user agent, touch and languages again from its next load: reload to see all of it.');
       return;
     }
     let next;
@@ -1557,8 +1810,8 @@ const commands = {
     await setEmulation(state.page, { ...current, [key]: next });
     const shown = what === 'mobile' ? `mobile (${deviceText(next)})` : what === 'dark' || what === 'light' ? `${what} mode` : `${what} ${next}`;
     out.log(`Emulating ${shown} in the selected tab`);
-    // The page reads these when it loads; the rest applies at once.
-    if (what === 'mobile' || what === 'locale') out.log('The page sees its user agent, touch and languages from its next load: reload to see all of it.');
+    // The page reads these when it loads; the rest applies at once. A blank tab has nothing to reload.
+    if ((what === 'mobile' || what === 'locale') && state.page.url() !== 'about:blank') out.log('The page sees its user agent, touch and languages from its next load: reload to see all of it.');
   },
 
   async wait(args) {
@@ -1570,6 +1823,8 @@ const commands = {
     if (tokens.length > 1 && /^\d+$/.test(tokens[tokens.length - 1])) seconds = Number(tokens.pop());
     if (!tokens.length || seconds < 1 || seconds > WAIT_MAX) throw new Error(`${usage} (1-${WAIT_MAX})`);
     const timeout = seconds * 1000;
+    // Said plainly, not as Playwright's call log.
+    const plainly = message => error => { throw /Timeout \d+ms exceeded/.test(error.message) ? new Error(message) : error; };
     const kind = tokens[0];
     if (kind === 'load' && tokens.length === 1) {
       if (gone) throw new Error(usage);
@@ -1582,14 +1837,14 @@ const commands = {
         return waitForRequest(what, timeout);
       }
       if (gone) return waitGone(state.page.getByText(what), what, timeout);
-      await state.page.getByText(what).first().waitFor({ state: 'visible', timeout });
+      await state.page.getByText(what).first().waitFor({ state: 'visible', timeout }).catch(plainly(`No visible text matches ${what} within ${seconds}s`));
       out.log(`Visible: ${what}`);
       return;
     }
     const selector = toSelector(unquote(tokens.join(' ')));
     if (gone) return waitGone(state.page.locator(selector), tokens.join(' '), timeout);
-    await state.page.waitForSelector(selector, { state: 'attached', timeout });
-    out.log(`Found: ${tokens.join(' ')}`);
+    await state.page.waitForSelector(selector, { state: 'visible', timeout }).catch(plainly(`No visible element matches ${tokens.join(' ')} within ${seconds}s`));
+    out.log(`Visible: ${tokens.join(' ')}`);
   },
 
   async sleep(args) {
@@ -1630,12 +1885,15 @@ const commands = {
   async route(args) {
     const trimmed = (args || '').trim();
     if (!trimmed) return listRoutes();
+    // A glob may be quoted, as it is in a shell.
     const off = /^off(?:\s+(\S+))?$/.exec(trimmed);
-    if (off) return removeRoutes(off[1]);
-    const usage = 'Usage: route <url-glob> <status> <json-body> | route <url-glob> patch <json> | route <url-glob> delay <seconds> | route <url-glob> abort | route off <url-glob>|--all';
-    const match = /^(\S+)\s+(\S+)(?:\s+([\s\S]+))?$/.exec(trimmed);
+    if (off) return removeRoutes(off[1] && unquote(off[1]));
+    const usage = 'Usage: route <url-glob> <status> [json-body] | route <url-glob> patch <json> | route <url-glob> delay <seconds> | route <url-glob> abort | route off <url-glob>|--all';
+    const parsed = splitSelector(trimmed);
+    const match = /^(\S+)(?:\s+([\s\S]+))?$/.exec(parsed?.rest || '');
     if (!match) throw new Error(usage);
-    const [, glob, how, rest] = match;
+    const glob = parsed.word;
+    const [, how, rest] = match;
     const route = routeKind(how, rest, usage);
     const routes = routesFor(state.page);
     const previous = routes.get(glob);
@@ -1652,21 +1910,29 @@ const commands = {
       }
     };
     await state.page.route(glob, handler);
-    routes.set(glob, { text: route.text, handler });
+    routes.set(glob, { text: route.text, handler, owner: state.client });
     out.log(`${previous ? 'Replaced' : 'Routed'}: ${glob} -> ${route.text}`);
   },
 
   async requests(args) {
-    const tokens = (args || '').trim().split(/\s+/).filter(Boolean);
+    // --regex <pattern> takes the rest of the line.
+    let regex = null;
+    const text = (args || '').replace(/(?:^|\s)--regex(?:\s+([\s\S]*))?$/, (_, pattern) => {
+      if (!pattern?.trim()) throw new Error('Usage: requests [--all] [n] --regex <pattern>');
+      regex = regexOf(patternText(pattern.trim()));
+      return '';
+    });
+    const tokens = text.trim().split(/\s+/).filter(Boolean);
     const everything = tokens.includes('--all');
     if (everything) tokens.splice(tokens.indexOf('--all'), 1);
     let count = RECENT_DEFAULT;
     if (tokens.length && /^\d+$/.test(tokens[0])) count = Number(tokens.shift());
-    if (count < 1 || count > RECENT_MAX || tokens.length > 1) throw new Error(`Usage: requests [--all] [n] [url-filter] (n from 1 to ${RECENT_MAX})`);
-    const filter = tokens[0];
+    if (count < 1 || count > RECENT_MAX || tokens.length > (regex ? 0 : 1)) throw new Error(`Usage: requests [--all] [n] [url-filter | --regex <pattern>] (n from 1 to ${RECENT_MAX})`);
+    const filter = regex ? String(regex) : tokens[0];
+    const wanted = regex ? url => regex.test(url) : url => !filter || url.includes(filter);
     const log = recentLogs.get(state.page) || [];
     const shown = everything ? log : log.filter(e => !RECENT_HIDDEN_TYPES.has(e.type) && !e.url.startsWith('chrome-extension://'));
-    const matches = shown.filter(e => !filter || e.url.includes(filter)).slice(-count);
+    const matches = shown.filter(e => wanted(e.url)).slice(-count);
     if (!matches.length) { out.log(filter ? `No requests matching ${filter}` : 'No requests on the selected tab'); return; }
     for (const e of matches) {
       const ms = e.ms === null ? '-' : `${e.ms}ms`;
@@ -1681,11 +1947,14 @@ const commands = {
   },
 
   async body(args, all) {
-    const match = /^#?(\d+)$/.exec((args || '').trim());
-    if (!match) throw new Error('Usage: body <#> (the number from requests)');
-    const id = Number(match[1]);
-    const entry = (recentLogs.get(state.page) || []).find(e => e.id === id);
-    if (!entry) throw new Error(`No request #${id} on the selected tab; requests lists them`);
+    const arg = (args || '').trim();
+    if (!arg) throw new Error('Usage: body <#> | body <url-part> (the number from requests, or the latest request whose URL contains url-part)');
+    const log = recentLogs.get(state.page) || [];
+    const match = /^#?(\d+)$/.exec(arg);
+    // The latest that has finished: one still pending has no body yet.
+    const entry = match ? log.find(e => e.id === Number(match[1])) : log.filter(e => e.url.includes(arg) && e.status !== 'pending').pop();
+    if (!entry) throw new Error(match ? `No request #${match[1]} on the selected tab; requests lists them` : `No finished request on the selected tab has a URL containing ${arg}`);
+    const id = entry.id;
     // A fake is marked answered before the browser hands over its response.
     for (let waited = 0; !entry.response && /(?:faked|patched)$/.test(entry.status) && waited < 2000; waited += 50) {
       await new Promise(resolve => setTimeout(resolve, 50));
@@ -1713,28 +1982,49 @@ const commands = {
     const tokens = (args || '').trim().split(/\s+/).filter(Boolean);
     let count = RECENT_DEFAULT;
     if (tokens.length && /^\d+$/.test(tokens[0])) count = Number(tokens.shift());
-    if (count < 1 || count > RECENT_MAX || tokens.length > 1) throw new Error(`Usage: console [n] [filter] (n from 1 to ${RECENT_MAX})`);
+    if (count < 1 || count > RECENT_MAX || tokens.length > 1) throw new Error(`Usage: console [n] [level | filter] (n from 1 to ${RECENT_MAX})`);
     const filter = tokens[0];
-    const matches = (consoleLogs.get(state.page) || [])
-      .filter(e => !filter || e.type.includes(filter) || e.text.includes(filter))
-      .slice(-count);
+    const level = CONSOLE_LEVELS.indexOf(filter);
+    const shown = level === -1
+      ? e => !filter || e.type.includes(filter) || e.text.includes(filter)
+      : e => CONSOLE_LEVELS.indexOf(consoleLevel(e.type)) <= level;
+    const logs = consoleLogs.get(state.page) || [];
+    const matches = logs.filter(e => e.type !== 'load' && shown(e)).slice(-count);
     if (!matches.length) { out.log(filter ? `No console messages matching ${filter}` : 'No console messages on the selected tab'); return; }
-    printOutput(matches.map(e => `${clock(e.t)} [${e.type}] ${e.text}`).join('\n'), all);
+    // Where the page loaded again, so a message from an earlier load does not read as the current one's.
+    // From the load the first message shown came from, if it is still kept.
+    let first = logs.indexOf(matches[0]);
+    while (first > 0 && logs[first].type !== 'load') first -= 1;
+    const lines = logs.filter((e, i) => i >= first && (e.type === 'load' || matches.includes(e)));
+    printOutput(lines.map(e => (e.type === 'load' ? `${clock(e.t)} --- the page loaded ${e.text}` : `${clock(e.t)} [${e.type}] ${e.text}`)).join('\n'), all);
   },
 
   async watch(args, all) {
     const arg = (args || '').trim();
     const watch = watches.get(state.page);
     const [sub, ...flags] = arg.split(/\s+/);
+    const next = flags.indexOf('--next-tab');
+    if (sub === 'on' && next !== -1) {
+      const part = flags[next + 1] && !flags[next + 1].startsWith('--') ? flags[next + 1] : null;
+      const rest = flags.filter((f, i) => i !== next && !(part && i === next + 1));
+      if (!rest.every(f => f === '--changes' || f === '--live')) throw new Error('Usage: watch on [--changes] [--live] --next-tab [url-part]');
+      nextTab = { part, changes: rest.includes('--changes'), live: rest.includes('--live'), client: state.client };
+      out.log(`${waitingText()}: it is watched from its first page, and selected. watch off stops waiting.`);
+      return;
+    }
     if (sub === 'on' && flags.every(f => f === '--changes' || f === '--live')) {
+      if (!state.page || state.page.isClosed()) throw new Error('No tab is selected; select one with tab <index|url-part>, or open one with tab new');
       const changes = flags.includes('--changes');
       const live = flags.includes('--live');
       await startWatching(state.page, changes, live);
+      watches.get(state.page).owner = state.client;
       out.log(`Watching the selected tab: clicks, typing, form changes, submits and navigations${changes ? ', and what each changed on screen' : ''} (typed values are not recorded)`);
       out.log(live ? 'Each step prints here once it settles; watch shows them again.' : 'watch shows what it has recorded; watch on --live also prints each step here as it happens.');
       return;
     }
     if (arg === 'off') {
+      if (nextTab) { nextTab = null; out.log('Stopped waiting to watch a new tab'); }
+      if (!state.page || state.page.isClosed()) return;
       if (!watch?.on) { out.log('Not watching the selected tab.'); return; }
       stopWatching(state.page, watch);
       const steps = watch.events.length;
@@ -1779,7 +2069,45 @@ const commands = {
 
   async eval(args, all) {
     if (!args) throw new Error('Usage: eval <js-expression>');
-    printOutput(await withTimeout(state.page.evaluate(args), 'Page evaluation', COMMAND_TIMEOUT), all);
+    // eval <function> <ref> calls the function with that element, as playwright-cli's eval does.
+    const onRef = /^([\s\S]+?)\s+((?:f\d+)?e\d+)$/.exec(args.trim());
+    if (onRef && isFunctionText(unquote(onRef[1]))) {
+      const selector = toSelector(onRef[2]);
+      const el = await onElement(selector, () => state.page.locator(selector).first().elementHandle({ timeout: 5000 }));
+      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);
+        try {
+          printOutput(await el.evaluate((e, f) => f(e), fn), all);
+        } finally {
+          await fn.dispose().catch(() => {});
+        }
+      } finally {
+        await el.dispose().catch(() => {});
+      }
+      return;
+    }
+    // A function, as playwright-cli's eval takes, is called rather than returned.
+    // Only a single expression can be one; statements are evaluated as they are.
+    // await at the top level: one expression is run as an async function; statements as DevTools'
+    // console runs them (replMode), which gives back the last one's value.
+    const compiles = (Kind, body) => { try { new Kind(body); return true; } catch { return false; } };
+    const AsyncFunction = (async () => {}).constructor;
+    const awaits = /\bawait\b/.test(args) && !compiles(Function, `return (${args}\n);`);
+    const single = compiles(awaits ? AsyncFunction : Function, `return (${args}\n);`);
+    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);
+      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);
+    // An empty string is shown as one, not as no output at all.
+    printOutput(value === '' ? '""' : value, all);
   },
 
   async cdp(args, all) {
@@ -1840,8 +2168,8 @@ const commands = {
   async modes(args) {
     const arg = (args || '').trim();
     if (!arg) return listModes();
-    if (arg !== 'off') throw new Error('Usage: modes [off]');
-    await allModesOff();
+    if (arg !== 'off' && arg !== 'off --mine') throw new Error('Usage: modes [off [--mine]]');
+    await allModesOff(arg === 'off --mine');
   },
 
   async help(args) {
@@ -1857,6 +2185,38 @@ const commands = {
   }
 };
 
+// Run for playwright-cli's names (lib/cli-names.js) where no command here does the same.
+const cliCommands = {
+  // By index only: tab <number> falls back to a tab whose URL contains the number.
+  // The index is into the sender's last listing, so a tab someone opened or
+  // closed since cannot shift it onto another tab; with none yet, the tabs now.
+  async 'tab-select'(args) {
+    const all = state.browser.contexts().flatMap(c => c.pages());
+    if (!/^\d+$/.test(args)) throw new Error('Usage: tab-select <index>, as tab-list lists the tabs');
+    if (!state.tabListing.length) {
+      if (!all[Number(args)]) throw new Error(`No tab [${args}]; there ${all.length === 1 ? 'is 1' : `are ${all.length}`}, and tab-list lists them`);
+      state.tabListing = all.slice();
+    }
+    const target = state.tabListing[Number(args)];
+    if (!target) throw new Error(`No tab [${args}] in your last listing; tab-list lists them again`);
+    if (target.isClosed() || !all.includes(target)) throw new Error(`The tab at [${args}] in your last listing has closed; tab-list lists them again`);
+    return commands.tab(args);
+  },
+
+  // playwright-cli's close ends its own session. The browser here is shared, so
+  // it ends the sender's part in it: its modes are turned off, and every tab,
+  // even one it opened, is left open for someone who may be using it.
+  async close(args) {
+    if (args) throw new Error('Usage: close');
+    if (!state.client) {
+      throw new Error('close turns off the modes you turned on, which needs a client name: pw-repl send -c <name> close. Without one, they cannot be told from the prompt\'s; modes lists what is on.');
+    }
+    await allModesOff(true);
+    const own = state.browser.contexts().flatMap(c => c.pages()).filter(p => tabOwners.get(p) === state.client);
+    if (own.length) out.log(`Tabs you opened are still open: ${own.map(p => p.url()).join(', ')}; tab close <url-part> closes one, or select it and tab close.`);
+  },
+};
+
 onShutdown(discardCapture);
 onShutdown(resetEmulations);
 
@@ -1864,6 +2224,12 @@ onShutdown(resetEmulations);
 function watchPage(p) {
   ensureDialogHandler(p);
   ensureRecentLog(p);
+  if (nextTab && !opening) watchNewTab(p);
+}
+
+// watch on --next-tab waits for a tab, and watch off stops waiting, with none selected.
+function needsTab(cmd, args) {
+  return !(cmd === 'watch' && (/(?:^|\s)--next-tab(?:\s|$)/.test(args) || /^\s*off\s*$/.test(args)));
 }
 
 // Tab completion for the prompt: command names first, then the fixed words
@@ -1890,11 +2256,11 @@ function complete(line) {
     if (command === 'capture') return match(['on', 'off']);
     if (command === 'route') return match(['off']);
   }
-  if (words.length >= 3 && command === 'watch' && words[1] === 'on') return match(['--changes', '--live'].filter(f => !words.slice(2, -1).includes(f)));
+  if (words.length >= 3 && command === 'watch' && words[1] === 'on') return match(['--changes', '--live', '--next-tab'].filter(f => !words.slice(2, -1).includes(f)));
   if (words.length === 3 && command === 'capture' && words[1] === 'on') return match(['requests', 'console']);
   if (words.length === 3 && command === 'emulate' && EMULATE_KINDS.includes(words[1])) return match(['off']);
   if (words.length === 3 && command === 'route' && words[1] === 'off') return match(['--all', ...(state.page ? routesFor(state.page).keys() : [])]);
   return [[], current];
 }
 
-module.exports = { commands, dialogCommand, listTabs, openTab, activeModes, watchPage, complete, compactSnapshot, grepSnapshot, summarizeChanges, scrubEditable, clock };
+module.exports = { commands, cliCommands, needsTab, dialogCommand, listTabs, openTab, activeModes, watchPage, complete, compactSnapshot, grepSnapshot, summarizeChanges, scrubEditable, clock };