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

craftdriver 1.1.0 → 1.1.1

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

package/CHANGELOG.md +7 -0
package/README.md +1 -1
package/dist/cli/snapshot.js +31 -4
package/dist/cli/snapshot.js.map +1 -1
package/dist/lib/browser.d.ts +6 -0
package/dist/lib/browser.d.ts.map +1 -1
package/dist/lib/browser.js +6 -0
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 -1
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 +29 -38
package/docs/recipes/file-upload-download.md +26 -43
package/docs/recipes/find-elements.md +142 -0
package/docs/recipes/login-once-reuse-session.md +24 -44
package/docs/recipes/mobile-flow-with-network-and-logs.md +26 -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 +14 -11
package/docs/recipes.md +20 -1
package/docs/selectors.md +291 -229
package/package.json +5 -1

package/docs/public/examples/console-errors.html ADDED Viewed

@@ -0,0 +1,344 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Console & Errors Example</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;
+    }
+    h3 {
+      color: #888;
+    }
+    button {
+      padding: 10px 20px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      margin-right: 10px;
+      margin-bottom: 10px;
+      font-size: 14px;
+    }
+    .btn-log {
+      background: #17a2b8;
+      color: white;
+    }
+    .btn-warn {
+      background: #ffc107;
+      color: #333;
+    }
+    .btn-error {
+      background: #dc3545;
+      color: white;
+    }
+    .btn-info {
+      background: #6c757d;
+      color: white;
+    }
+    .btn-debug {
+      background: #28a745;
+      color: white;
+    }
+    .btn-throw {
+      background: #6f42c1;
+      color: white;
+    }
+    button:hover {
+      opacity: 0.9;
+    }
+    .note {
+      background: #fff3cd;
+      border: 1px solid #ffc107;
+      border-radius: 4px;
+      padding: 10px;
+      margin-top: 15px;
+      font-size: 14px;
+    }
+    .output {
+      background: #1e1e1e;
+      color: #d4d4d4;
+      border-radius: 4px;
+      padding: 15px;
+      margin-top: 15px;
+      font-family: 'Monaco', 'Menlo', monospace;
+      font-size: 13px;
+      max-height: 200px;
+      overflow-y: auto;
+    }
+    .output .log {
+      color: #d4d4d4;
+    }
+    .output .warn {
+      color: #dcdcaa;
+    }
+    .output .error {
+      color: #f48771;
+    }
+    .output .info {
+      color: #9cdcfe;
+    }
+    .output .debug {
+      color: #6a9955;
+    }
+    code {
+      background: #e9ecef;
+      padding: 2px 6px;
+      border-radius: 3px;
+    }
+  </style>
+</head>
+<body>
+  <h1>🖥️ Console & JavaScript Errors</h1>
+  <p>This page generates console messages and JavaScript errors for testing BiDi log monitoring.</p>
+  <!-- Console Log Methods -->
+  <div class="card">
+    <h2>1. Console Log Methods</h2>
+    <p>Click buttons to trigger different console methods. Open DevTools (F12) to see output.</p>
+    <button id="btn-console-log" class="btn-log" onclick="doLog()">console.log()</button>
+    <button id="btn-console-warn" class="btn-warn" onclick="doWarn()">console.warn()</button>
+    <button id="btn-console-error" class="btn-error" onclick="doError()">console.error()</button>
+    <button id="btn-console-info" class="btn-info" onclick="doInfo()">console.info()</button>
+    <button id="btn-console-debug" class="btn-debug" onclick="doDebug()">console.debug()</button>
+    <div class="note">
+      💡 These buttons call <code>console.log()</code>, <code>console.warn()</code>, etc.
+      BiDi can capture all these in real-time!
+    </div>
+  </div>
+  <!-- Console with Objects -->
+  <div class="card">
+    <h2>2. Complex Console Output</h2>
+    <p>Log complex objects, arrays, and multiple arguments.</p>
+    <button id="btn-log-object" class="btn-log" onclick="logObject()">Log Object</button>
+    <button id="btn-log-array" class="btn-log" onclick="logArray()">Log Array</button>
+    <button id="btn-log-multiple" class="btn-log" onclick="logMultiple()">Log Multiple Args</button>
+    <button id="btn-log-formatted" class="btn-log" onclick="logFormatted()">Log Formatted String</button>
+  </div>
+  <!-- JavaScript Errors -->
+  <div class="card">
+    <h2>3. JavaScript Errors (Thrown)</h2>
+    <p>Click buttons to throw actual JavaScript errors. BiDi captures these as uncaught exceptions.</p>
+    <button id="btn-throw-error" class="btn-throw" onclick="throwError()">Throw Error</button>
+    <button id="btn-throw-type" class="btn-throw" onclick="throwTypeError()">Throw TypeError</button>
+    <button id="btn-throw-reference" class="btn-throw" onclick="throwReferenceError()">Throw ReferenceError</button>
+    <button id="btn-throw-syntax" class="btn-throw" onclick="throwWithEval()">Eval Syntax Error</button>
+    <div class="note">
+      ⚠️ These buttons throw <strong>real uncaught exceptions</strong>.
+      You'll see them in the console as red errors.
+    </div>
+  </div>
+  <!-- Promise Rejections -->
+  <div class="card">
+    <h2>4. Async Errors & Promise Rejections</h2>
+    <p>Unhandled promise rejections and async errors.</p>
+    <button id="btn-promise-reject" class="btn-throw" onclick="rejectPromise()">Unhandled Promise Rejection</button>
+    <button id="btn-async-error" class="btn-throw" onclick="asyncError()">Async Function Error</button>
+    <button id="btn-timeout-error" class="btn-throw" onclick="timeoutError()">Error in setTimeout</button>
+  </div>
+  <!-- Triggered Errors -->
+  <div class="card">
+    <h2>5. DOM Errors</h2>
+    <p>Errors triggered by DOM operations.</p>
+    <button id="btn-null-access" class="btn-throw" onclick="nullAccess()">Access Null Element</button>
+    <button id="btn-invalid-selector" class="btn-throw" onclick="invalidSelector()">Invalid Selector</button>
+  </div>
+  <!-- Log Display -->
+  <div class="card">
+    <h2>📋 Local Log Display</h2>
+    <p>Shows logs captured on this page (for visual reference):</p>
+    <div id="log-output" class="output">Logs will appear here...</div>
+    <button onclick="clearLogs()" style="margin-top: 10px; background: #6c757d; color: white;">Clear Logs</button>
+  </div>
+  <script>
+    const logOutput = document.getElementById('log-output');
+    let logCount = 0;
+    function appendToDisplay(type, message) {
+      logCount++;
+      const line = document.createElement('div');
+      line.className = type;
+      line.textContent = `[${logCount}] [${type.toUpperCase()}] ${message}`;
+      logOutput.appendChild(line);
+      logOutput.scrollTop = logOutput.scrollHeight;
+    }
+    function clearLogs() {
+      logOutput.innerHTML = '';
+      logCount = 0;
+    }
+    // Console methods
+    function doLog() {
+      const msg = 'Hello from console.log!';
+      console.log(msg);
+      appendToDisplay('log', msg);
+    }
+    function doWarn() {
+      const msg = 'This is a warning message';
+      console.warn(msg);
+      appendToDisplay('warn', msg);
+    }
+    function doError() {
+      const msg = 'This is an error message (via console.error)';
+      console.error(msg);
+      appendToDisplay('error', msg);
+    }
+    function doInfo() {
+      const msg = 'This is an info message';
+      console.info(msg);
+      appendToDisplay('info', msg);
+    }
+    function doDebug() {
+      const msg = 'This is a debug message';
+      console.debug(msg);
+      appendToDisplay('debug', msg);
+    }
+    // Complex logging
+    function logObject() {
+      const obj = {
+        user: 'testuser',
+        role: 'admin',
+        permissions: ['read', 'write', 'delete'],
+        metadata: { created: new Date().toISOString() }
+      };
+      console.log('User object:', obj);
+      appendToDisplay('log', 'User object: ' + JSON.stringify(obj));
+    }
+    function logArray() {
+      const arr = [1, 2, 3, { nested: true }, ['a', 'b', 'c']];
+      console.log('Array:', arr);
+      appendToDisplay('log', 'Array: ' + JSON.stringify(arr));
+    }
+    function logMultiple() {
+      console.log('Multiple', 'arguments', 123, true, { key: 'value' });
+      appendToDisplay('log', 'Multiple arguments 123 true {"key":"value"}');
+    }
+    function logFormatted() {
+      console.log('User %s has %d items (verified: %o)', 'Alice', 5, true);
+      appendToDisplay('log', 'User Alice has 5 items (verified: true)');
+    }
+    // JavaScript errors
+    function throwError() {
+      appendToDisplay('error', 'About to throw Error...');
+      throw new Error('This is a thrown Error!');
+    }
+    function throwTypeError() {
+      appendToDisplay('error', 'About to throw TypeError...');
+      throw new TypeError('Cannot read property "foo" of undefined');
+    }
+    function throwReferenceError() {
+      appendToDisplay('error', 'About to throw ReferenceError...');
+      throw new ReferenceError('undefinedVariable is not defined');
+    }
+    function throwWithEval() {
+      appendToDisplay('error', 'About to eval invalid syntax...');
+      eval('function() { invalid syntax here }}}');
+    }
+    // Async errors
+    function rejectPromise() {
+      appendToDisplay('error', 'Creating unhandled promise rejection...');
+      new Promise((_, reject) => {
+        reject(new Error('Unhandled promise rejection!'));
+      });
+    }
+    function asyncError() {
+      appendToDisplay('error', 'Calling async function that throws...');
+      (async () => {
+        throw new Error('Error inside async function!');
+      })();
+    }
+    function timeoutError() {
+      appendToDisplay('error', 'Error will occur in 100ms...');
+      setTimeout(() => {
+        throw new Error('Error inside setTimeout!');
+      }, 100);
+    }
+    // DOM errors
+    function nullAccess() {
+      appendToDisplay('error', 'Accessing property of null element...');
+      const elem = document.getElementById('non-existent-element');
+      elem.textContent = 'This will fail';
+    }
+    function invalidSelector() {
+      appendToDisplay('error', 'Using invalid CSS selector...');
+      document.querySelector('div[invalid==>]');
+    }
+    // Initial log
+    console.log('Page loaded: console-errors.html');
+    appendToDisplay('log', 'Page loaded: console-errors.html');
+  </script>
+</body>
+</html>

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

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Dialogs</title>
+</head>
+<body>
+  <h1>Dialogs</h1>
+  <!-- alert -->
+  <button id="show-alert">Show Alert</button>
+  <!-- confirm — records whether user accepted or dismissed -->
+  <button id="show-confirm">Show Confirm</button>
+  <p id="confirm-result"></p>
+  <!-- prompt — echoes the entered value -->
+  <button id="show-prompt">Show Prompt</button>
+  <p id="prompt-result"></p>
+  <!-- beforeunload is not tested here — browser behaviour varies -->
+  <script>
+    document.getElementById('show-alert').addEventListener('click', () => {
+      alert('Hello from alert');
+    });
+    document.getElementById('show-confirm').addEventListener('click', () => {
+      const ok = confirm('Are you sure?');
+      document.getElementById('confirm-result').textContent = ok ? 'confirmed' : 'dismissed';
+    });
+    document.getElementById('show-prompt').addEventListener('click', () => {
+      const value = prompt('Enter a value', 'default');
+      document.getElementById('prompt-result').textContent = value ?? 'dismissed';
+    });
+  </script>
+</body>
+</html>

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>