pw-repl 0.11.2 → 0.11.3

package/lib/elements.js

@@ -8,7 +8,7 @@ const { unquote, toSelector, keyName, splitSelector, REF } = require('./syntax')
 const { numbers, hints } = require('./util');
 const { tabState } = require('./tabstate');
 const { cursorOf, aiming, aimAt, glideTo, showClick, showSelect } = require('./cursor');
-const { recordingOf, stepTarget } = require('./record');
+const { recordingOf, stepTarget, pauseToShow } = require('./record');
 const { settled } = require('./emulation');
 
 // The type a page sees for a file it is given, from its extension.
@@ -448,6 +448,10 @@ const commands = {
     await keepLabels(state.page);
     highlights.set(selector, { owner: state.client, style: style?.value || null, drawn });
     out.log(`Highlighted ${rest}${count > 1 ? ` (all ${count} matches)` : ''}; highlight --hide ${rest} hides it`);
+    // Recording, its steps say where the box is (the first match's), and it is shown before the next
+    // command, which may take it away.
+    if (recordingOf(state.page)) stepTarget(state.page, await locator.first().boundingBox({ timeout: 1000 }).catch(() => null), null);
+    pauseToShow(state.page);
   },
 
   // At a point, in CSS pixels from the top left of the tab's viewport, as playwright-cli's are.

package/lib/help.js

@@ -99,7 +99,7 @@ page loads: turn off any the rehearsal left (toast off, cursor off, highlight of
     record off
 
 3. While it records, pw-repl paces it for a viewer (help record): type types at a readable pace (use it,
-not fill, for text the viewer should see typed), each action is followed by a pause, an element out of
+not fill, for text the viewer should see typed), each action and each highlight is followed by a pause, an element out of
 view is scrolled to smoothly, and the video starts and ends on a still page. highlight <selector> draws a
 box to point at something, and toast <text> a line of text saying what is happening, up for as long as
 the viewer needs to read it. After a step that loads a page, wait for text only the result shows (wait
@@ -350,12 +350,18 @@ that was ever type=password, or whose autocomplete is for a password, a one-time
 
 Saving (watch save): a goto to where the watch started, then each step as a command, under a # line
 describing it: click, fill, select, check, press, and wait load after a step that loaded a page. An
-element is found by its id, data-testid or name, its text, or else its place in the page, which a change
-to the page can break. A select step chooses the option by its value. What was typed into a password
+element is found by its data-testid, its role and a piece of its name (role=button[name*="Save"]), its id,
+name attribute or text; else by an id a framework made up, which another render can number
+differently, or its place in the page, which a change to the page can break. A field changed again before
+anything else was done (a date picker stepping through days) is filled once, with its last value. After
+the app changed its URL without loading a page, the next step waits up to 30s for its element first, as
+the new view may take longer to draw than an action waits. A select step chooses the option by its value. What was typed into a password
 field (or any field, with --no-values) is a variable named after the field, e.g. fill '#password'
 "{{ PW_PASSWORD }}": run it with PW_PASSWORD=... pw-repl send --file login.txt, and send passes the
 value along for the REPL to put in, which shows the line as written. A step that cannot be a command (a value with a line break, an element in a frame, or
-one no selector finds alone) stays a comment saying why, and the save says how many there are.
+one no selector finds alone) stays a comment saying why, and the save says how many there are. The file
+ends with the last step, not with what it brought: to end on a result that comes later (search results
+loading), add a wait for it at the end (wait text ...).
 
 Shared: every client sees the same steps, and watch new's place is shared.`,
     moreAbout: 'bodies kept, --live timing, what --changes misses, one --next-tab at a time, and what watch save leaves out',
@@ -373,7 +379,8 @@ waited for at a time: while one client waits, another's watch on --next-tab is r
 off leaves the wait on.
 
 watch save: a submit is left out, since the click or Enter that caused it is there. So is a URL the app
-changed without loading a page (history.pushState), as a comment: the step before it changes it again.
+changed without loading a page (history.pushState or replaceState), as a comment: the step before it
+changes it again. A click on a label is the click it passes on to its control, and saved as that.
 In an open shadow root, an element's selector is its host's, then its own; a closed one is out of reach.`,
   },
   text: { usage: 'text [--all] <selector>', summary: 'visible text of the first match' },
@@ -516,7 +523,7 @@ takes no clicks, and it points at elements inside frames too.`,
     optionsFor: 'record on',
     options: [
       ['--steps', 'also save clip.steps.txt next to clip.webm: when and where each command ran (Steps, below). Default: off.'],
-      ['--pause=<ms>', 'a pause after each action, so the viewer sees what it did. Default: 750; 0 none.'],
+      ['--pause=<ms>', 'a pause after each action, and each highlight drawn, so the viewer sees it. Default: 750; 0 none.'],
       ['--lead=<ms>', 'still page recorded before record on returns. Default: 1000; counts toward the seconds.'],
       ['--tail=<ms>', 'still page recorded after record off, before it stops. Default: 1000; none when it stops at its seconds.'],
       ['--filename=<file>', 'the file, as playwright-cli writes it.'],
@@ -528,13 +535,13 @@ owner-only, as a screenshot is, and never replaces one. One recording per tab; a
 tab selected can stop it, and both are told whose it was.
 
 While recording: type types at a pace the video can show (help type), mousewheel scrolls in eased steps,
-an element out of view is scrolled to smoothly, each action is followed by --pause, and with the cursor
+an element out of view is scrolled to smoothly, each action and each highlight drawn is followed by --pause, and with the cursor
 on it rests 300ms on the element before acting. fill still sets a value at once: use type for text the
 viewer should see typed. Send the take as a file of commands (pw-repl send --file take.txt), or the time
 between commands is in the video. help video has the whole way through.
 
 Steps (--steps): one line per command run on the tab while it recorded: when it began and ended, in
-seconds into the video, and the element or point it acted on, in the video's pixels. Use it to find a
+seconds into the video, and the element or point it acted on (or highlighted), in the video's pixels. Use it to find a
 moment in the video ("at 0:12 it clicked Save"), to add captions or cuts in an editor, or to check what
 ran. It names the command and what it acted on, never what it typed or chose, the code it ran or a URL.
 A (page) line marks each new page, loaded or routed to by a single-page app. It is renamed with the
@@ -602,7 +609,7 @@ drew with them (times, colors set by its script) changes only when it reloads.`,
     summary: 'wait for an element, text, a response or a load (10s)',
     args: [
       ['<selector>', 'for a matching element to be visible.'],
-      ['text <text>', 'for text to be visible: any part of an element\'s text, any case.'],
+      ['text <text>', 'for text to be visible: any part of an element\'s text, any case. Quote text that ends in a number, or the number is taken as the seconds: wait text "Showing 1".'],
       ['request <part>', 'for a matching response (a URL part or a glob), counting one that finished since the previous command began, or is still under way: click, then wait request, does not miss it.'],
       ['load', 'for the page to finish loading (its load event), counting a navigation that began since the previous command began: click a link, then wait load.'],
       ['[secs]', 'how long, up to 120. Default: 10.'],

package/lib/inspect.js

@@ -403,7 +403,8 @@ const commands = {
     let seconds = WAIT_DEFAULT;
     // A number last is the seconds, unless it is all there is to wait for: wait text 990.
     const onlyWhat = (tokens[0] === 'text' || tokens[0] === 'request') && tokens.length === 2;
-    if (tokens.length > 1 && !onlyWhat && /^\d+$/.test(tokens[tokens.length - 1])) seconds = Number(tokens.pop());
+    const tookSeconds = tokens.length > 1 && !onlyWhat && /^\d+$/.test(tokens[tokens.length - 1]);
+    if (tookSeconds) 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.
@@ -420,7 +421,9 @@ 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 }).catch(plainly(`No visible text matches ${what} within ${seconds}s`));
+      // Text that ends in a number gives it up as the seconds, unless quoted: said when it times out.
+      const quote = tookSeconds && !/^["']/.test(tokens[1]) ? ` (${seconds} was taken as the seconds: wait text "${what} ${seconds}" waits for that text)` : '';
+      await state.page.getByText(what).first().waitFor({ state: 'visible', timeout }).catch(plainly(`No visible text matches ${what} within ${seconds}s${quote}`));
       out.log(`Visible: ${what}`);
       return;
     }

package/lib/record.js

@@ -403,6 +403,8 @@ function stepLabel(cmd, args) {
   }
   // A toast's text is what it said in the video, for whoever edits it.
   if (cmd === 'toast') return `toast ${args.trim()}`.trim();
+  // A highlight's selector, or off: which box came and went, without its style.
+  if (cmd === 'highlight') return `highlight ${args.replace(/\s*--style=(?:"(?:[^"\\]|\\.)*"|'[^']*'|\S+)/, '').trim()}`.trim();
   if (!TARGET_FIRST.has(cmd)) return cmd;
   const rest = cmd === 'type' ? args.replace(/^\s*--delay(?:=|\s+)\S*\s*/, '') : args;
   const parsed = splitSelector(rest);
@@ -457,11 +459,20 @@ function beforeRecordingEnds(wait) {
   beforeEnding.push(wait);
 }
 
-// The pause after an action on a recording tab, for its result to be seen (record on --pause).
+// The pause after an action on a recording tab, for its result to be seen (record on --pause), and
+// after a command that drew something to be seen (pauseToShow), as highlight does. After the command's
+// step ends, as an action's does.
 const ACTIONS = new Set([...WHOLE, ...TARGET_FIRST]);
+function pauseToShow(p) {
+  const rec = recordingOf(p);
+  if (rec) rec.showing = true;
+}
 async function pauseAfter(p, cmd) {
   const rec = p && !p.isClosed() ? recordingOf(p) : null;
-  if (rec && !rec.finishing && rec.pacing.pause && ACTIONS.has(cmd)) await sleep(rec.pacing.pause);
+  if (!rec) return;
+  const show = rec.showing;
+  rec.showing = false;
+  if (!rec.finishing && rec.pacing.pause && (show || ACTIONS.has(cmd))) await sleep(rec.pacing.pause);
 }
 
 function stepsPath(file) {
@@ -692,4 +703,4 @@ const commands = {
   },
 };
 
-module.exports = { commands, recordingOf, beforeRecordingEnds, stepsOf, pauseAfter, finishRecording, endedByTabClose, findFfmpeg, jpegSize, stepStarted, stepEnded, stepTarget, cursorStep, stepLabel };
+module.exports = { commands, recordingOf, beforeRecordingEnds, stepsOf, pauseAfter, pauseToShow, finishRecording, endedByTabClose, findFfmpeg, jpegSize, stepStarted, stepEnded, stepTarget, cursorStep, stepLabel };

package/lib/send.js

@@ -98,8 +98,9 @@ function commandLine(words) {
   // words are joined as they are.
   const { SELECTOR_FIRST } = require('./syntax');
   // So does playwright-cli's storage key (localstorage-set "my key" v).
-  // And record's file, which may have spaces in it.
-  const requote = words.length > 1 && (SELECTOR_FIRST.has(words[0]) || /^(?:local|session)storage-/.test(words[0]) || words[0] === 'record' || /^video-(?:start|stop)$/.test(words[0]));
+  // And record's file, which may have spaces in it, and wait's text, whose last word would otherwise be
+  // taken as the seconds when it is a number (wait text 'Showing 1').
+  const requote = words.length > 1 && (SELECTOR_FIRST.has(words[0]) || /^(?:local|session)storage-/.test(words[0]) || words[0] === 'record' || words[0] === 'wait' || /^video-(?:start|stop)$/.test(words[0]));
   // An empty word (fill #name "") is the empty value.
   // upload's files are read by the REPL, whose folder may not be this one.
   // So are the files upload reads and screenshot --filename writes.

package/lib/watch.js

@@ -22,6 +22,8 @@ const PW_SETTINGS = ['PW_CDP_URL', 'PW_CHROME', 'PW_CLIENT', 'PW_ENDPOINT', 'PW_
   'PW_SOCKET', 'PW_START_URL', 'PW_TEST_CHROME', 'PW_TMUX_SESSION'];
 const PAGE_ACTIONS = new Set(['click', 'check', 'uncheck', 'select', 'fill', 'type', 'press', 'submit']);
 const WATCH_BINDING = '__pwReplWatch';
+// Seconds a saved step waits for its element after the app's own routing (watch save).
+const ROUTE_WAIT = 30;
 
 // Runs in the page. Describes elements the way snapshot does: role and name.
 const WATCH_SCRIPT = `(() => {
@@ -81,13 +83,96 @@ const WATCH_SCRIPT = `(() => {
   };
   const textOf = el => (el.textContent || '').replace(/\\s+/g, ' ').trim();
   const cssString = text => '"' + text.replace(/\\\\/g, '\\\\\\\\').replace(/"/g, '\\\\"') + '"';
+  // An id a framework made up (radix-vue-combobox-option-v-0-17-4, :r1:), which another render or build
+  // numbers differently: used only when nothing else finds the element.
+  const madeUpId = id => /:|\\d+\\D+\\d|\\d{3}/.test(id) || /^(?:radix|reka|headlessui|mui|react-aria|downshift)-/.test(id);
+  // Roles as Playwright's role selector reads them, for the elements a step acts on.
+  const WIDGET_ROLES = new Set(['button', 'checkbox', 'combobox', 'link', 'listbox', 'menuitem', 'menuitemcheckbox', 'menuitemradio', 'option', 'radio', 'searchbox', 'slider', 'spinbutton', 'switch', 'tab', 'textbox', 'treeitem']);
+  const INPUT_ROLES = { checkbox: 'checkbox', radio: 'radio', button: 'button', submit: 'button', reset: 'button', image: 'button', file: 'button', range: 'slider', number: 'spinbutton', search: 'searchbox', hidden: null };
+  const widgetRole = el => {
+    if (el.hasAttribute('role')) {
+      const role = el.getAttribute('role').trim().split(/\\s+/)[0];
+      return WIDGET_ROLES.has(role) ? role : null;
+    }
+    const tag = el.localName;
+    if ((tag === 'a' || tag === 'area') && el.hasAttribute('href')) return 'link';
+    if (tag === 'button') return 'button';
+    if (tag === 'textarea') return 'textbox';
+    if (tag === 'option') return 'option';
+    if (tag === 'select') return el.multiple || el.size > 1 ? 'listbox' : 'combobox';
+    if (tag !== 'input') return null;
+    if (el.list && /^(?:email|search|tel|text|url)$/.test(el.type)) return 'combobox';
+    return el.type in INPUT_ROLES ? INPUT_ROLES[el.type] : 'textbox';
+  };
+  // Pieces of its accessible name that Playwright's is sure to hold, longest first: an attribute that
+  // names it, or the text nodes it is named from (its label's, or its own), one at a time. Put together,
+  // they could be spaced as Playwright's are not: it sets a child apart by spaces by how it is laid out.
+  const plain = text => (text || '').replace(/\\s+/g, ' ').trim();
+  const NAMED_BY_TEXT = new Set(['button', 'checkbox', 'link', 'menuitem', 'menuitemcheckbox', 'menuitemradio', 'option', 'radio', 'switch', 'tab', 'treeitem']);
+  // Text Playwright leaves out of a name, or names another way: hidden text, and text in an element
+  // named by an attribute, in a control, in an SVG or in the element a label names.
+  const textPieces = (root, el, hiddenToo) => {
+    const pieces = [];
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+      const text = plain(node.data);
+      let at = node.parentElement;
+      if (!text || !at || (!hiddenToo && !at.checkVisibility({ visibilityProperty: true }))) continue;
+      for (; at && at !== root; at = at.parentElement) if (at === el || at.matches('[aria-hidden=true],[aria-label],[aria-labelledby],select,textarea,button,svg')) break;
+      if (at === root) pieces.push(text);
+    }
+    return pieces;
+  };
+  const namePieces = el => {
+    // Ids that name nothing are passed over, as Playwright passes them over.
+    const labelledBy = (el.getAttribute('aria-labelledby') || '').split(/\\s+/).map(id => id && document.getElementById(id)).filter(Boolean);
+    if (labelledBy.length) return labelledBy.flatMap(part => textPieces(part, null, true));
+    if (plain(el.getAttribute('aria-label'))) return [plain(el.getAttribute('aria-label'))];
+    if (el.labels && el.labels.length) return [...el.labels].flatMap(label => textPieces(label, el, false));
+    const role = widgetRole(el);
+    const own = NAMED_BY_TEXT.has(role) ? textPieces(el, null, false) : [];
+    if (own.length) return own;
+    // An input's title and placeholder: Playwright takes one or the other, so only one there is.
+    const named = [el.getAttribute('title'), typedInto(el) ? el.getAttribute('placeholder') : null].map(plain).filter(Boolean);
+    return named.length === 1 ? named : [];
+  };
+  // Everything an element's name could hold, without spaces, for whether another element's name could
+  // hold a piece of this one's: more than it does, never less.
+  const squash = text => (text || '').replace(/\\s+/g, '').toLowerCase();
+  // An input that is a button is named by its value (Submit or Reset without one), or as an image its alt.
+  const inputButtonName = el => el.localName === 'input' && /^(?:submit|button|reset|image)$/.test(el.type)
+    ? [el.value, { submit: 'Submit', reset: 'Reset' }[el.type], el.getAttribute('alt')].join(' ') : '';
+  const nameHay = el => squash([el.getAttribute('aria-label'), el.getAttribute('title'), el.getAttribute('placeholder'), el.textContent, inputButtonName(el),
+    ...(el.getAttribute('aria-labelledby') || '').split(/\\s+/).map(id => id && document.getElementById(id)?.textContent),
+    ...[...(el.labels || [])].map(label => label.textContent),
+    ...[...el.querySelectorAll('[alt],[aria-label],[title]')].map(n => [n.getAttribute('alt'), n.getAttribute('aria-label'), n.getAttribute('title')].join(' '))].join(' '));
+  // role=<role>[name*="<piece>"], with the first piece of its name that finds it and no other: *= finds
+  // the piece anywhere in an element's name, in any case, so every element of the role whose name could
+  // hold it is counted.
+  const roleSelector = el => {
+    const role = widgetRole(el);
+    if (!role) return null;
+    // A long piece by its first words, which Playwright still finds. A count or a price alone would not
+    // find it again.
+    const pieces = [...new Set(namePieces(el).filter(piece => /\\p{L}/u.test(piece)).map(piece => piece.length <= 60 ? piece : piece.slice(0, 61).replace(/\\s+\\S*$/, '')))];
+    pieces.sort((a, b) => b.length - a.length);
+    const others = [];
+    for (const r of shadowRoots(document)) for (const other of r.querySelectorAll('*')) if (other !== el && widgetRole(other) === role) others.push(nameHay(other));
+    const piece = pieces.slice(0, 5).find(piece => !others.some(hay => hay.includes(squash(piece))));
+    return piece ? 'role=' + role + '[name*=' + cssString(piece) + ']' : null;
+  };
   const selectorIn = (el, scope) => {
     const roots = shadowRoots(scope);
     const count = sel => { let n = 0; for (const r of roots) n += r.querySelectorAll(sel).length; return n; };
+    const ownId = at => at.id && count('#' + CSS.escape(at.id)) === 1;
     const tag = el.localName;
-    if (el.id && count('#' + CSS.escape(el.id)) === 1) return '#' + CSS.escape(el.id);
     const testid = el.getAttribute('data-testid');
     if (testid && count('[data-testid=' + cssString(testid) + ']') === 1) return '[data-testid=' + cssString(testid) + ']';
+    // Before an id, as Playwright's own locators are: an id can be a counter's that looks written by hand.
+    // Playwright's role selector goes into shadow roots, but takes no CSS before it: in the document only.
+    const byRole = scope === document && roleSelector(el);
+    if (byRole) return byRole;
+    if (ownId(el) && !madeUpId(el.id)) return '#' + CSS.escape(el.id);
     const name = el.getAttribute('name');
     if (name && /^(?:input|select|textarea)$/.test(tag) && count(tag + '[name=' + cssString(name) + ']') === 1) return tag + '[name=' + cssString(name) + ']';
     const text = textOf(el);
@@ -96,10 +181,11 @@ const WATCH_SCRIPT = `(() => {
       for (const r of roots) for (const other of r.querySelectorAll(tag)) if (textOf(other) === text) same++;
       if (same === 1) return tag + ':text-is(' + cssString(text) + ')';
     }
+    if (ownId(el)) return '#' + CSS.escape(el.id);
     // Its place: the path down from the nearest ancestor with an id of its own, or from the top.
     const steps = [];
     for (let at = el; at && at.parentNode; at = at.parentNode) {
-      if (at !== el && at.id && count('#' + CSS.escape(at.id)) === 1) { steps.unshift('#' + CSS.escape(at.id)); break; }
+      if (at !== el && ownId(at) && !madeUpId(at.id)) { steps.unshift('#' + CSS.escape(at.id)); break; }
       if (at.localName === 'body') { steps.unshift('body'); break; }
       const same = [...at.parentNode.children].filter(c => c.localName === at.localName);
       steps.unshift(same.length > 1 ? at.localName + ':nth-of-type(' + (same.indexOf(at) + 1) + ')' : at.localName);
@@ -134,6 +220,8 @@ const WATCH_SCRIPT = `(() => {
     if (window !== window.top) return null;
     const parts = partsOf(el);
     if (!parts) return null;
+    // Counted as Playwright matches it already, which el.matches cannot.
+    if (parts[0].startsWith('role=')) return parts[0];
     let n = 0;
     for (const r of shadowRoots(document)) for (const other of r.querySelectorAll('*')) if (matchesParts(other, parts) && ++n > 1) return null;
     return n === 1 ? parts.join(' ') : null;
@@ -160,6 +248,9 @@ const WATCH_SCRIPT = `(() => {
     const el = t.closest ? (t.closest(INTERACTIVE) || t) : t;
     if (!el.matches || el.matches('input[type=checkbox],input[type=radio],select') || isPassword(el)) return;
     if (e.detail === 0 && enteredForm && el.form === enteredForm) return;
+    // A click on a label is passed on to its control as a click of its own, recorded as that (or as the
+    // check a checkbox's change records): recorded too, a checkbox would be toggled twice.
+    if (el.localName === 'label' && el.control) return;
     send('click', el);
   }, true);
   // Typing is recorded once it pauses, not on change, so a typeahead's requests
@@ -369,7 +460,7 @@ async function startWatching(p, changes = false, live = false, values = true) {
       if (!created.on) return;
       const previous = created.events[created.events.length - 1];
       const t = Math.max(Date.now() - Math.min(Math.max(Number(since) || 0, 0), TYPING_BACKDATE_MAX), previous ? previous.t : 0);
-      const step = { seq: created.nextSeq++, t, action, target: clipText(target), extra: clipText(extra), selector: more.selector || null, secret: !!more.secret, url: more.url };
+      const step = { seq: created.nextSeq++, t, action, target: clipText(target), extra: clipText(extra), selector: more.selector || null, secret: !!more.secret, url: more.url, loaded: !!more.loaded };
       if (typeof more.option === 'string') step.option = more.option;
       if (typeof more.value === 'string' && created.values) step.value = more.value;
       keep(created.events, step);
@@ -402,7 +493,15 @@ async function startWatching(p, changes = false, live = false, values = true) {
     }
     tabState(p).watchBinding.record = record;
     await p.addInitScript(WATCH_SCRIPT);
-    p.on('framenavigated', frame => { if (frame === p.mainFrame()) record('navigate', frame.url(), '', 0, { url: frame.url() }); });
+    // Whether it loaded a document is read now, while the request log still has the request: a page's
+    // document is requested before it commits, after the step before it.
+    p.on('framenavigated', frame => {
+      if (frame !== p.mainFrame()) return;
+      const url = frame.url();
+      const since = created.events[created.events.length - 1]?.t ?? 0;
+      const loaded = (tabState(p).log || []).some(r => r.navigation && r.url === url && r.t >= since);
+      record('navigate', url, '', 0, { url, loaded });
+    });
     // Only now: a failed first attempt must leave nothing half set up to retry against.
     tabState(p).watch = created;
     watch = created;
@@ -559,7 +658,6 @@ function showWatch(watch, all) {
 function savedCommands(watch, p) {
   const sel = text => (text.includes("'") ? `"${text.replace(/\\/g, '\\\\').replace(/"/g, '\\"')}"` : `'${text}'`);
   const value = text => `"${text.replace(/\\/g, '\\\\').replace(/"/g, '\\"')}"`;
-  const documents = (tabState(p).log || []).filter(r => r.navigation);
   const events = watch.events.slice();
   const first = events[0]?.action === 'navigate' ? events.shift().url : watch.startUrl;
   const lines = [`goto ${first}`];
@@ -577,19 +675,31 @@ function savedCommands(watch, p) {
     return name;
   };
   const comment = (e, why) => { skipped += 1; lines[lines.length - 1] += `: ${why}`; };
+  // A field changed again before anything else was done (a date picker stepping through days, typing
+  // that paused) is filled once, with its last value.
+  const changedAgain = i => {
+    const e = events[i];
+    if ((e.action !== 'type' && e.action !== 'fill') || !e.selector) return false;
+    const next = events.slice(i + 1).find(n => !(n.action === 'navigate' && !n.loaded));
+    return !!next && (next.action === 'type' || next.action === 'fill') && next.selector === e.selector;
+  };
+  // After the app's own routing, the next step waits for its element: the new view can take longer to
+  // draw than an action waits.
+  let routed = false;
   for (const [i, e] of events.entries()) {
     const previous = events[i - 1];
     if (e.action === 'navigate') {
-      // The page an action led to: waited for if it loaded a document, not if the app only changed its URL.
-      if (previous && previous.action !== 'navigate') {
-        const loaded = documents.some(r => r.url === e.url && r.t >= previous.t && r.t <= e.t + 1000);
-        lines.push(loaded ? `wait load` : `# the app went to ${e.url} without loading a page`);
-      } else {
-        lines.push(`goto ${e.url}`);
-      }
+      // One that loaded no document was the app's own routing (the history API), which the step before
+      // it does again when the steps run: never a goto, or the steps would go there twice. One that
+      // loaded a document is waited for after an action, and gone to otherwise.
+      routed = !e.loaded;
+      if (!e.loaded) lines.push(`# the app went to ${e.url} without loading a page`);
+      else lines.push(previous && previous.action !== 'navigate' ? 'wait load' : `goto ${e.url}`);
       continue;
     }
-    if (e.action === 'submit') continue;
+    if (e.action === 'submit' || changedAgain(i)) continue;
+    if (routed && e.selector) lines.push(`wait ${sel(e.selector)} ${ROUTE_WAIT}`);
+    routed = false;
     lines.push(`# ${e.action} ${e.target}${e.extra ? ` ${e.extra}` : ''}`);
     if (!e.selector && !(e.action === 'press' && e.target === 'page')) { comment(e, 'no selector finds it alone: it is in a frame or a closed shadow root, or its place matches others too'); continue; }
     if (e.action === 'click' || e.action === 'check' || e.action === 'uncheck') lines.push(`${e.action} ${sel(e.selector)}`);

package/package.json

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

package/skill/SKILL.md

@@ -109,8 +109,8 @@ pw-repl send -t 90 'screenshot -d 60'   # wait longer than the 20s default
 
 Always send commands with `pw-repl send`; don't type into the pane yourself, except `quit` at the prompt
 of a REPL of your own, which `send` refuses. The words after `send` are the command. For `fill`, `type`,
-`select`, `press` and `upload`, a word quoted in your shell stays one word
-(`pw-repl send fill "text=Your name" Ada`); other commands get the words as they are, joined by
+`select`, `press`, `upload` and `wait`, a word quoted in your shell stays one word
+(`pw-repl send fill "text=Your name" Ada`, `pw-repl send wait text "Showing 1"`); other commands get the words as they are, joined by
 spaces (`pw-repl send eval "document.title + ' x'"`). A command that takes only a selector takes the
 whole line, spaces and all: `pw-repl send click "text=Your name"`. It works however the REPL was
 started:
@@ -224,6 +224,10 @@ pw-repl send -c <name> close                        # your modes off; tab close
   `tab <index>`. Closing a tab the REPL opened goes back to the tab before it, if the REPL opened that
   one too; otherwise no tab is selected. Tab numbers change when tabs open or close; `tab <url-part>`
   and `tab close <url-part>` pick a tab by its URL and refuse if it is ambiguous.
+- A login form in the user's browser may be filled by its password manager, which can keep what it
+  filled from the page until someone clicks in the field or picks from its dropdown: a field that looks
+  filled can read as empty. Check a password field by its length (`eval` on its `value.length`), never
+  read or print it; if it stays empty, ask the user to fill it.
 - You can answer any dialog yourself, one you opened included: `dialog` shows it, and `dialog accept` or
   `dialog dismiss` answers it. Nothing answers one on its own, and while one is open its page and the
   commands that read it wait. One answered in the browser is gone from `dialog` too.