pw-repl 0.12.7 → 0.13.0

package/lib/elements.js

@@ -4,7 +4,7 @@ const fs = require('fs');
 const { state, onShutdown } = require('./state');
 const out = require('./output');
 const { takeOptions } = require('./cli-names');
-const { unquote, toSelector, keyName, splitSelector, REF } = require('./syntax');
+const { unquote, unescapeDouble, toSelector, keyName, splitSelector, REF } = require('./syntax');
 const { numbers, hints, BUSY_PAGE } = require('./util');
 const { tabState } = require('./tabstate');
 const { cursorOf, aiming, aimAt, glideTo, showClick, showSelect } = require('./cursor');
@@ -35,18 +35,37 @@ 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) {
+// click text=Turn right is still one selector; --button=right, as Playwright's option, after any.
+// click takes --click-count too; dblclick is click's count of 2.
+function clickArgs(args, usage, counts = false) {
   // 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 { found, rest: text } = takeOptions((args || '').trim(), { modifiers: 'value', button: 'value', 'click-count': 'value' });
+  if (!counts && found.some(o => o.name === 'click-count')) throw new Error('dblclick is a click count of 2; for another count, click --click-count=<n>');
+  const clickCount = clickCountOf(found, usage);
+  const modifiers = found.filter(o => o.name === 'modifiers').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 };
+  const positional = parsed && /^(?:left|right|middle)$/.test(parsed.rest || '') && (REF.test(parsed.word) || /^["']/.test(text)) ? parsed.rest : null;
+  const button = chooseButton(found, positional, usage);
+  const selector = positional ? parsed.selector : soleSelector(text, usage);
+  const options = { ...(button ? { button } : {}), ...(modifiers.length ? { modifiers } : {}), ...(clickCount > 1 ? { clickCount } : {}) };
+  // The selector as written, then the kind of click, so an option never reads as part of the selector.
+  const kind = [
+    ...(button && button !== 'left' ? [`${button} button`] : []),
+    ...(clickCount > 1 ? [`${clickCount} times`] : []),
+    ...(modifiers.length ? [`with ${modifiers.join('+')}`] : []),
+  ];
+  return { selector, shown: [positional ? parsed.word : unquote(text), ...kind].join(', '), options };
+}
+
+// --click-count=<n>, as Playwright's clickCount: 3 selects a line or a field's text. Past 3 a browser
+// does nothing more.
+function clickCountOf(found, usage) {
+  const given = found.filter(o => o.name === 'click-count');
+  if (!given.length) return 1;
+  if (given.length > 1 || !/^[1-3]$/.test(given[0].value || '')) throw new Error(`Usage: ${usage}; --click-count is 1, 2 or 3, once (2 is a double-click, 3 a triple-click)`);
+  return Number(given[0].value);
 }
 
 // A trailing --submit, as playwright-cli's fill and type take: Enter afterwards.
@@ -177,9 +196,30 @@ async function chooseMatch(selector, timeout) {
   throw error;
 }
 
+// The button, from a word (click e5 right) or --button=right, as Playwright's option is named; not both.
+function chooseButton(found, positional, usage) {
+  const named = found.filter(o => o.name === 'button');
+  if (named.length > 1 || (named.length && !/^(?:left|right|middle)$/.test(named[0].value || ''))) throw new Error(`Usage: ${usage}; --button is left, right or middle, once`);
+  if (positional && named.length) throw new Error(`Usage: ${usage}; the button goes once, as a word or as --button, not both`);
+  return positional || named[0]?.value || null;
+}
+
+// A mouse command's words, its button (a last word, or --button) and its options. Any other --option is
+// refused before a mouse event is sent.
+function mouseArgs(line, usage, spec = {}) {
+  const { found, rest } = takeOptions((line || '').trim(), { button: 'value', ...spec });
+  const words = rest.split(/\s+/).filter(Boolean);
+  const unknown = words.find(w => w.startsWith('--'));
+  if (unknown) throw new Error(`Usage: ${usage}; ${unknown.split('=')[0]} is not one of its options`);
+  const last = /^[a-z]+$/.test(words[words.length - 1] || '') ? words.pop() : null;
+  if (last && !/^(?:left|right|middle)$/.test(last)) throw new Error(`Usage: ${usage}`);
+  return { words, found, button: chooseButton(found, last, usage) || 'left' };
+}
+
 function mouseButton(args, name) {
-  const button = (args || '').trim() || 'left';
-  if (!/^(?:left|right|middle)$/.test(button)) throw new Error(`Usage: ${name} [left|right|middle]`);
+  const usage = `${name} [left|right|middle]`;
+  const { words, button } = mouseArgs(args, usage);
+  if (words.length) throw new Error(`Usage: ${usage}`);
   return button;
 }
 
@@ -386,17 +426,48 @@ function dateInputHolds(kind, value, what, selector) {
 
 const commands = {
   async click(args) {
-    const { selector, shown, options } = clickArgs(args, 'click <selector> [left|right|middle] [--modifiers=<key>[,<key>]]');
-    const which = await pointerAction(selector, (on, sel, o) => (sel ? on.click(sel, o) : on.click(o)), options, 1);
+    const { selector, shown, options } = clickArgs(args, 'click <selector> [left|right|middle] [--button=<button>] [--click-count=<n>] [--modifiers=<key>[,<key>]]', true);
+    const which = await pointerAction(selector, (on, sel, o) => (sel ? on.click(sel, o) : on.click(o)), options, options.clickCount || 1);
     out.log(`Clicked: ${shown}${which}`);
   },
 
   async dblclick(args) {
-    const { selector, shown, options } = clickArgs(args, 'dblclick <selector> [left|right|middle] [--modifiers=<key>[,<key>]]');
+    const { selector, shown, options } = clickArgs(args, 'dblclick <selector> [left|right|middle] [--button=<button>] [--modifiers=<key>[,<key>]]');
     const which = await pointerAction(selector, (on, sel, o) => (sel ? on.dblclick(sel, o) : on.dblclick(o)), options, 2);
     out.log(`Double-clicked: ${shown}${which}`);
   },
 
+  // drag <from> <to>, as playwright-cli's drag: Playwright's locator.dragTo, in its steps (hover the
+  // source, press, hover the target, release), so the cursor can glide to each in turn. Chromium turns
+  // the moves into an HTML5 drag when the source is draggable.
+  async drag(args) {
+    const usage = 'Usage: drag <from> <to>, each a selector or a ref, quoted if it has spaces: drag e5 e9, drag "text=Item 1" "#list li"';
+    const from = splitSelector(args);
+    const to = from?.rest !== undefined ? splitSelector(from.rest) : null;
+    if (!to || to.rest !== undefined) throw new Error(usage);
+    const TIMEOUT = 5000;
+    const deadline = Date.now() + TIMEOUT;
+    const left = () => Math.max(1000, deadline - Date.now());
+    const source = state.page.locator(from.selector).first();
+    const target = state.page.locator(to.selector).first();
+    await onElement(from.selector, () => aimAt(state.page, source, left()));
+    await onElement(from.selector, () => source.hover({ timeout: left() }));
+    await state.page.mouse.down();
+    // Pressed from here on: a failure would leave the button down, which the page would take as a drag still going.
+    try {
+      await showClick(state.page);
+      await onElement(to.selector, () => aimAt(state.page, target, left()));
+      await onElement(to.selector, () => target.hover({ timeout: left() }));
+    } catch (error) {
+      await state.page.mouse.up().catch(() => {});
+      throw error;
+    }
+    await state.page.mouse.up();
+    const box = await target.boundingBox({ timeout: 1000 }).catch(() => null);
+    tabState(state.page).mouseAt = box ? { x: Math.round(box.x + box.width / 2), y: Math.round(box.y + box.height / 2) } : null;
+    out.log(`Dragged ${from.word} to ${to.word}`);
+  },
+
   async hover(args) {
     const selector = soleSelector(args, 'hover <selector>');
     const which = await pointerAction(selector, (on, sel, o) => (sel ? on.hover(sel, o) : on.hover(o)));
@@ -472,23 +543,41 @@ const commands = {
 
   // A click at a point, as Playwright's mouse.click: for what has no selector, such as a marker drawn on a canvas.
   async mouseclick(line) {
-    const usage = 'mouseclick <x> <y> [left|right|middle] [--delay=<ms>]';
-    const held = /(?:^|\s)--delay(?:=|\s+)(\S*)(?=\s|$)/.exec(line || '');
-    if (held && !/^\d+$/.test(held[1])) throw new Error(`Usage: ${usage}, the ms between press and release, e.g. mouseclick 400 300 --delay=500`);
-    const words = (held ? line.replace(held[0], ' ') : line || '').trim().split(/\s+/).filter(Boolean);
-    const button = /^[a-z]+$/.test(words[words.length - 1] || '') ? mouseButton(words.pop(), 'mouseclick <x> <y>') : 'left';
+    const usage = 'mouseclick <x> <y> [left|right|middle] [--button=<button>] [--click-count=<n>] [--delay=<ms>]';
+    const { words, found, button } = mouseArgs(line, usage, { 'click-count': 'value', delay: 'value' });
+    const clickCount = clickCountOf(found, usage);
+    const delay = found.find(o => o.name === 'delay');
+    if (delay && !/^\d+$/.test(delay.value || '')) throw new Error(`Usage: ${usage}, the ms between press and release, e.g. mouseclick 400 300 --delay=500`);
+    const held = delay ? Number(delay.value) : 0;
     const [x, y, extra] = numbers(words.join(' '), usage);
     if (y === undefined || extra !== undefined) throw new Error(`Usage: ${usage}, in CSS pixels from the top left of the viewport`);
     stepTarget(state.page, null, { x, y });
     await glideTo(state.page, x, y);
     await state.page.mouse.move(x, y);
     tabState(state.page).mouseAt = { x, y };
-    // The ring shows at the press, as mousedown's does, while a --delay holds the button.
-    await state.page.mouse.down({ button });
-    await showClick(state.page);
-    if (held) await new Promise(resolve => setTimeout(resolve, Number(held[1])));
-    await state.page.mouse.up({ button });
-    out.log(`Clicked the ${button} button at ${x}, ${y}`);
+    // Each press counts up, as Playwright's mouse.click does it. The ring shows at the first press, as
+    // mousedown's does, while a --delay holds the button.
+    for (let count = 1; count <= clickCount; count += 1) {
+      await state.page.mouse.down({ button, clickCount: count });
+      if (count === 1) await showClick(state.page, clickCount);
+      if (held) await new Promise(resolve => setTimeout(resolve, held));
+      await state.page.mouse.up({ button, clickCount: count });
+    }
+    out.log(`Clicked the ${button} button at ${x}, ${y}${clickCount > 1 ? ` ${clickCount} times` : ''}`);
+  },
+
+  // Two mouseclicks are two single clicks (each event's detail is 1), so no dblclick fires: this is one.
+  async mousedblclick(line) {
+    const usage = 'mousedblclick <x> <y> [left|right|middle] [--button=<button>]';
+    const { words, button } = mouseArgs(line, usage);
+    const [x, y, extra] = numbers(words.join(' '), usage);
+    if (y === undefined || extra !== undefined) throw new Error(`Usage: ${usage}, in CSS pixels from the top left of the viewport`);
+    stepTarget(state.page, null, { x, y });
+    await glideTo(state.page, x, y);
+    await state.page.mouse.dblclick(x, y, { button });
+    tabState(state.page).mouseAt = { x, y };
+    await showClick(state.page, 2);
+    out.log(`Double-clicked the ${button} button at ${x}, ${y}`);
   },
 
   async mousedown(args) {
@@ -633,7 +722,7 @@ const commands = {
     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 files = [...parsed.rest.matchAll(/"((?:[^"\\]|\\.)*)"|'([^']*)'|(\S+)/g)].map(m => path.resolve(m[1] !== undefined ? unescapeDouble(m[1]) : m[2] ?? m[3]));
     const payloads = files.map(file => {
       let buffer;
       try { buffer = fs.readFileSync(file); } catch (error) { throw new Error(`Cannot read ${file}: ${error.code === 'ENOENT' ? 'no such file' : error.code === 'EISDIR' ? 'it is a folder' : error.message}`); }

package/lib/emulation.js

@@ -20,7 +20,8 @@ async function viewportText() {
   const set = tabState(state.page).viewport;
   if (set) return `${set.width}x${set.height} (set with viewport)`;
   const size = await state.page.evaluate(() => `${innerWidth}x${innerHeight}`).catch(() => null);
-  return size ? `${size} (the window's size)` : 'unknown';
+  // The window less its frame (headless Chromium counts one too: a 1280x800 window has a 1280x657 page).
+  return size ? `${size} (the window's page area)` : 'unknown';
 }
 
 const DEFAULT_DEVICE = 'Pixel 7';