npm - @taqwright/taqwright - Versions diffs - 0.0.25 → 0.0.27 - Mend

@taqwright/taqwright 0.0.25 → 0.0.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/inspector/ui.js CHANGED Viewed

@@ -431,6 +431,16 @@ export const INSPECTOR_HTML = `<!doctype html>
     background: #000; box-shadow: 0 6px 22px rgba(0,0,0,0.10); }
   #screen-img { display: block; max-width: 100%; max-height: calc(100vh - 100px);
     user-select: none; -webkit-user-drag: none; }
+  /* Graceful fallback when a snapshot fails / returns no screenshot — shown
+     instead of the browser's broken-image glyph. */
+  .screen-unavailable-msg { display: none; box-sizing: border-box; width: 300px;
+    max-width: 100%; min-height: 480px; max-height: calc(100vh - 100px);
+    flex-direction: column; align-items: center; justify-content: center; gap: 8px;
+    padding: 24px; text-align: center; color: var(--text-dim); }
+  .screen-unavailable-title { font-size: 14px; font-weight: 600; color: var(--text); }
+  .screen-unavailable-sub { font-size: 12.5px; }
+  #screen-host.screen-unavailable #screen-img { display: none; }
+  #screen-host.screen-unavailable .screen-unavailable-msg { display: flex; }
   #highlight { position: absolute; border: 2px solid var(--accent);
     background: rgba(9,105,218,0.12); box-shadow: 0 0 0 9999px rgba(0,0,0,0.40) inset;
     pointer-events: none; transition: all 0.12s ease-out; }
@@ -1147,8 +1157,6 @@ export const INSPECTOR_HTML = `<!doctype html>
       <div class="card card-caps flex">
         <div class="card-head">
           <h2>Capabilities</h2>
-          <span class="grow"></span>
-          <button class="icon" id="btn-caps-reset" title="Reset to defaults from taqwright.config.ts">↺ Reset</button>
         </div>
         <div class="caps-fields">
           <div class="field">
@@ -1289,6 +1297,10 @@ export const INSPECTOR_HTML = `<!doctype html>
       </div>
       <div id="screen-host">
         <img id="screen-img" alt="device screen" />
+        <div class="screen-unavailable-msg">
+          <div class="screen-unavailable-title">Device screen unavailable</div>
+          <div class="screen-unavailable-sub">Couldn't capture the device — retrying…</div>
+        </div>
         <div id="highlight" style="display:none"></div>
         <div id="screen-action-overlay" class="screen-action-overlay" aria-hidden="true">
           <div class="screen-action-card">
@@ -1714,8 +1726,7 @@ await mobile.getByUiSelector('new UiSelector().description("Login")').click();</
             <code>↻ Refresh</code> the list, and <b>Start</b> a shutdown emulator (or select a
             running one / a cloud device).</li>
           <li><b>Step 3 — App &amp; capabilities:</b> point at the app under test with
-            <b>Browse…</b>, tweak or <b>+ Add</b> Appium capabilities (<b>↺ Reset</b> restores the
-            config defaults), then <b>Connect →</b>.</li>
+            <b>Browse…</b>, tweak or <b>+ Add</b> Appium capabilities, then <b>Connect →</b>.</li>
         </ul>
       </div>
     </details>
@@ -2036,6 +2047,12 @@ await mobile.getByUiSelector('new UiSelector().description("Login")').click();</
     if (autoRefreshOn) scheduleNextRefresh(Math.max(base, elapsed));
   }
+  // Toggle the "device screen unavailable" fallback (shown when a snapshot
+  // fails or returns no screenshot, so we never render a broken <img>).
+  function setScreenUnavailable(on) {
+    $('screen-host').classList.toggle('screen-unavailable', !!on);
+  }
   async function fetchSnapshot(opts) {
     const force = opts && opts.force;
     if (snapshotInFlight) {
@@ -2065,7 +2082,14 @@ await mobile.getByUiSelector('new UiSelector().description("Login")').click();</
       state.sourceXml = j.source;
       $('session-meta').textContent = formatSessionMeta(j.platform, j.project);
       $('screen-meta').textContent = j.viewport.w + ' × ' + j.viewport.h;
-      $('screen-img').src = 'data:image/png;base64,' + j.screenshot;
+      // Only set the image when there's an actual screenshot — an empty/missing
+      // one would render as a broken <img>; show the fallback instead.
+      if (typeof j.screenshot === 'string' && j.screenshot.length > 0) {
+        $('screen-img').src = 'data:image/png;base64,' + j.screenshot;
+        setScreenUnavailable(false);
+      } else {
+        setScreenUnavailable(true);
+      }
       renderTree();
       if (hierarchyMode === 'xml') refreshHierarchyXml();
       if (prevXpath && prevSig) {
@@ -2089,6 +2113,7 @@ await mobile.getByUiSelector('new UiSelector().description("Login")').click();</
       setStatus('idle');
     } catch (err) {
       setStatus('error: ' + err.message);
+      setScreenUnavailable(true);
     } finally {
       snapshotInFlight = false;
     }
@@ -2716,6 +2741,10 @@ await mobile.getByUiSelector('new UiSelector().description("Login")').click();</
     };
   }
+  // A corrupt/truncated data URI fails to decode — fall back rather than show
+  // the browser's broken-image glyph.
+  $('screen-img').addEventListener('error', () => setScreenUnavailable(true));
   $('screen-img').addEventListener('mouseup', (ev) => {
     const pt = imgToDevice(ev);
     // Pick mode (Record tab) takes priority — consume one click then dismiss.
@@ -4042,7 +4071,6 @@ await mobile.getByUiSelector('new UiSelector().description("Login")').click();</
     $('btn-appium-recheck').onclick = refreshAppiumPill;
     $('btn-appium-restart').onclick = restartAppium;
     $('btn-appium-start').onclick = startAppium;
-    $('btn-caps-reset').onclick = () => applyCapsToForm(initial.defaults.capabilities);
     $('btn-connect').onclick = doConnect;
     $('btn-add-cap').onclick = () => addExtraRow({ key: '', value: '' }, true);
     $('btn-devices-refresh').onclick = loadDevices;
@@ -4250,8 +4278,24 @@ await mobile.getByUiSelector('new UiSelector().description("Login")').click();</
     updateConnectSummary();
   }
+  // Whether the wizard is allowed to advance forward off the given step (its
+  // prerequisites are met). Mirrors the gating in updateConnectSummary.
+  function canAdvanceFrom(step) {
+    if (step === 1) {
+      return isCloudMode() ? cloudCredsValid : $('appium-pill').classList.contains('live');
+    }
+    // Require an actual selected, booted device — not just a pre-filled
+    // cap-device value (config defaults seed it, which would wrongly enable Next).
+    if (step === 2) return selectedDeviceKey !== null;
+    return true;
+  }
   function goToStep(n) {
     if (n < 1 || n > 3) return;
+    // Hard-gate forward navigation: never advance past a step whose
+    // prerequisites aren't met — even for programmatic callers like the guided
+    // tour. Backward navigation and re-selecting the current step are free.
+    if (n > wizardStep && !canAdvanceFrom(wizardStep)) return;
     wizardStep = n;
     document.querySelectorAll('.wizard-page').forEach((p) => {
       p.classList.toggle('active', Number(p.getAttribute('data-page')) === n);
@@ -4507,8 +4551,10 @@ await mobile.getByUiSelector('new UiSelector().description("Login")').click();</
       return;
     }
     if (wizardStep === 2) {
-      const sel = $('cap-device').value.trim();
-      if (sel) {
+      // Gate on the real selection (a tapped, booted device), not the pre-filled
+      // cap-device value — otherwise Next is enabled before any live device is picked.
+      if (selectedDeviceKey !== null) {
+        const sel = $('cap-device').value.trim();
         summary.innerHTML =
           'Selected <strong>' + escapeHtml(sel) + '</strong> — click <strong>Next</strong> or pick another device.';
         nextBtn.disabled = false;
@@ -4673,6 +4719,20 @@ await mobile.getByUiSelector('new UiSelector().description("Login")').click();</
   function renderDevices() {
     const data = lastDeviceData;
+    // Drop a stale selection: if the selected device is no longer booted (e.g.
+    // it was stopped, or shut down between polls), clear it so Next disables —
+    // a selection must always point at a currently-live device.
+    if (selectedDeviceKey !== null) {
+      const all = [...(data.android || []), ...(data.ios || [])];
+      const stillLive = all.some((d) => d.state === 'booted' && bootingKey(d) === selectedDeviceKey);
+      if (!stillLive) {
+        selectedDeviceKey = null;
+        selectedCloudDevice = null;
+        $('cap-device').value = '';
+        updateConnectSummary();
+      }
+    }
     // Tool-missing warnings.
     const warns = [];
     if (data.toolsMissing?.adb) warns.push("adb not on PATH — Android emulators won't show.");
@@ -4886,7 +4946,9 @@ await mobile.getByUiSelector('new UiSelector().description("Login")').click();</
         const found = list.find((d) => bootingKey(d) === key);
         if (found && found.state === 'booted') {
           bootingDevices.delete(key);
-          renderDevices();
+          // Auto-select the device the user just started — no manual click needed.
+          // selectDevice() also re-renders (✓) and enables Next (gated on selection).
+          selectDevice(found);
           showToast(dev.name + ' is up and ready.', 'success', { title: 'Device booted' });
           return;
         }
@@ -5188,6 +5250,34 @@ await mobile.getByUiSelector('new UiSelector().description("Login")').click();</
     const t = document.querySelector('.tab[data-tab="' + name + '"]');
     if (t) t.click();
   }
+  // Live tour only: the Locators / Attributes panels are empty until an element
+  // is selected, so the tour would spotlight a blank panel. If the user hasn't
+  // selected anything yet, auto-select a representative node (one with an id /
+  // text / content-desc, else the first node) so those steps show real content.
+  function tourEnsureSelection() {
+    if (state.selected) return;
+    let pick = null;
+    for (const [, el] of state.nodeMap) {
+      if (!el || !el.getAttribute) continue;
+      if (
+        el.getAttribute('resource-id') ||
+        el.getAttribute('text') ||
+        el.getAttribute('content-desc') ||
+        el.getAttribute('name') ||
+        el.getAttribute('label')
+      ) {
+        pick = el;
+        break;
+      }
+    }
+    if (!pick) {
+      for (const [, el] of state.nodeMap) {
+        pick = el;
+        break;
+      }
+    }
+    if (pick) selectElement(pick);
+  }
   // Switch the demo stage's mock right-hand tab (Record / Script / Locators / Attributes).
   function showDemoTab(name) {
     ['rec', 'script', 'loc', 'attrs'].forEach((k) => {
@@ -5210,7 +5300,7 @@ await mobile.getByUiSelector('new UiSelector().description("Login")').click();</
     { sel: '#btn-devices-refresh', before: function () { goToStep(2); }, title: 'Step 2 — Pick a device',
       body: 'Switch the <b>Android / iOS</b> tabs and <b>↻ Refresh</b> the list. <b>Start</b> a shutdown emulator, or pick a running one / a cloud device.' },
     { sel: '#btn-app-browse', before: function () { goToStep(3); }, title: 'Step 3 — App & capabilities',
-      body: 'Point at the app under test with <b>Browse…</b>, then tweak or <b>+ Add</b> Appium capabilities (<b>↺ Reset</b> restores config defaults).' },
+      body: 'Point at the app under test with <b>Browse…</b>, then tweak or <b>+ Add</b> Appium capabilities.' },
     { sel: '#btn-connect', before: function () { goToStep(3); }, title: 'Connect',
       body: 'Hit <b>Connect →</b> to open the session and enter the inspector.' },
     { sel: null, title: 'You are set',
@@ -5230,9 +5320,9 @@ await mobile.getByUiSelector('new UiSelector().description("Login")').click();</
       body: 'Press <b>Start record</b>, select an element, then choose an action — Click, Type, Clear, gestures… The <b>Actions / Screen / Assertions</b> sub-tabs switch what you capture. Each step is appended live.' },
     { sel: '#tab-script', before: function () { tourClickTab('script'); }, title: 'Recorded script',
       body: 'Your test in <b>Taqwright</b> (runnable), or <b>Python</b> / <b>Java</b> (steps only). Use <b>⎘ Copy</b>, <b>↓ Export</b> (saves into your tests folder), or Clear.' },
-    { sel: '#tab-locators', before: function () { tourClickTab('locators'); }, title: 'Locators',
+    { sel: '#tab-locators', before: function () { tourEnsureSelection(); tourClickTab('locators'); }, title: 'Locators',
       body: 'Ranked, uniqueness-verified selectors for the selected element — id, accessibility id, UIAutomator / NSPredicate / Class Chain, xpath. The <b>recommended</b> pick is on top; click any to copy.' },
-    { sel: '#tab-attrs', before: function () { tourClickTab('attrs'); }, title: 'Attributes',
+    { sel: '#tab-attrs', before: function () { tourEnsureSelection(); tourClickTab('attrs'); }, title: 'Attributes',
       body: 'The selected element\\'s full attribute set (resource-id, class, text, content-desc, bounds…) plus its xpath.' },
     { sel: '#btn-disconnect', before: function () { tourClickTab('record'); }, title: 'Done',
       body: 'When finished, <b>Disconnect</b> ends the session and returns to setup. Reopen this tour any time with <b>? Help</b>.' },

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@taqwright/taqwright",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "description": "E2E mobile testing on the Playwright runner",
   "license": "Apache-2.0",
   "type": "module",
@@ -40,8 +40,9 @@
     "format:check": "prettier --check .",
     "test": "npm run build && node --test test/*.test.js",
     "test:watch": "node --test --watch test/*.test.js",
+    "test:e2e": "playwright test --config e2e/playwright.config.ts",
     "test:coverage": "npm run build && node --test --experimental-test-coverage test/*.test.js",
-    "prepare": "npm run build",
+    "prepare": "node scripts/prepare.mjs",
     "prepublishOnly": "npm run build",
     "version": "node scripts/sync-readme-version.mjs && git add README.md"
   },