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/download.html ADDED Viewed

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>File Download Example</title>
+</head>
+<body>
+  <h1>File Download</h1>
+  <!-- clicking this triggers a download of a small text file -->
+  <button id="download-btn" onclick="downloadFile()">Download report.txt</button>
+  <script>
+    function downloadFile() {
+      const content = 'craftdriver download test\nline 2\nline 3\n';
+      const blob = new Blob([content], { type: 'text/plain' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'report.txt';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    }
+  </script>
+</body>
+</html>

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

@@ -0,0 +1,131 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Craftdriver Dynamic Elements</title>
+  <style>
+    body {
+      font-family: system-ui, Arial, sans-serif;
+      margin: 1rem;
+    }
+    .container {
+      max-width: 1024px;
+      margin: 0 auto;
+    }
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 16px;
+      align-items: start;
+    }
+    .card {
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      padding: 16px;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+    }
+    h2 {
+      font-size: 1.1rem;
+      margin: 0 0 8px;
+    }
+    button {
+      margin-top: 8px;
+      padding: 8px 12px;
+      border: none;
+      border-radius: 6px;
+      background: #2563eb;
+      color: #fff;
+      font-weight: 600;
+      cursor: pointer;
+    }
+    button:hover {
+      background: #1d4ed8;
+    }
+    .muted {
+      color: #666;
+      font-size: 0.9rem;
+      margin: 0;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="grid">
+      <div class="card">
+        <h2>1) Appear after 1s (not in DOM)</h2>
+        <p class="muted">Click the button; element will be created after ~1s.</p>
+        <button id="btn-appear" type="button">Create element</button>
+        <div id="appear-container" style="margin-top: 12px"></div>
+      </div>
+      <div class="card">
+        <h2>2) Hidden → Visible after 1s</h2>
+        <p class="muted">Element exists in DOM but is hidden and becomes visible.</p>
+        <button id="btn-unhide" type="button">Unhide after 1s</button>
+        <div style="margin-top: 12px">
+          <div id="hidden-el" style="display: none">I was hidden</div>
+        </div>
+      </div>
+      <div class="card">
+        <h2>3) Visible → Removed (immediately)</h2>
+        <p class="muted">Click the button to remove the element from DOM right away.</p>
+        <button id="btn-remove" type="button">Remove now</button>
+        <div style="margin-top: 12px">
+          <div id="to-remove">I will be removed</div>
+        </div>
+      </div>
+      <div class="card">
+        <h2>4) Visible → Hidden (immediately)</h2>
+        <p class="muted">Click the button to hide the element (display:none).</p>
+        <button id="btn-hide" type="button">Hide now</button>
+        <div style="margin-top: 12px">
+          <div id="to-hide">I will be hidden</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    document.getElementById('btn-appear').addEventListener('click', () => {
+      const container = document.getElementById('appear-container');
+      container.textContent = ''; // clear previous runs
+      setTimeout(() => {
+        const el = document.createElement('div');
+        el.id = 'delayed-greeting';
+        el.textContent = 'Hello after 1s';
+        container.appendChild(el);
+      }, 1000);
+    });
+    document.getElementById('btn-unhide').addEventListener('click', () => {
+      const el = document.getElementById('hidden-el');
+      setTimeout(() => {
+        el.style.display = 'block';
+      }, 1000);
+    });
+    document.getElementById('btn-remove').addEventListener('click', () => {
+      const el = document.getElementById('to-remove');
+      if (el) el.remove();
+    });
+    document.getElementById('btn-hide').addEventListener('click', () => {
+      const el = document.getElementById('to-hide');
+      if (el) el.style.display = 'none';
+    });
+  </script>
+</body>
+</html>

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

@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Emulation fixture</title>
+  <style>
+    body { font-family: system-ui, sans-serif; margin: 20px; background: #fff; color: #111; }
+    #scheme-readout { padding: 8px; border: 1px solid #ccc; }
+    /* prefers-color-scheme observable via CSS */
+    @media (prefers-color-scheme: dark) {
+      body { background: #111; color: #eee; }
+      #scheme-readout { border-color: #555; }
+    }
+    /* prefers-reduced-motion observable via CSS */
+    .spinner { animation: spin 1s linear infinite; display: inline-block; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    @media (prefers-reduced-motion: reduce) {
+      .spinner { animation: none; }
+    }
+    /* forced-colors observable via CSS */
+    #fc-readout { background: canvas; color: canvastext; padding: 8px; }
+  </style>
+</head>
+<body>
+  <h1>Emulation fixture</h1>
+  <!-- prefers-color-scheme -->
+  <section>
+    <h2>Color scheme</h2>
+    <div id="scheme-readout">readout</div>
+    <script>
+      (function () {
+        var el = document.getElementById('scheme-readout');
+        function update() {
+          var dark = matchMedia('(prefers-color-scheme: dark)').matches;
+          var light = matchMedia('(prefers-color-scheme: light)').matches;
+          el.textContent = dark ? 'dark' : light ? 'light' : 'no-preference';
+        }
+        update();
+        matchMedia('(prefers-color-scheme: dark)').addEventListener('change', update);
+      })();
+    </script>
+  </section>
+  <!-- prefers-reduced-motion -->
+  <section>
+    <h2>Reduced motion</h2>
+    <span id="spinner" class="spinner">*</span>
+    <div id="rm-readout"></div>
+    <script>
+      (function () {
+        var el = document.getElementById('rm-readout');
+        function update() {
+          el.textContent = matchMedia('(prefers-reduced-motion: reduce)').matches
+            ? 'reduce' : 'no-preference';
+        }
+        update();
+        matchMedia('(prefers-reduced-motion: reduce)').addEventListener('change', update);
+      })();
+    </script>
+  </section>
+  <!-- forced-colors -->
+  <section>
+    <h2>Forced colors</h2>
+    <div id="fc-readout"></div>
+    <script>
+      (function () {
+        var el = document.getElementById('fc-readout');
+        function update() {
+          el.textContent = matchMedia('(forced-colors: active)').matches
+            ? 'active' : 'none';
+        }
+        update();
+      })();
+    </script>
+  </section>
+  <!-- locale -->
+  <section>
+    <h2>Locale</h2>
+    <div id="lang-readout"></div>
+    <div id="number-readout"></div>
+    <script>
+      document.getElementById('lang-readout').textContent = navigator.language;
+      // 1234.5 in en-US -> "1,234.5", in de-DE -> "1.234,5"
+      document.getElementById('number-readout').textContent =
+        new Intl.NumberFormat().format(1234.5);
+    </script>
+  </section>
+  <!-- timezone -->
+  <section>
+    <h2>Timezone</h2>
+    <div id="tz-readout"></div>
+    <script>
+      // Resolved IANA zone, e.g. "Europe/Berlin"
+      document.getElementById('tz-readout').textContent =
+        Intl.DateTimeFormat().resolvedOptions().timeZone;
+    </script>
+  </section>
+  <!-- offline -->
+  <section>
+    <h2>Network</h2>
+    <div id="online-readout"></div>
+    <button id="fetch-btn" type="button">fetch /</button>
+    <div id="fetch-readout"></div>
+    <script>
+      var online = document.getElementById('online-readout');
+      function syncOnline() { online.textContent = navigator.onLine ? 'online' : 'offline'; }
+      syncOnline();
+      window.addEventListener('online', syncOnline);
+      window.addEventListener('offline', syncOnline);
+      document.getElementById('fetch-btn').addEventListener('click', function () {
+        var out = document.getElementById('fetch-readout');
+        out.textContent = '';
+        fetch('/').then(
+          function (r) { out.textContent = 'ok:' + r.status; },
+          function (e) { out.textContent = 'error:' + (e && e.message || e); }
+        );
+      });
+    </script>
+  </section>
+</body>
+</html>

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

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Evaluate Playground</title>
+</head>
+<body>
+  <h1>Evaluate Playground</h1>
+  <!-- target element for element.evaluate() tests -->
+  <button id="action-btn" class="primary active">Click me</button>
+  <!-- state exposed on window.__state for evaluate() tests -->
+  <script>
+    window.__state = {
+      count: 0,
+      name: 'craftdriver',
+    };
+    document.getElementById('action-btn').addEventListener('click', function () {
+      window.__state.count++;
+    });
+  </script>
+</body>
+</html>

package/docs/public/examples/hover-select.html ADDED Viewed

@@ -0,0 +1,295 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Hover & Select Examples</title>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      max-width: 800px;
+      margin: 40px auto;
+      padding: 20px;
+      background: #f5f5f5;
+    }
+    .card {
+      background: white;
+      border-radius: 8px;
+      padding: 20px;
+      margin-bottom: 20px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+    h1 {
+      color: #333;
+    }
+    h2 {
+      color: #666;
+      margin-top: 0;
+    }
+    /* Tooltip */
+    .tooltip-container {
+      position: relative;
+      display: inline-block;
+      padding: 10px 20px;
+      background: #007bff;
+      color: white;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    .tooltip {
+      visibility: hidden;
+      opacity: 0;
+      position: absolute;
+      bottom: 125%;
+      left: 50%;
+      transform: translateX(-50%);
+      background: #333;
+      color: white;
+      padding: 8px 12px;
+      border-radius: 4px;
+      white-space: nowrap;
+      font-size: 14px;
+      transition: opacity 0.2s;
+      z-index: 1000;
+    }
+    .tooltip::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      margin-left: -5px;
+      border-width: 5px;
+      border-style: solid;
+      border-color: #333 transparent transparent transparent;
+    }
+    .tooltip-container:hover .tooltip {
+      visibility: visible;
+      opacity: 1;
+    }
+    /* Dropdown menu */
+    .dropdown {
+      position: relative;
+      display: inline-block;
+    }
+    .dropdown-button {
+      background: #28a745;
+      color: white;
+      padding: 10px 20px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    .dropdown-menu {
+      visibility: hidden;
+      opacity: 0;
+      position: absolute;
+      top: 100%;
+      left: 0;
+      background: white;
+      min-width: 200px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+      border-radius: 4px;
+      margin-top: 5px;
+      transition: opacity 0.2s;
+      z-index: 1000;
+    }
+    .dropdown:hover .dropdown-menu {
+      visibility: visible;
+      opacity: 1;
+    }
+    .dropdown-item {
+      padding: 10px 15px;
+      cursor: pointer;
+      border-bottom: 1px solid #eee;
+    }
+    .dropdown-item:last-child {
+      border-bottom: none;
+    }
+    .dropdown-item:hover {
+      background: #f5f5f5;
+    }
+    /* Selects */
+    select {
+      padding: 10px;
+      border: 1px solid #ced4da;
+      border-radius: 4px;
+      font-size: 14px;
+      min-width: 200px;
+      margin-bottom: 10px;
+    }
+    .result {
+      background: #f8f9fa;
+      border: 1px solid #dee2e6;
+      border-radius: 4px;
+      padding: 15px;
+      margin-top: 15px;
+      font-family: monospace;
+    }
+    label {
+      display: block;
+      margin-top: 15px;
+      margin-bottom: 5px;
+      font-weight: 500;
+    }
+  </style>
+</head>
+<body>
+  <h1>🎯 Hover & Select Examples</h1>
+  <p>Test page for hover interactions and native select elements.</p>
+  <!-- Tooltip Example -->
+  <div class="card">
+    <h2>1. Tooltip on Hover</h2>
+    <p>Hover over the button to see a tooltip:</p>
+    <div class="tooltip-container" id="tooltip-trigger">
+      Hover Me
+      <span class="tooltip" id="tooltip-text">This is a helpful tooltip!</span>
+    </div>
+    <div id="tooltip-status" class="result">Tooltip not shown</div>
+  </div>
+  <!-- Dropdown Menu Example -->
+  <div class="card">
+    <h2>2. Dropdown Menu on Hover</h2>
+    <p>Hover over the button to reveal menu:</p>
+    <div class="dropdown">
+      <button class="dropdown-button" id="dropdown-trigger">Menu ▼</button>
+      <div class="dropdown-menu" id="dropdown-menu">
+        <div class="dropdown-item" id="menu-item-1" onclick="selectMenuItem('Profile')">👤 Profile</div>
+        <div class="dropdown-item" id="menu-item-2" onclick="selectMenuItem('Settings')">⚙️ Settings</div>
+        <div class="dropdown-item" id="menu-item-3" onclick="selectMenuItem('Logout')">🚪 Logout</div>
+      </div>
+    </div>
+    <div id="menu-selection" class="result">No menu item selected</div>
+  </div>
+  <!-- Native Select Elements -->
+  <div class="card">
+    <h2>3. Native Select Dropdowns</h2>
+    <label for="language-select">Language:</label>
+    <select id="language-select" onchange="updateSelection()">
+      <option value="">-- Choose Language --</option>
+      <option value="en">English</option>
+      <option value="es">Spanish</option>
+      <option value="fr">French</option>
+      <option value="de">German</option>
+      <option value="ja">Japanese</option>
+    </select>
+    <label for="country-select">Country:</label>
+    <select id="country-select" onchange="updateSelection()">
+      <option value="">-- Choose Country --</option>
+      <option value="us">United States</option>
+      <option value="uk">United Kingdom</option>
+      <option value="ca">Canada</option>
+      <option value="au">Australia</option>
+      <option value="jp">Japan</option>
+    </select>
+    <label for="framework-select">Framework:</label>
+    <select id="framework-select" onchange="updateSelection()">
+      <option value="">-- Choose Framework --</option>
+      <option value="react">React</option>
+      <option value="vue">Vue</option>
+      <option value="angular">Angular</option>
+      <option value="svelte">Svelte</option>
+    </select>
+    <div id="select-result" class="result">Make selections above...</div>
+  </div>
+  <!-- Hover State Change -->
+  <div class="card">
+    <h2>4. Hover State Detection</h2>
+    <p>These elements change state on hover:</p>
+    <div id="hover-box"
+      style="display: inline-block; padding: 20px; background: #007bff; color: white; border-radius: 4px; cursor: pointer; transition: all 0.2s;">
+      Hover Box
+    </div>
+    <div id="hover-box-status" class="result" style="margin-top: 10px;">Hover state: not hovered</div>
+  </div>
+  <script>
+    // Tooltip tracking
+    const tooltipTrigger = document.getElementById('tooltip-trigger');
+    const tooltipStatus = document.getElementById('tooltip-status');
+    tooltipTrigger.addEventListener('mouseenter', () => {
+      tooltipStatus.textContent = 'Tooltip is visible';
+      tooltipStatus.style.background = '#d4edda';
+    });
+    tooltipTrigger.addEventListener('mouseleave', () => {
+      tooltipStatus.textContent = 'Tooltip hidden';
+      tooltipStatus.style.background = '#f8f9fa';
+    });
+    // Dropdown menu item selection
+    function selectMenuItem(item) {
+      document.getElementById('menu-selection').textContent = `Selected: ${item}`;
+      document.getElementById('menu-selection').style.background = '#d4edda';
+    }
+    // Select updates
+    function updateSelection() {
+      const language = document.getElementById('language-select').value;
+      const country = document.getElementById('country-select').value;
+      const framework = document.getElementById('framework-select').value;
+      const parts = [];
+      if (language) parts.push(`Language: ${language}`);
+      if (country) parts.push(`Country: ${country}`);
+      if (framework) parts.push(`Framework: ${framework}`);
+      const result = document.getElementById('select-result');
+      result.textContent = parts.length > 0 ? parts.join(' | ') : 'Make selections above...';
+      result.style.background = parts.length > 0 ? '#d4edda' : '#f8f9fa';
+    }
+    // Hover box
+    const hoverBox = document.getElementById('hover-box');
+    const hoverBoxStatus = document.getElementById('hover-box-status');
+    hoverBox.addEventListener('mouseenter', () => {
+      hoverBox.style.background = '#0056b3';
+      hoverBox.style.transform = 'scale(1.05)';
+      hoverBoxStatus.textContent = 'Hover state: hovered';
+      hoverBoxStatus.style.background = '#d4edda';
+    });
+    hoverBox.addEventListener('mouseleave', () => {
+      hoverBox.style.background = '#007bff';
+      hoverBox.style.transform = 'scale(1)';
+      hoverBoxStatus.textContent = 'Hover state: not hovered';
+      hoverBoxStatus.style.background = '#f8f9fa';
+    });
+  </script>
+</body>
+</html>

package/docs/public/examples/iframe-child.html ADDED Viewed

@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Iframe Child Page</title>
+  <style>
+    body {
+      font-family: system-ui, sans-serif;
+      margin: 1rem;
+    }
+    button {
+      padding: 8px 14px;
+      border: none;
+      border-radius: 6px;
+      background: #2563eb;
+      color: #fff;
+      font-weight: 600;
+      cursor: pointer;
+    }
+    button:hover {
+      background: #1d4ed8;
+    }
+    #child-result {
+      margin-top: 0.5rem;
+      font-weight: bold;
+    }
+  </style>
+</head>
+<body>
+  <h2>Child Frame</h2>
+  <button id="child-btn">Click Me</button>
+  <p id="child-result"></p>
+  <input id="child-input" type="text" placeholder="type here" />
+  <p id="child-value"></p>
+  <script>
+    document.getElementById('child-btn').addEventListener('click', function () {
+      document.getElementById('child-result').textContent = 'clicked';
+    });
+    document.getElementById('child-input').addEventListener('input', function () {
+      document.getElementById('child-value').textContent = this.value;
+    });
+  </script>
+</body>
+</html>

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

@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Craftdriver Iframes</title>
+  <style>
+    body {
+      font-family: system-ui, sans-serif;
+      margin: 1rem;
+    }
+    iframe {
+      border: 2px solid #ddd;
+      border-radius: 8px;
+      width: 480px;
+      height: 200px;
+    }
+    #parent-status {
+      margin-top: 0.5rem;
+      font-weight: bold;
+    }
+  </style>
+</head>
+<body>
+  <h1>Iframe Test Page</h1>
+  <p>Parent page content.</p>
+  <p id="parent-status"></p>
+  <iframe id="my-frame" src="/iframe-child.html"></iframe>
+</body>
+</html>