@xylentis/testgen 1.1.1 → 1.2.0

package/ui/app.js

@@ -10,9 +10,14 @@ const browsers = {
 };
 
 let targets = [];
-let snapshot = { status: 'idle', steps: [], outputs: {}, settings: {} };
+let snapshot = { status: 'idle', steps: [], outputs: {}, settings: {}, checks: [], missingSecrets: [] };
 let activeTarget = remember('target') || 'playwright-ts';
 let activeFile = 0;
+// The step whose editor is open, with the steps it was opened on: any other change closes it.
+let editing;
+// What the step list and the replay result were last built from.
+let renderedSteps = '';
+let renderedReplay = '';
 
 function remember(key, value) {
   try {
@@ -39,38 +44,42 @@ function showError(message) {
 
 // ---- Rendering --------------------------------------------------------------------------------
 
+const plural = (count, word) => `${count} ${word}${count === 1 ? '' : 's'}`;
+
 function render() {
   const recording = snapshot.status === 'recording';
+  const replaying = snapshot.replay?.status === 'running';
   const count = snapshot.steps.length;
   document.body.classList.toggle('recording', recording);
   $('record').hidden = recording;
   $('stop').hidden = !recording;
-  $('status').textContent = recording
-    ? `Recording… ${count} step${count === 1 ? '' : 's'}. Close the browser window or press Stop to finish.`
-    : snapshot.status === 'stopped' ? `${count} step${count === 1 ? '' : 's'} recorded` : 'Ready';
+  if (recording)
+    $('status').textContent = `Recording… ${plural(count, 'step')}. Close the browser window or press Stop to finish.`;
+  else if (replaying)
+    $('status').textContent = `Replaying… step ${Math.min(snapshot.replay.steps.length, count)} of ${count}`;
+  else
+    $('status').textContent = snapshot.status === 'stopped' ? `${plural(count, 'step')} recorded` : 'Ready';
   showError(snapshot.error || snapshot.parseError);
-  $('download-recording').toggleAttribute('hidden', !snapshot.recording);
+  $('download-recording').toggleAttribute('hidden', !snapshot.hasRecording);
 
   $('step-count').textContent = String(count);
   $('steps-empty').hidden = count > 0;
-  $('steps').replaceChildren(...snapshot.steps.map(step => {
-    const item = document.createElement('li');
-    const page = document.createElement('span');
-    page.className = 'page';
-    page.textContent = step.page;
-    const text = document.createElement('span');
-    text.className = 'text';
-    text.textContent = step.text;
-    item.append(page, text);
-    return item;
-  }));
-  $('steps').lastElementChild?.scrollIntoView({ block: 'nearest' });
+  $('undo').disabled = !snapshot.canUndo || recording || replaying;
+  $('replay').hidden = replaying;
+  $('replay').disabled = recording || !count;
+  $('stop-replay').hidden = !replaying;
+  if (recording || replaying)
+    $('replay-secrets').hidden = true;
+  renderSteps();
+  renderReplay();
 
   for (const [key, id] of [['name', 'name'], ['packageName', 'package'], ['testIdAttribute', 'test-id']]) {
     const input = $(id);
     if (document.activeElement !== input && snapshot.settings[key] !== undefined)
       input.value = snapshot.settings[key];
   }
+  for (const [key, id] of [['logSteps', 'log-steps'], ['dataDriven', 'data-driven']])
+    $(id).checked = !!snapshot.settings[key];
   // The code keeps the test id attribute the recording was made with; the field is for the next one.
   const recorded = snapshot.recordedTestIdAttribute;
   const next = snapshot.settings.testIdAttribute;
@@ -79,6 +88,341 @@ function render() {
     : '';
   renderTargets();
   renderCode();
+  renderChecks();
+}
+
+// ---- Steps: list, editor, replay ------------------------------------------------------------
+
+const replaySymbols = { running: '…', passed: '✓', skipped: '–', failed: '✗' };
+
+function renderSteps() {
+  const stepsJson = JSON.stringify(snapshot.steps);
+  if (editing && (editing.steps !== stepsJson || snapshot.status === 'recording' || snapshot.replay?.status === 'running'))
+    editing = undefined;
+  const key = JSON.stringify([stepsJson, snapshot.status, snapshot.replay?.status, snapshot.replay?.steps, snapshot.checks, editing?.index]);
+  if (key === renderedSteps)
+    return;
+  renderedSteps = key;
+  $('steps').replaceChildren(...snapshot.steps.map(stepItem));
+  if (snapshot.status === 'recording')
+    $('steps').lastElementChild?.scrollIntoView({ block: 'nearest' });
+  else if (snapshot.replay?.status === 'running')
+    $('steps').children[snapshot.replay.steps.length - 1]?.scrollIntoView({ block: 'nearest' });
+  if (editing)
+    $('steps').querySelector('.step-editor input, .step-editor textarea')?.focus();
+}
+
+function stepItem(step, index) {
+  const item = document.createElement('li');
+  item.id = `step-${index + 1}`;
+  const result = snapshot.replay?.steps?.[index];
+  if (result)
+    item.dataset.replay = result.status;
+  const page = element('span', 'page', step.page);
+  const text = element('span', 'text', step.text);
+  const badges = element('span', 'badges');
+  for (const check of snapshot.checks.filter(c => c.step === index && c.level === 'warning'))
+    badges.append(element('span', 'badge warning', '!', check.message));
+  if (result)
+    badges.append(element('span', `badge replay ${result.status}`, replaySymbols[result.status], replayTitle(result)));
+  const body = element('span', 'body');
+  body.append(text, badges);
+  item.append(page, body);
+
+  const busy = snapshot.status === 'recording' || snapshot.replay?.status === 'running';
+  if (!busy && editing?.index !== index) {
+    const actions = element('span', 'step-actions');
+    const n = index + 1;
+    actions.append(
+        stepButton('Edit', `Edit step ${n}`, () => {
+          editing = { index, steps: JSON.stringify(snapshot.steps) };
+          renderSteps();
+        }),
+        stepButton('↑', `Move step ${n} up`, () => changeStep({ action: 'move', index, to: index - 1 }), index === 0),
+        stepButton('↓', `Move step ${n} down`, () => changeStep({ action: 'move', index, to: index + 1 }), index === snapshot.steps.length - 1),
+        stepButton('✕', `Delete step ${n}`, () => changeStep({ action: 'delete', index })),
+    );
+    item.append(actions);
+  }
+  if (result?.status === 'failed' || result?.note)
+    item.append(element('p', 'step-detail', result.error ?? result.note));
+  if (editing?.index === index)
+    item.append(stepEditor(step, index));
+  return item;
+}
+
+function replayTitle(result) {
+  const time = result.duration !== undefined ? ` in ${result.duration} ms` : '';
+  return { running: 'Running', passed: `Passed${time}`, skipped: `Skipped: ${result.note}`, failed: `Failed${time}` }[result.status];
+}
+
+function stepButton(label, title, onClick, disabled = false) {
+  const button = element('button', 'step-button', label);
+  button.type = 'button';
+  button.title = title;
+  button.setAttribute('aria-label', title);
+  button.disabled = disabled;
+  button.addEventListener('click', onClick);
+  return button;
+}
+
+async function changeStep(body) {
+  try {
+    await post('/api/steps', body);
+    showError('');
+  } catch (error) {
+    showError(error.message);
+  }
+}
+
+// Form for the locator, value and secret of a step; it sends only what changed.
+function stepEditor(step, index) {
+  const { fields } = step;
+  const form = element('form', 'step-editor');
+  form.setAttribute('aria-label', `Edit step ${index + 1}`);
+  const controls = {};
+  const row = (label, control) => {
+    const wrapper = element('label', 'field');
+    wrapper.append(element('span', '', label), control);
+    form.append(wrapper);
+  };
+  if (fields.locator !== undefined) {
+    controls.locator = input('text', fields.locator);
+    controls.locator.spellcheck = false;
+    row('Locator', controls.locator);
+  }
+  if (fields.valueLabel) {
+    const lines = fields.valueLabel === 'Options' || fields.valueLabel === 'Files';
+    controls.value = lines ? element('textarea') : input(fields.secret ? 'password' : 'text', fields.value ?? '');
+    if (lines) {
+      controls.value.value = fields.value ?? '';
+      controls.value.rows = Math.min(4, Math.max(2, (fields.value ?? '').split('\n').length));
+    }
+    if (fields.secret)
+      controls.value.placeholder = 'unchanged';
+    row(lines ? `${fields.valueLabel} (one per line)` : fields.valueLabel, controls.value);
+  }
+  if (fields.substring !== undefined) {
+    controls.substring = input('checkbox');
+    controls.substring.checked = fields.substring;
+    row('Contains the text, not the whole text', controls.substring);
+  }
+  if (fields.checked !== undefined) {
+    controls.checked = input('checkbox');
+    controls.checked.checked = fields.checked;
+    row('Checked', controls.checked);
+  }
+  if (fields.secretChosen !== undefined) {
+    controls.secret = input('checkbox');
+    controls.secret.checked = !!fields.secret;
+    controls.secretName = input('text', fields.secret ?? '');
+    controls.secretName.spellcheck = false;
+    controls.secretName.disabled = !fields.secret;
+    controls.secretName.setAttribute('aria-label', 'Environment variable');
+    controls.secret.addEventListener('change', () => {
+      controls.secretName.disabled = !controls.secret.checked;
+      if (controls.secret.checked && !controls.secretName.value)
+        controls.secretName.value = 'TEST_SECRET';
+    });
+    const wrapper = element('div', 'field secret-field');
+    const label = element('label');
+    label.append(controls.secret, ' Secret: the test reads it from');
+    wrapper.append(label, controls.secretName);
+    form.append(wrapper);
+  }
+  const error = element('p', 'editor-error');
+  error.setAttribute('role', 'alert');
+  const buttons = element('div', 'editor-buttons');
+  const save = element('button', 'primary', 'Save');
+  save.type = 'submit';
+  const cancel = element('button', '', 'Cancel');
+  cancel.type = 'button';
+  cancel.addEventListener('click', () => {
+    editing = undefined;
+    renderSteps();
+  });
+  buttons.append(save, cancel);
+  form.append(error, buttons);
+  form.addEventListener('keydown', event => {
+    if (event.key === 'Escape')
+      cancel.click();
+  });
+
+  form.addEventListener('submit', async event => {
+    event.preventDefault();
+    const change = {};
+    if (controls.locator && controls.locator.value !== fields.locator)
+      change.locator = controls.locator.value;
+    if (controls.value && controls.value.value !== (fields.value ?? '') && !(fields.secret && !controls.value.value))
+      change.value = controls.value.value;
+    if (controls.substring && controls.substring.checked !== fields.substring)
+      change.substring = controls.substring.checked;
+    if (controls.checked && controls.checked.checked !== fields.checked)
+      change.checked = controls.checked.checked;
+    if (controls.secret) {
+      const name = controls.secretName.value.trim();
+      if (controls.secret.checked && name !== fields.secret)
+        change.secret = name;
+      if (!controls.secret.checked && fields.secret)
+        change.secret = false;
+    }
+    if (!Object.keys(change).length) {
+      cancel.click();
+      return;
+    }
+    try {
+      await post('/api/steps', { action: 'edit', index, change });
+      // The new steps close the editor when they arrive; close it now if they have not yet.
+      if (editing?.index === index) {
+        editing = undefined;
+        renderSteps();
+      }
+    } catch (e) {
+      error.textContent = e.message;
+    }
+  });
+  return form;
+}
+
+function renderReplay() {
+  const replay = snapshot.replay;
+  const key = JSON.stringify(replay ?? null);
+  if (key === renderedReplay)
+    return;
+  renderedReplay = key;
+  const box = $('replay-result');
+  box.hidden = !replay;
+  if (!replay)
+    return;
+  box.className = `replay-result ${replay.status}`;
+  const failed = replay.steps.findIndex(step => step?.status === 'failed');
+  const skipped = replay.steps.filter(step => step?.status === 'skipped').length;
+  const seconds = `${((replay.duration ?? 0) / 1000).toFixed(1)} s`;
+  const summary = {
+    running: 'Replaying the steps with Playwright…',
+    passed: `Replay passed: ${plural(replay.steps.length, 'step')} in ${seconds}${skipped ? `, ${skipped} skipped` : ''}.`,
+    failed: failed >= 0 ? `Replay failed at step ${failed + 1}.` : `Replay failed: ${replay.error}`,
+    stopped: 'Replay stopped.',
+  }[replay.status];
+  const children = [element('p', 'summary', summary)];
+  if (failed >= 0) {
+    children.push(element('pre', 'replay-error', replay.steps[failed].error));
+    const link = document.createElement('a');
+    link.href = `/api/replay/screenshot?v=${replay.screenshot ?? 0}`;
+    link.target = '_blank';
+    link.className = 'screenshot';
+    if (replay.screenshot) {
+      const image = document.createElement('img');
+      // The list gets shorter once the screenshot shows.
+      image.addEventListener('load', revealFailedStep);
+      image.src = link.href;
+      image.alt = `The page when step ${failed + 1} failed`;
+      link.append(image);
+      children.push(link);
+    }
+    const edit = element('button', '', `Edit step ${failed + 1}`);
+    edit.type = 'button';
+    edit.addEventListener('click', () => {
+      editing = { index: failed, steps: JSON.stringify(snapshot.steps) };
+      renderSteps();
+      $(`step-${failed + 1}`)?.scrollIntoView({ block: 'nearest' });
+    });
+    children.push(edit);
+  }
+  box.replaceChildren(...children);
+  revealFailedStep();
+}
+
+function revealFailedStep() {
+  $('steps').querySelector('[data-replay="failed"]')?.scrollIntoView({ block: 'nearest' });
+}
+
+// Asks for the values of secrets the recording does not keep, then replays.
+function showReplaySecrets() {
+  const form = $('replay-secrets');
+  const fields = snapshot.missingSecrets.map(name => {
+    const label = element('label', 'field');
+    const value = input('password');
+    value.name = name;
+    value.required = true;
+    value.autocomplete = 'off';
+    label.append(element('span', '', name), value);
+    return label;
+  });
+  const start = element('button', 'primary', 'Replay');
+  start.type = 'submit';
+  const cancel = element('button', '', 'Cancel');
+  cancel.type = 'button';
+  cancel.addEventListener('click', () => form.hidden = true);
+  const buttons = element('div', 'editor-buttons');
+  buttons.append(start, cancel);
+  form.replaceChildren(element('p', '', 'The recording does not keep the values typed into password fields. Enter them to replay; testgen keeps them in memory until it stops.'), ...fields, buttons);
+  form.hidden = false;
+  form.querySelector('input')?.focus();
+}
+
+$('replay-secrets').addEventListener('submit', event => {
+  event.preventDefault();
+  const secrets = Object.fromEntries([...$('replay-secrets').querySelectorAll('input')].map(input => [input.name, input.value]));
+  $('replay-secrets').hidden = true;
+  startReplay(secrets);
+});
+
+async function startReplay(secrets = {}) {
+  editing = undefined;
+  try {
+    await post('/api/replay', { secrets });
+    showError('');
+  } catch (error) {
+    showError(error.message);
+  }
+}
+
+$('replay').addEventListener('click', () => snapshot.missingSecrets.length ? showReplaySecrets() : startReplay());
+$('stop-replay').addEventListener('click', () => post('/api/replay/stop').catch(error => showError(error.message)));
+$('undo').addEventListener('click', () => post('/api/undo').catch(error => showError(error.message)));
+
+// Checks of the recording, and what the code of the open target cannot do.
+function renderChecks() {
+  const target = snapshot.outputs[activeTarget];
+  const checks = [...snapshot.checks, ...(target?.checks ?? [])];
+  $('checks').hidden = !checks.length;
+  $('check-count').textContent = String(checks.length);
+  $('check-list').replaceChildren(...checks.map(check => {
+    const item = element('li', check.level, check.message);
+    if (check.step !== undefined) {
+      item.tabIndex = 0;
+      item.title = `Show step ${check.step + 1}`;
+      const show = () => {
+        const step = $(`step-${check.step + 1}`);
+        step?.scrollIntoView({ block: 'nearest' });
+        step?.classList.add('flash');
+        setTimeout(() => step?.classList.remove('flash'), 1200);
+      };
+      item.addEventListener('click', show);
+      item.addEventListener('keydown', event => event.key === 'Enter' && show());
+    }
+    return item;
+  }));
+}
+
+function element(tag, className = '', text, title) {
+  const node = document.createElement(tag);
+  if (className)
+    node.className = className;
+  if (text !== undefined)
+    node.textContent = text;
+  if (title)
+    node.title = title;
+  return node;
+}
+
+function input(type, value) {
+  const node = document.createElement('input');
+  node.type = type;
+  if (value !== undefined)
+    node.value = value;
+  return node;
 }
 
 function renderTargets() {
@@ -87,7 +431,9 @@ function renderTargets() {
     button.type = 'button';
     button.setAttribute('role', 'tab');
     button.setAttribute('aria-selected', String(target.id === activeTarget));
-    button.innerHTML = `${escapeHtml(target.framework.split(' ')[0])} · ${escapeHtml(target.language)}<small>${escapeHtml(target.id)}</small>`;
+    const todos = snapshot.outputs[target.id]?.checks?.length;
+    const badge = todos ? ` <span class="tag warning" title="${plural(todos, 'thing')} this target cannot do: see Checks">${todos}</span>` : '';
+    button.innerHTML = `${escapeHtml(target.framework.split(' ')[0])} · ${escapeHtml(target.language)}${badge}<small>${escapeHtml(target.id)}</small>`;
     button.addEventListener('click', () => {
       activeTarget = target.id;
       activeFile = 0;
@@ -104,6 +450,11 @@ function currentFiles() {
 }
 
 function renderCode() {
+  const target = targets.find(t => t.id === activeTarget);
+  const ignored = [['logSteps', 'Log steps'], ['dataDriven', 'Data-driven']]
+      .filter(([key]) => snapshot.settings[key] && target && !target.features.includes(key))
+      .map(([, label]) => label);
+  $('target-note').textContent = ignored.length ? `${ignored.join(' and ')}: not for this target (Playwright shows steps in its report and trace).` : '';
   const files = currentFiles();
   if (activeFile >= files.length)
     activeFile = 0;
@@ -112,7 +463,8 @@ function renderCode() {
     button.type = 'button';
     button.setAttribute('role', 'tab');
     button.setAttribute('aria-selected', String(index === activeFile));
-    button.innerHTML = `${escapeHtml(file.path)}${file.support ? '<span class="tag">support</span>' : ''}`;
+    const tag = file.support ? 'support' : file.data ? 'data' : '';
+    button.innerHTML = `${escapeHtml(file.path)}${tag ? `<span class="tag">${tag}</span>` : ''}`;
     button.addEventListener('click', () => {
       activeFile = index;
       renderCode();
@@ -195,15 +547,24 @@ $('record-form').addEventListener('submit', async event => {
 $('stop').addEventListener('click', () => post('/api/stop').catch(error => showError(error.message)));
 
 let settingsTimer;
+function postSettings() {
+  clearTimeout(settingsTimer);
+  post('/api/settings', {
+    name: $('name').value,
+    packageName: $('package').value,
+    testIdAttribute: $('test-id').value,
+    logSteps: $('log-steps').checked,
+    dataDriven: $('data-driven').checked,
+  }).catch(error => showError(error.message));
+}
 for (const id of ['name', 'package', 'test-id']) {
   $(id).addEventListener('input', () => {
     clearTimeout(settingsTimer);
-    settingsTimer = setTimeout(() => {
-      post('/api/settings', { name: $('name').value, packageName: $('package').value, testIdAttribute: $('test-id').value })
-          .catch(error => showError(error.message));
-    }, 300);
+    settingsTimer = setTimeout(postSettings, 300);
   });
 }
+for (const id of ['log-steps', 'data-driven'])
+  $(id).addEventListener('change', postSettings);
 
 $('open').addEventListener('change', async () => {
   const file = $('open').files[0];
@@ -243,8 +604,8 @@ $('save-form').addEventListener('submit', async event => {
   event.preventDefault();
   $('save-result').textContent = 'Saving…';
   try {
-    const { written } = await post('/api/save', { target: activeTarget, outDir: $('out-dir').value });
-    $('save-result').textContent = `Saved ${written.join(', ')}`;
+    const { written, kept } = await post('/api/save', { target: activeTarget, outDir: $('out-dir').value });
+    $('save-result').textContent = `Saved ${written.join(', ')}` + (kept.length ? `. Kept the existing ${kept.join(', ')}.` : '');
   } catch (error) {
     $('save-result').textContent = '';
     showError(error.message);

package/ui/index.html

@@ -29,6 +29,8 @@
     <label>Package <input id="package" placeholder="e.g. com.acme.e2e" spellcheck="false"></label>
     <label>Test id attribute <input id="test-id" value="data-testid" spellcheck="false" aria-describedby="test-id-note"></label>
     <span id="test-id-note" class="note" role="status"></span>
+    <label title="Selenium targets: log every step and assertion result (console, TestNG report)"><input id="log-steps" type="checkbox"> Log steps</label>
+    <label title="Typed, selected and asserted values come from a CSV file next to the test; the test runs once per row"><input id="data-driven" type="checkbox"> Data-driven (CSV)</label>
     <span class="spacer"></span>
     <label class="file-button">Open recording… <input id="open" type="file" accept=".jsonl,.json,.txt"></label>
     <a id="download-recording" class="button" href="/api/recording" download="recording.jsonl">Download recording</a>
@@ -37,17 +39,31 @@
   <div id="error" class="error" hidden></div>
 
   <main class="workspace">
-    <aside class="steps">
-      <h2>Steps <span id="step-count" class="count">0</span></h2>
+    <aside class="steps" aria-label="Steps">
+      <div class="steps-bar">
+        <h2>Steps <span id="step-count" class="count">0</span></h2>
+        <span class="spacer"></span>
+        <button id="undo" type="button" title="Undo the last change to the steps" disabled>Undo</button>
+        <button id="replay" type="button" title="Run the steps again in a browser, with Playwright, to see whether they still work">Replay</button>
+        <button id="stop-replay" type="button" class="danger" hidden>Stop replay</button>
+      </div>
+      <form id="replay-secrets" class="replay-secrets" hidden></form>
+      <div id="replay-result" class="replay-result" role="status" hidden></div>
       <ol id="steps"></ol>
       <p id="steps-empty" class="empty">Enter a URL and press <strong>Record</strong>. A browser opens; click and type as a user would.
-        Use the recorder toolbar in the page to add assertions. Close the browser or press <strong>Stop</strong> when done.</p>
+        Use the recorder toolbar in the page to add assertions. Close the browser or press <strong>Stop</strong> when done.
+        Then edit, reorder or delete steps here, and press <strong>Replay</strong> to check that they still work.</p>
+      <details id="checks" class="checks" hidden>
+        <summary>Checks <span id="check-count" class="count">0</span></summary>
+        <ul id="check-list"></ul>
+      </details>
     </aside>
 
     <section class="code" aria-label="Generated code">
       <nav id="targets" class="tabs" role="tablist"></nav>
       <div class="file-bar">
         <nav id="files" class="file-tabs" role="tablist"></nav>
+        <span id="target-note" class="note" role="status"></span>
         <span class="spacer"></span>
         <button id="copy" type="button">Copy</button>
         <button id="download" type="button">Download</button>