npm - craftdriver - Versions diffs - 1.1.0 → 1.2.0 - Mend

craftdriver 1.1.0 → 1.2.0

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 (68) hide show

package/CHANGELOG.md +14 -0
package/README.md +1 -1
package/dist/cli/snapshot.js +31 -4
package/dist/cli/snapshot.js.map +1 -1
package/dist/lib/bidi/index.d.ts +4 -5
package/dist/lib/bidi/index.d.ts.map +1 -1
package/dist/lib/bidi/index.js +18 -8
package/dist/lib/bidi/index.js.map +1 -1
package/dist/lib/bidi/logs.d.ts +12 -1
package/dist/lib/bidi/logs.d.ts.map +1 -1
package/dist/lib/bidi/logs.js +20 -8
package/dist/lib/bidi/logs.js.map +1 -1
package/dist/lib/browser.d.ts +6 -9
package/dist/lib/browser.d.ts.map +1 -1
package/dist/lib/browser.js +6 -4
package/dist/lib/browser.js.map +1 -1
package/dist/lib/by.d.ts +18 -0
package/dist/lib/by.d.ts.map +1 -1
package/dist/lib/by.js +141 -17
package/dist/lib/by.js.map +1 -1
package/dist/lib/locator.d.ts +28 -0
package/dist/lib/locator.d.ts.map +1 -1
package/dist/lib/locator.js +28 -0
package/dist/lib/locator.js.map +1 -1
package/docs/browser-api.md +4 -2
package/docs/browser-logs.md +8 -23
package/docs/public/examples/a11y.html +44 -0
package/docs/public/examples/clock.html +83 -0
package/docs/public/examples/console-errors.html +344 -0
package/docs/public/examples/dialogs.html +42 -0
package/docs/public/examples/download.html +31 -0
package/docs/public/examples/dynamic.html +131 -0
package/docs/public/examples/emulate.html +127 -0
package/docs/public/examples/evaluate.html +28 -0
package/docs/public/examples/hover-select.html +295 -0
package/docs/public/examples/iframe-child.html +51 -0
package/docs/public/examples/iframes.html +35 -0
package/docs/public/examples/keyboard.html +195 -0
package/docs/public/examples/locator.html +131 -0
package/docs/public/examples/login.html +116 -0
package/docs/public/examples/mobile.html +270 -0
package/docs/public/examples/mouse.html +505 -0
package/docs/public/examples/network.html +293 -0
package/docs/public/examples/popup-target.html +26 -0
package/docs/public/examples/popup.html +50 -0
package/docs/public/examples/screenshot.html +99 -0
package/docs/public/examples/selectors.html +150 -0
package/docs/public/examples/session.html +514 -0
package/docs/public/examples/upload.html +36 -0
package/docs/recipes/accessibility-gate.md +24 -40
package/docs/recipes/console-error-gate.md +27 -39
package/docs/recipes/file-upload-download.md +24 -44
package/docs/recipes/find-elements.md +142 -0
package/docs/recipes/login-once-reuse-session.md +22 -45
package/docs/recipes/mobile-flow-with-network-and-logs.md +22 -41
package/docs/recipes/mock-api-and-assert-network.md +22 -35
package/docs/recipes/multi-user-contexts.md +32 -43
package/docs/recipes/page-objects.md +52 -0
package/docs/recipes/trace-failing-test.md +31 -44
package/docs/recipes/virtual-clock-time-sensitive-ui.md +24 -40
package/docs/recipes/vitest-browser-lifecycle.md +15 -15
package/docs/recipes.md +20 -1
package/docs/selectors.md +291 -229
package/docs/tracing.md +2 -2
package/package.json +5 -1
package/skills/craftdriver/SKILL.md +3 -2
package/skills/craftdriver/cheatsheet.md +2 -1
package/skills/craftdriver/patterns.md +2 -5

package/docs/public/examples/keyboard.html ADDED Viewed

@@ -0,0 +1,195 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Keyboard Actions Playground</title>
+    <style>
+      :root {
+        --bg: #0f1115;
+        --panel: #151925;
+        --accent: #4f86ff;
+        --text: #e6edf3;
+        --muted: #9aa5b1;
+        --ok: #18a558;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        height: 100%;
+      }
+      body {
+        margin: 0;
+        padding: 16px;
+        color: var(--text);
+        background: var(--bg);
+        font-family:
+          ui-sans-serif,
+          system-ui,
+          -apple-system,
+          Segoe UI,
+          Roboto,
+          Ubuntu,
+          Cantarell,
+          Noto Sans,
+          Helvetica Neue,
+          Arial;
+        display: grid;
+        grid-template-columns: 2fr 1fr;
+        gap: 12px;
+      }
+      h1 {
+        font-size: 18px;
+        margin: 0 0 8px;
+      }
+      .card {
+        background: var(--panel);
+        border: 1px solid #222839;
+        border-radius: 10px;
+        padding: 12px;
+      }
+      .row {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 12px;
+      }
+      textarea,
+      input {
+        width: 100%;
+        background: #0c1426;
+        color: var(--text);
+        border: 1px solid #28314a;
+        border-radius: 8px;
+        padding: 10px;
+      }
+      .mono {
+        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
+      }
+      .pill {
+        display: inline-flex;
+        gap: 6px;
+        background: #101628;
+        border: 1px solid #1f2740;
+        color: var(--muted);
+        padding: 4px 8px;
+        border-radius: 999px;
+        font-size: 12px;
+      }
+      .value {
+        font-weight: 600;
+      }
+      .ok {
+        color: var(--ok);
+      }
+      .logline {
+        color: #d1d5db;
+        font-size: 12px;
+      }
+    </style>
+  </head>
+  <body>
+    <main class="card">
+      <h1>Keyboard Actions Playground</h1>
+      <section class="card" style="margin-top: 8px">
+        <h2 style="font-size: 14px; margin: 0 0 8px">Editor (type / backspace / enter)</h2>
+        <textarea id="editor" rows="6" placeholder="Click here, then type..."></textarea>
+        <div style="margin-top: 8px; display: flex; gap: 12px; align-items: center">
+          <span class="pill">Lines: <span id="lineCount" class="value">0</span></span>
+          <span class="pill">Last key: <span id="lastKey" class="value">n/a</span></span>
+          <span class="pill">Modifiers: <span id="modifiers" class="value">none</span></span>
+        </div>
+        <div style="margin-top: 8px">
+          <div class="pill">Mirror</div>
+          <pre id="mirror" class="mono" style="margin: 6px 0 0; white-space: pre-wrap"></pre>
+        </div>
+      </section>
+      <div class="row" style="margin-top: 12px">
+        <section class="card">
+          <h2 style="font-size: 14px; margin: 0 0 8px">Enter key action</h2>
+          <input id="enterTarget" placeholder="Focus here and press Enter" />
+          <div style="margin-top: 8px" class="pill">
+            Result: <span id="enterResult" class="value">idle</span>
+          </div>
+        </section>
+        <section class="card">
+          <h2 style="font-size: 14px; margin: 0 0 8px">Help</h2>
+          <div class="logline">• Click the editor before using keyboard.type/press.</div>
+          <div class="logline">• Backspace removes characters; Enter creates a new line.</div>
+          <div class="logline">• Use Control+A then Backspace to clear.</div>
+          <div class="logline">• Enter inside the input sets the result to "submitted".</div>
+        </section>
+      </div>
+    </main>
+    <aside class="card">
+      <h2 style="font-size: 14px; margin: 0 0 8px">Status</h2>
+      <div>Active element: <span id="activeEl" class="value mono">n/a</span></div>
+    </aside>
+    <script>
+      (function () {
+        const $ = (s) => document.querySelector(s);
+        const editor = $('#editor');
+        const mirror = $('#mirror');
+        const lineCount = $('#lineCount');
+        const lastKey = $('#lastKey');
+        const modsEl = $('#modifiers');
+        const enterTarget = $('#enterTarget');
+        const enterResult = $('#enterResult');
+        const activeEl = $('#activeEl');
+        function updateActive() {
+          const el = document.activeElement;
+          if (!el) {
+            activeEl.textContent = 'none';
+            return;
+          }
+          const id = el.id ? '#' + el.id : el.tagName.toLowerCase();
+          activeEl.textContent = id;
+        }
+        updateActive();
+        document.addEventListener('focusin', updateActive);
+        document.addEventListener('focusout', updateActive);
+        function updateMirror() {
+          const v = editor.value;
+          mirror.textContent = v;
+          const lines = v.length ? v.split('\n').length : 0;
+          lineCount.textContent = String(lines);
+        }
+        editor.addEventListener('input', updateMirror);
+        // Track last key and modifiers globally (document level)
+        const mods = new Set();
+        function renderMods() {
+          modsEl.textContent = mods.size ? Array.from(mods).join('+') : 'none';
+        }
+        document.addEventListener('keydown', (e) => {
+          lastKey.textContent = e.key;
+          if (e.key === 'Shift' || e.key === 'Control' || e.key === 'Alt' || e.key === 'Meta') {
+            mods.add(e.key);
+            renderMods();
+          }
+        });
+        document.addEventListener('keyup', (e) => {
+          if (e.key === 'Shift' || e.key === 'Control' || e.key === 'Alt' || e.key === 'Meta') {
+            mods.delete(e.key);
+            renderMods();
+          }
+        });
+        // Enter action in input
+        enterTarget.addEventListener('keydown', (e) => {
+          if (e.key === 'Enter') {
+            enterResult.textContent = 'submitted';
+          }
+        });
+      })();
+    </script>
+  </body>
+</html>

package/docs/public/examples/locator.html ADDED Viewed

@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Locator Playground</title>
+  <style>
+    body {
+      font-family: system-ui, sans-serif;
+      margin: 20px;
+    }
+    .product-list {
+      list-style: none;
+      padding: 0;
+    }
+    .product {
+      border: 1px solid #ddd;
+      border-radius: 6px;
+      padding: 12px;
+      margin-bottom: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .product-name {
+      font-weight: 600;
+    }
+    .product-price {
+      color: #6b7280;
+      margin-left: 8px;
+    }
+    .buy-btn {
+      padding: 6px 14px;
+      border-radius: 4px;
+      border: 1px solid #6366f1;
+      background: #eef2ff;
+      cursor: pointer;
+    }
+    #status {
+      margin-top: 16px;
+      font-size: 14px;
+      color: #374151;
+    }
+  </style>
+</head>
+<body>
+  <h1>Locator Playground</h1>
+  <!-- product list — five cards with stable ids and predictable text -->
+  <ul class="product-list" id="product-list">
+    <li class="product" id="product-1">
+      <span>
+        <span class="product-name">Widget Lite</span>
+        <span class="product-price">$9</span>
+      </span>
+      <button class="buy-btn" id="buy-1">Buy</button>
+    </li>
+    <li class="product" id="product-2">
+      <span>
+        <span class="product-name">Widget Pro</span>
+        <span class="product-price">$29</span>
+      </span>
+      <button class="buy-btn" id="buy-2">Buy</button>
+    </li>
+    <li class="product" id="product-3">
+      <span>
+        <span class="product-name">Widget Max</span>
+        <span class="product-price">$49</span>
+      </span>
+      <button class="buy-btn" id="buy-3">Buy</button>
+    </li>
+    <li class="product" id="product-4">
+      <span>
+        <span class="product-name">Gadget Basic</span>
+        <span class="product-price">$15</span>
+      </span>
+      <button class="buy-btn" id="buy-4">Buy</button>
+    </li>
+    <li class="product" id="product-5">
+      <span>
+        <span class="product-name">Gadget Plus</span>
+        <span class="product-price">$39</span>
+      </span>
+      <button class="buy-btn" id="buy-5">Buy</button>
+    </li>
+  </ul>
+  <!-- dynamic item — toggled in/out to test re-resolution -->
+  <button id="toggle-btn">Toggle dynamic item</button>
+  <div id="dynamic-container"></div>
+  <!-- click result area -->
+  <div id="status">idle</div>
+  <script>
+    // Mark which buy button was last clicked
+    document.querySelectorAll('.buy-btn').forEach(function (btn) {
+      btn.addEventListener('click', function () {
+        document.getElementById('status').textContent = 'clicked:' + btn.id;
+      });
+    });
+    // Toggle a dynamic product in and out of the DOM
+    var dynamicVisible = false;
+    document.getElementById('toggle-btn').addEventListener('click', function () {
+      var container = document.getElementById('dynamic-container');
+      if (dynamicVisible) {
+        container.innerHTML = '';
+      } else {
+        container.innerHTML =
+          '<li class="product" id="product-dynamic">' +
+          '<span><span class="product-name">Dynamic Item</span></span>' +
+          '<button class="buy-btn" id="buy-dynamic">Buy</button>' +
+          '</li>';
+        document.getElementById('buy-dynamic').addEventListener('click', function () {
+          document.getElementById('status').textContent = 'clicked:buy-dynamic';
+        });
+      }
+      dynamicVisible = !dynamicVisible;
+    });
+  </script>
+</body>
+</html>

package/docs/public/examples/login.html ADDED Viewed

@@ -0,0 +1,116 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Craftdriver Login Example</title>
+  <style>
+    body {
+      font-family: system-ui, Arial, sans-serif;
+      margin: 2rem;
+    }
+    .card {
+      max-width: 420px;
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      padding: 16px;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+    }
+    label {
+      display: block;
+      margin-top: 12px;
+      font-weight: 600;
+    }
+    input {
+      width: 100%;
+      padding: 8px;
+      border: 1px solid #ccc;
+      border-radius: 6px;
+    }
+    button {
+      margin-top: 16px;
+      padding: 10px 14px;
+      border: none;
+      border-radius: 6px;
+      background: #2563eb;
+      color: #fff;
+      font-weight: 600;
+      cursor: pointer;
+    }
+    button:hover {
+      background: #1d4ed8;
+    }
+    #result {
+      margin-top: 16px;
+      font-weight: 600;
+    }
+  </style>
+</head>
+<body>
+  <div class="card">
+    <h1>Login</h1>
+    <form id="login-form">
+      <label for="username">Username</label>
+      <input id="username" name="username" type="text" autocomplete="off" />
+      <label for="password">Password</label>
+      <input id="password" name="password" type="password" autocomplete="off" />
+      <button id="submit" type="submit">Sign in</button>
+    </form>
+    <div id="result" aria-live="polite"></div>
+  </div>
+  <script>
+    const form = document.getElementById('login-form');
+    const result = document.getElementById('result');
+    // Check for existing session on page load
+    function checkSession() {
+      const sessionCookie = document.cookie.split(';').find(c => c.trim().startsWith('session='));
+      if (sessionCookie) {
+        const username = sessionCookie.split('=')[1];
+        showLoggedIn(decodeURIComponent(username));
+        return true;
+      }
+      return false;
+    }
+    function showLoggedIn(username) {
+      form.style.display = 'none';
+      result.innerHTML = `<span id="welcome">Welcome back, ${username}!</span><br><button id="logout" onclick="logout()">Logout</button>`;
+    }
+    function logout() {
+      document.cookie = 'session=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';
+      location.reload();
+    }
+    // Check session on load
+    if (!checkSession()) {
+      form.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const u = document.getElementById('username').value;
+        const p = document.getElementById('password').value;
+        if (u && p) {
+          // Set session cookie (expires in 1 hour)
+          const expires = new Date(Date.now() + 3600000).toUTCString();
+          document.cookie = `session=${encodeURIComponent(u)}; path=/; expires=${expires}`;
+          // Persist UX prefs in localStorage so storageState round-trips capture them.
+          localStorage.setItem('lastUser', u);
+          localStorage.setItem('theme', 'dark');
+          showLoggedIn(u);
+        } else {
+          result.textContent = 'Missing credentials';
+        }
+      });
+    }
+  </script>
+</body>
+</html>