@restregular/dsh-visual-browser 0.0.0-stage → 0.1.1

package/test/routes.test.mjs

@@ -0,0 +1,207 @@
+import assert from 'node:assert/strict';
+import { BrowserError } from '../lib/browser.js';
+import { handle } from '../lib/routes.js';
+
+const PREFIX = '/visual-browser/api';
+
+function makeRes() {
+  return {
+    statusCode: 200,
+    headers: {},
+    chunks: [],
+    ended: false,
+    setHeader(name, value) {
+      this.headers[String(name).toLowerCase()] = value;
+    },
+    end(data) {
+      if (data !== undefined) this.chunks.push(Buffer.isBuffer(data) ? data : Buffer.from(String(data)));
+      this.ended = true;
+    },
+    get body() {
+      return Buffer.concat(this.chunks).toString('utf8');
+    },
+    get json() {
+      return JSON.parse(this.body);
+    },
+  };
+}
+
+function makeReq(method, url, body) {
+  if (body === undefined) return { method, url };
+  return {
+    method,
+    url,
+    async *[Symbol.asyncIterator]() {
+      yield Buffer.from(JSON.stringify(body));
+    },
+  };
+}
+
+function makeManager() {
+  const manager = {
+    calls: {},
+    state() {
+      return { running: true, url: 'https://demo.test/', frameSeq: 3, actions: [] };
+    },
+    frameFor(seq) {
+      return Number(seq) === 3 ? { seq: 3, jpeg: Buffer.from('jpeg-bytes') } : null;
+    },
+    async refreshFrame() {
+      return this.state();
+    },
+    async open(url) {
+      this.calls.open = url;
+    },
+    async ensureStarted() {
+      this.calls.started = true;
+    },
+    async close() {
+      this.calls.closed = true;
+    },
+    async clickAt(point) {
+      this.calls.click = point;
+    },
+    async wheelAt(point) {
+      this.calls.wheel = point;
+    },
+    async keyFromUser(key) {
+      this.calls.key = key;
+    },
+    async act(input) {
+      this.calls.act = input;
+    },
+    noteError(error) {
+      this.calls.error = error;
+    },
+  };
+  return manager;
+}
+
+async function request(manager, method, path, body) {
+  const res = makeRes();
+  await handle(manager, PREFIX, makeReq(method, PREFIX + path, body), res);
+  return res;
+}
+
+// state
+{
+  const manager = makeManager();
+  const res = await request(manager, 'GET', '/state');
+  assert.equal(res.statusCode, 200);
+  assert.equal(res.headers['content-type'], 'application/json; charset=utf-8');
+  assert.equal(res.json.ok, true);
+  assert.equal(res.json.state.frameSeq, 3);
+}
+
+// frame hit and miss
+{
+  const manager = makeManager();
+  const hit = await request(manager, 'GET', '/frame?seq=3');
+  assert.equal(hit.statusCode, 200);
+  assert.equal(hit.headers['content-type'], 'image/jpeg');
+  assert.equal(hit.body, 'jpeg-bytes');
+
+  const miss = await request(manager, 'GET', '/frame?seq=2');
+  assert.equal(miss.statusCode, 204);
+  assert.equal(miss.chunks.length, 0);
+}
+
+// live capture
+{
+  const manager = makeManager();
+  const res = await request(manager, 'GET', '/live');
+  assert.equal(res.statusCode, 200);
+  assert.equal(res.body, 'jpeg-bytes');
+}
+
+// start with and without a URL
+{
+  const manager = makeManager();
+  const started = await request(manager, 'POST', '/start', { url: 'example.com' });
+  assert.equal(started.statusCode, 200);
+  assert.equal(manager.calls.open, 'example.com');
+
+  const plain = await request(manager, 'POST', '/start', {});
+  assert.equal(plain.statusCode, 200);
+  assert.equal(manager.calls.started, true);
+}
+
+// user interactions
+{
+  const manager = makeManager();
+  const click = await request(manager, 'POST', '/click', { x: 0.5, y: 0.25 });
+  assert.equal(click.statusCode, 200);
+  assert.deepEqual(manager.calls.click, { x: 0.5, y: 0.25 });
+
+  const wheel = await request(manager, 'POST', '/wheel', { deltaY: 240 });
+  assert.equal(wheel.statusCode, 200);
+  assert.deepEqual(manager.calls.wheel, { deltaY: 240, deltaX: undefined });
+
+  const key = await request(manager, 'POST', '/key', { key: 'Enter' });
+  assert.equal(key.statusCode, 200);
+  assert.equal(manager.calls.key, 'Enter');
+
+  const nav = await request(manager, 'POST', '/nav', { action: 'back' });
+  assert.equal(nav.statusCode, 200);
+  assert.deepEqual(manager.calls.act, { action: 'back' });
+
+  const stop = await request(manager, 'POST', '/stop', {});
+  assert.equal(stop.statusCode, 200);
+  assert.equal(manager.calls.closed, true);
+}
+
+// failures
+{
+  const manager = makeManager();
+  const badNav = await request(manager, 'POST', '/nav', { action: 'teleport' });
+  assert.equal(badNav.statusCode, 400);
+  assert.equal(badNav.json.error.code, 'BAD_ACTION');
+
+  const unknown = await request(manager, 'GET', '/nope');
+  assert.equal(unknown.statusCode, 404);
+  assert.equal(unknown.json.error.code, 'NOT_FOUND');
+
+  const res = makeRes();
+  const badReq = {
+    method: 'POST',
+    url: PREFIX + '/click',
+    async *[Symbol.asyncIterator]() {
+      yield Buffer.from('{not json');
+    },
+  };
+  await handle(manager, PREFIX, badReq, res);
+  assert.equal(res.statusCode, 400);
+  assert.equal(res.json.error.code, 'BAD_JSON');
+
+  const toobig = makeRes();
+  const huge = {
+    method: 'POST',
+    url: PREFIX + '/click',
+    async *[Symbol.asyncIterator]() {
+      yield Buffer.alloc(70 * 1024, 0x20);
+    },
+  };
+  await handle(manager, PREFIX, huge, toobig);
+  assert.equal(toobig.statusCode, 413);
+}
+
+// manager failures keep their code and status
+{
+  const manager = makeManager();
+  manager.act = async () => {
+    throw new BrowserError('TARGET_NOT_FOUND', 'no such element');
+  };
+  const res = await request(manager, 'POST', '/nav', { action: 'reload' });
+  assert.equal(res.statusCode, 409);
+  assert.equal(res.json.error.code, 'TARGET_NOT_FOUND');
+  assert.ok(manager.calls.error instanceof BrowserError, 'the failure is remembered for the panel');
+
+  manager.act = async () => {
+    throw new BrowserError('NOT_RUNNING', 'browser is not running');
+  };
+  const offline = await request(manager, 'POST', '/nav', { action: 'reload' });
+  assert.equal(offline.statusCode, 500);
+  assert.equal(offline.json.error.code, 'NOT_RUNNING');
+}
+
+console.log('routes.test.mjs ok');

package/test/scripts.test.mjs

@@ -0,0 +1,214 @@
+import assert from 'node:assert/strict';
+import {
+  prepareTypingExpression,
+  readTextExpression,
+  resolveExpression,
+  selectOptionExpression,
+  snapshotExpression,
+} from '../lib/page-scripts.js';
+
+// ---------------------------------------------------------------------------
+// A deliberately small DOM double: enough of the browser surface that the
+// serialized page scripts run for real and their output can be asserted.
+// ---------------------------------------------------------------------------
+
+function makeElement(options = {}) {
+  const attributes = new Map(Object.entries(options.attrs || {}));
+  const rect = { x: 0, y: 0, width: 120, height: 24, ...(options.rect || {}) };
+  const element = {
+    tagName: String(options.tag || 'div').toUpperCase(),
+    type: options.type,
+    value: options.value,
+    checked: options.checked,
+    disabled: options.disabled,
+    readOnly: false,
+    required: false,
+    isContentEditable: options.editable === true,
+    labels: [],
+    innerText: options.text || '',
+    textContent: options.text || '',
+    options: options.options || [],
+    selectedOptions: options.selectedOptions || [],
+    getAttribute(name) {
+      return attributes.has(name) ? attributes.get(name) : null;
+    },
+    setAttribute(name, value) {
+      attributes.set(name, String(value));
+    },
+    removeAttribute(name) {
+      attributes.delete(name);
+    },
+    hasAttribute(name) {
+      return attributes.has(name);
+    },
+    getBoundingClientRect() {
+      return {
+        left: rect.x,
+        top: rect.y,
+        width: rect.width,
+        height: rect.height,
+        right: rect.x + rect.width,
+        bottom: rect.y + rect.height,
+      };
+    },
+    checkVisibility() {
+      return options.visible !== false;
+    },
+    scrollIntoView() {},
+    focus() {
+      document.activeElement = element;
+    },
+    setSelectionRange() {},
+    dispatchEvent() {
+      return true;
+    },
+  };
+  return element;
+}
+
+const phone = makeElement({ tag: 'input', type: 'text', attrs: { placeholder: '手机号' }, value: '13800000000', rect: { x: 10, y: 10, width: 200, height: 32 } });
+const password = makeElement({ tag: 'input', type: 'password', attrs: { 'aria-label': '密码' }, value: 'secret' });
+const submit = makeElement({ tag: 'button', text: '登录', rect: { x: 10, y: 100, width: 80, height: 32 } });
+const hiddenButton = makeElement({ tag: 'button', text: '隐藏按钮', visible: false });
+const checkbox = makeElement({ tag: 'input', type: 'checkbox', checked: true, attrs: { 'aria-label': '记住我' } });
+const select = makeElement({
+  tag: 'select',
+  options: [
+    { value: 'a', text: '选项一', textContent: '选项一' },
+    { value: 'b', text: '选项二', textContent: '选项二' },
+  ],
+  selectedOptions: [{ text: '选项一', textContent: '选项一' }],
+});
+const link = makeElement({ tag: 'a', text: '忘记密码', attrs: { href: '/forgot' } });
+
+const heading = { tagName: 'H1', innerText: '用户登录', textContent: '用户登录' };
+const elements = [phone, password, submit, hiddenButton, checkbox, select, link];
+
+const document = {
+  title: '登录 - Demo',
+  readyState: 'complete',
+  activeElement: null,
+  body: { innerText: '用户登录 手机号 密码 登录 忘记密码', scrollHeight: 2400 },
+  documentElement: { innerText: '用户登录 手机号 密码 登录 忘记密码', scrollHeight: 2400 },
+  querySelectorAll(selector) {
+    if (selector === '[data-dsh-vb-ref]') return elements.filter((element) => element.hasAttribute('data-dsh-vb-ref'));
+    if (selector === 'h1,h2,h3') return [heading];
+    if (selector === 'iframe') return [];
+    return elements;
+  },
+  querySelector(selector) {
+    const match = /^\[data-dsh-vb-ref="(\d+)"\]$/.exec(selector);
+    if (match) return elements.find((element) => element.getAttribute('data-dsh-vb-ref') === match[1]) || null;
+    return null;
+  },
+  getElementById() {
+    return null;
+  },
+  querySelectorAllCount: 0,
+};
+
+const window = {
+  innerWidth: 1280,
+  innerHeight: 800,
+  scrollY: 0,
+  getComputedStyle() {
+    return { visibility: 'visible', display: 'block', opacity: '1' };
+  },
+  getSelection() {
+    return { removeAllRanges() {}, addRange() {} };
+  },
+};
+
+const location = { href: 'https://demo.test/login' };
+
+function run(expression, extra = {}) {
+  const factory = new Function(
+    'document',
+    'window',
+    'location',
+    'HTMLInputElement',
+    'HTMLTextAreaElement',
+    'Event',
+    `return ${expression}`,
+  );
+  return factory(document, window, location, { prototype: {} }, { prototype: {} }, function Event() {}, ...(extra.args || []));
+}
+
+// ---------------------------------------------------------------------------
+// snapshot
+// ---------------------------------------------------------------------------
+
+const snapshot = run(snapshotExpression({ maxElements: 50, maxNameChars: 20, maxTextChars: 40 }));
+assert.equal(snapshot.url, 'https://demo.test/login');
+assert.equal(snapshot.title, '登录 - Demo');
+assert.equal(snapshot.viewport.width, 1280);
+assert.equal(snapshot.docHeight, 2400);
+assert.equal(snapshot.readyState, 'complete');
+assert.ok(!snapshot.elements.some((element) => element.name === '隐藏按钮'), 'invisible element excluded');
+assert.equal(snapshot.total, 6);
+assert.equal(snapshot.elements.length, 6);
+assert.deepEqual(
+  snapshot.elements.map((element) => element.role),
+  ['textbox', 'textbox', 'button', 'checkbox', 'combobox', 'link'],
+);
+assert.equal(snapshot.elements[0].name, '手机号');
+assert.equal(snapshot.elements[0].value, '13800000000');
+assert.equal(snapshot.elements[1].value, '••••••', 'password value is masked');
+assert.equal(snapshot.elements[2].ref, 3);
+assert.deepEqual(snapshot.elements[3].state, ['checked']);
+assert.equal(snapshot.elements[4].value, '选项一', 'select shows its selected option');
+assert.equal(snapshot.elements[5].href, '/forgot');
+assert.deepEqual(snapshot.headings, ['用户登录']);
+assert.ok(snapshot.text.length <= 40);
+assert.equal(snapshot.frames, 0);
+assert.equal(snapshot.truncated, false);
+assert.equal(phone.getAttribute('data-dsh-vb-ref'), '1');
+assert.equal(link.getAttribute('data-dsh-vb-ref'), '6');
+
+// A second snapshot clears old refs before renumbering.
+const again = run(snapshotExpression({ maxElements: 2 }));
+assert.equal(again.elements.length, 2);
+assert.equal(again.truncated, true);
+assert.equal(again.total, 6);
+assert.equal(link.getAttribute('data-dsh-vb-ref'), null, 'stale refs are cleared');
+
+// ---------------------------------------------------------------------------
+// resolve / typing / select / text
+// ---------------------------------------------------------------------------
+
+// Restore a full numbered view: the clipped snapshot above cleared the refs.
+run(snapshotExpression({ maxElements: 50 }));
+const resolved = run(resolveExpression({ ref: 3 }));
+assert.equal(resolved.ok, true);
+assert.equal(resolved.name, '登录');
+assert.equal(resolved.x, 50);
+assert.equal(resolved.y, 116);
+
+const stale = run(resolveExpression({ ref: 99 }));
+assert.deepEqual(stale, { ok: false, reason: 'stale-ref' });
+
+const focused = run(prepareTypingExpression({ ref: 3, mode: 'replace' }));
+assert.equal(focused.ok, true);
+assert.equal(focused.tag, 'button');
+assert.equal(document.activeElement, submit);
+
+const picked = run(selectOptionExpression({ ref: 5, value: 'b' }));
+assert.equal(picked.ok, true);
+assert.equal(picked.text, '选项二');
+assert.equal(select.value, 'b');
+
+const pageText = run(readTextExpression({ maxChars: 30 }));
+assert.equal(pageText.ok, true);
+assert.equal(pageText.kind, 'page');
+assert.ok(pageText.text.length <= 30);
+assert.equal(pageText.url, 'https://demo.test/login');
+
+const linkText = run(readTextExpression({ ref: 6 }));
+assert.equal(linkText.ok, true);
+assert.equal(linkText.kind, 'element');
+assert.equal(linkText.href, '/forgot');
+
+const missing = run(readTextExpression({ ref: 42 }));
+assert.deepEqual(missing, { ok: false, reason: 'stale-ref' });
+
+console.log('scripts.test.mjs ok');