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

@@ -0,0 +1,293 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Network Calls 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;
+    }
+    button {
+      background: #007bff;
+      color: white;
+      border: none;
+      padding: 10px 20px;
+      border-radius: 4px;
+      cursor: pointer;
+      margin-right: 10px;
+      margin-bottom: 10px;
+    }
+    button:hover {
+      background: #0056b3;
+    }
+    button:disabled {
+      background: #ccc;
+      cursor: not-allowed;
+    }
+    .result {
+      background: #f8f9fa;
+      border: 1px solid #dee2e6;
+      border-radius: 4px;
+      padding: 15px;
+      margin-top: 15px;
+      min-height: 60px;
+      font-family: monospace;
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
+    .loading {
+      color: #666;
+      font-style: italic;
+    }
+    .error {
+      color: #dc3545;
+    }
+    .success {
+      color: #28a745;
+    }
+    code {
+      background: #e9ecef;
+      padding: 2px 6px;
+      border-radius: 3px;
+    }
+  </style>
+</head>
+<body>
+  <h1>🌐 Network Calls Example</h1>
+  <p>This page demonstrates various network requests for testing mocking and interception.</p>
+  <!-- Fetch JSON API -->
+  <div class="card">
+    <h2>1. Fetch JSON API</h2>
+    <p>Fetches data from <code>/api/users</code> endpoint.</p>
+    <button id="fetch-users-btn" onclick="fetchUsers()">Fetch Users</button>
+    <div id="users-result" class="result">Click button to fetch users...</div>
+  </div>
+  <!-- POST Request -->
+  <div class="card">
+    <h2>2. POST Request</h2>
+    <p>Sends a POST request to <code>/api/login</code> with credentials.</p>
+    <button id="post-login-btn" onclick="postLogin()">Send Login Request</button>
+    <div id="login-result" class="result">Click button to send login request...</div>
+  </div>
+  <!-- External API -->
+  <div class="card">
+    <h2>3. External API Call</h2>
+    <p>Fetches data from <code>https://jsonplaceholder.typicode.com/posts/1</code></p>
+    <button id="fetch-external-btn" onclick="fetchExternal()">Fetch External Post</button>
+    <div id="external-result" class="result">Click button to fetch external data...</div>
+  </div>
+  <!-- Multiple Requests -->
+  <div class="card">
+    <h2>4. Multiple Parallel Requests</h2>
+    <p>Makes 3 parallel requests to <code>/api/items/1</code>, <code>/api/items/2</code>, <code>/api/items/3</code></p>
+    <button id="fetch-parallel-btn" onclick="fetchParallel()">Fetch All Items</button>
+    <div id="parallel-result" class="result">Click button to fetch items in parallel...</div>
+  </div>
+  <!-- Delayed Response -->
+  <div class="card">
+    <h2>5. Slow Endpoint</h2>
+    <p>Requests <code>/api/slow</code> which simulates a 2-second delay.</p>
+    <button id="fetch-slow-btn" onclick="fetchSlow()">Fetch Slow Endpoint</button>
+    <div id="slow-result" class="result">Click button to test slow endpoint...</div>
+  </div>
+  <script>
+    // Check if BiDi testing mode is enabled (no client-side mocking)
+    const urlParams = new URLSearchParams(window.location.search);
+    const bidiMode = urlParams.get('bidi') === 'true';
+    // Simple mock server responses (for standalone testing without BiDi)
+    const mockResponses = {
+      '/api/users': {
+        users: [
+          { id: 1, name: 'Alice', email: 'alice@example.com' },
+          { id: 2, name: 'Bob', email: 'bob@example.com' },
+          { id: 3, name: 'Charlie', email: 'charlie@example.com' }
+        ]
+      },
+      '/api/login': { success: true, token: 'mock-jwt-token-12345' },
+      '/api/items/1': { id: 1, name: 'Item One', price: 9.99 },
+      '/api/items/2': { id: 2, name: 'Item Two', price: 19.99 },
+      '/api/items/3': { id: 3, name: 'Item Three', price: 29.99 },
+      '/api/slow': { message: 'This response was delayed by 2 seconds' }
+    };
+    // Intercept fetch to simulate server (only for standalone testing, NOT BiDi mode)
+    if (!bidiMode) {
+      const originalFetch = window.fetch;
+      window.fetch = async function (url, options = {}) {
+        const urlStr = typeof url === 'string' ? url : url.toString();
+        // Check if it's a mock endpoint
+        for (const [endpoint, response] of Object.entries(mockResponses)) {
+          if (urlStr.endsWith(endpoint) || urlStr.includes(endpoint)) {
+            // Simulate network delay
+            const delay = endpoint === '/api/slow' ? 2000 : 100;
+            await new Promise(r => setTimeout(r, delay));
+            return new Response(JSON.stringify(response), {
+              status: 200,
+              headers: { 'Content-Type': 'application/json' }
+            });
+          }
+        }
+        // For external URLs, use real fetch
+        return originalFetch.apply(this, arguments);
+      };
+    }
+    async function fetchUsers() {
+      const btn = document.getElementById('fetch-users-btn');
+      const result = document.getElementById('users-result');
+      btn.disabled = true;
+      result.className = 'result loading';
+      result.textContent = 'Loading...';
+      try {
+        const response = await fetch('/api/users');
+        const data = await response.json();
+        result.className = 'result success';
+        result.textContent = JSON.stringify(data, null, 2);
+      } catch (error) {
+        result.className = 'result error';
+        result.textContent = 'Error: ' + error.message;
+      } finally {
+        btn.disabled = false;
+      }
+    }
+    async function postLogin() {
+      const btn = document.getElementById('post-login-btn');
+      const result = document.getElementById('login-result');
+      btn.disabled = true;
+      result.className = 'result loading';
+      result.textContent = 'Sending login request...';
+      try {
+        const response = await fetch('/api/login', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ username: 'testuser', password: 'secret123' })
+        });
+        const data = await response.json();
+        result.className = 'result success';
+        result.textContent = 'Response:\n' + JSON.stringify(data, null, 2);
+      } catch (error) {
+        result.className = 'result error';
+        result.textContent = 'Error: ' + error.message;
+      } finally {
+        btn.disabled = false;
+      }
+    }
+    async function fetchExternal() {
+      const btn = document.getElementById('fetch-external-btn');
+      const result = document.getElementById('external-result');
+      btn.disabled = true;
+      result.className = 'result loading';
+      result.textContent = 'Fetching from jsonplaceholder...';
+      try {
+        const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
+        const data = await response.json();
+        result.className = 'result success';
+        result.textContent = JSON.stringify(data, null, 2);
+      } catch (error) {
+        result.className = 'result error';
+        result.textContent = 'Error: ' + error.message;
+      } finally {
+        btn.disabled = false;
+      }
+    }
+    async function fetchParallel() {
+      const btn = document.getElementById('fetch-parallel-btn');
+      const result = document.getElementById('parallel-result');
+      btn.disabled = true;
+      result.className = 'result loading';
+      result.textContent = 'Fetching 3 items in parallel...';
+      try {
+        const [item1, item2, item3] = await Promise.all([
+          fetch('/api/items/1').then(r => r.json()),
+          fetch('/api/items/2').then(r => r.json()),
+          fetch('/api/items/3').then(r => r.json())
+        ]);
+        result.className = 'result success';
+        result.textContent = 'All items:\n' + JSON.stringify([item1, item2, item3], null, 2);
+      } catch (error) {
+        result.className = 'result error';
+        result.textContent = 'Error: ' + error.message;
+      } finally {
+        btn.disabled = false;
+      }
+    }
+    async function fetchSlow() {
+      const btn = document.getElementById('fetch-slow-btn');
+      const result = document.getElementById('slow-result');
+      btn.disabled = true;
+      result.className = 'result loading';
+      result.textContent = 'Waiting for slow endpoint (2s delay)...';
+      const startTime = Date.now();
+      try {
+        const response = await fetch('/api/slow');
+        const data = await response.json();
+        const elapsed = Date.now() - startTime;
+        result.className = 'result success';
+        result.textContent = `Response (took ${elapsed}ms):\n` + JSON.stringify(data, null, 2);
+      } catch (error) {
+        result.className = 'result error';
+        result.textContent = 'Error: ' + error.message;
+      } finally {
+        btn.disabled = false;
+      }
+    }
+  </script>
+</body>
+</html>

package/docs/public/examples/popup-target.html ADDED Viewed

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Popup Target</title>
+  <style>
+    body {
+      font-family: system-ui, sans-serif;
+      margin: 1rem;
+    }
+    #popup-heading {
+      font-size: 1.5rem;
+      font-weight: bold;
+    }
+  </style>
+</head>
+<body>
+  <h1 id="popup-heading">Popup Window</h1>
+  <p id="popup-content">This is the popup page.</p>
+</body>
+</html>

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

@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Craftdriver Popup</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;
+    }
+    #popup-result {
+      margin-top: 0.5rem;
+    }
+  </style>
+</head>
+<body>
+  <h1>Popup Test Page</h1>
+  <button id="open-popup">Open Popup</button>
+  <p id="popup-result"></p>
+  <script>
+    document.getElementById('open-popup').addEventListener('click', function () {
+      const w = window.open('/popup-target.html', '_blank', 'width=600,height=400');
+      if (!w) {
+        document.getElementById('popup-result').textContent = 'blocked';
+      } else {
+        document.getElementById('popup-result').textContent = 'opened';
+      }
+    });
+  </script>
+</body>
+</html>

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

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Screenshot Fixture</title>
+  <style>
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+    }
+    body {
+      font-family: system-ui, sans-serif;
+      background: #ffffff;
+    }
+    /* A predictable, very tall document so a full-page screenshot
+       must be taller than the viewport. Each section is exactly
+       600px tall; ten sections = 6000px total height. */
+    .section {
+      height: 600px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 48px;
+      font-weight: 700;
+      color: #ffffff;
+    }
+    #s1 {
+      background: #ef4444;
+    }
+    #s2 {
+      background: #f97316;
+    }
+    #s3 {
+      background: #eab308;
+    }
+    #s4 {
+      background: #22c55e;
+    }
+    #s5 {
+      background: #14b8a6;
+    }
+    #s6 {
+      background: #0ea5e9;
+    }
+    #s7 {
+      background: #6366f1;
+    }
+    #s8 {
+      background: #a855f7;
+    }
+    #s9 {
+      background: #ec4899;
+    }
+    #s10 {
+      background: #111827;
+    }
+    #marker-bottom {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      text-align: center;
+      padding: 8px 0;
+      background: #000;
+      color: #fff;
+      font-size: 14px;
+    }
+  </style>
+</head>
+<body>
+  <div id="s1" class="section">Section 1</div>
+  <div id="s2" class="section">Section 2</div>
+  <div id="s3" class="section">Section 3</div>
+  <div id="s4" class="section">Section 4</div>
+  <div id="s5" class="section">Section 5</div>
+  <div id="s6" class="section">Section 6</div>
+  <div id="s7" class="section">Section 7</div>
+  <div id="s8" class="section">Section 8</div>
+  <div id="s9" class="section">Section 9</div>
+  <div id="s10" class="section">Section 10</div>
+  <div id="marker-bottom">bottom-of-document</div>
+</body>
+</html>

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

@@ -0,0 +1,150 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Selectors Playground</title>
+  <style>
+    body {
+      font-family:
+        system-ui,
+        -apple-system,
+        Segoe UI,
+        Roboto,
+        Arial;
+      margin: 20px;
+    }
+    .card {
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      padding: 12px;
+      margin-bottom: 12px;
+    }
+    .row {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 12px;
+    }
+    .muted {
+      color: #6b7280;
+      font-size: 12px;
+    }
+    .btn {
+      padding: 6px 10px;
+      border-radius: 6px;
+      border: 1px solid #d1d5db;
+      background: #f9fafb;
+      cursor: pointer;
+    }
+  </style>
+</head>
+<body>
+  <h1>Selectors Playground</h1>
+  <section class="card" id="area-attrs">
+    <h2>Attribute-based</h2>
+    <input id="by-id" placeholder="by id" />
+    <input id="by-name" name="by-name" placeholder="by name" />
+    <div class="foo" id="by-class">class=foo</div>
+    <span title="Hint title" id="by-title">has title</span>
+    <img id="by-alt" alt="Logo ALT" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
+    <div id="by-testid" data-testid="by-testid">data-testid</div>
+    <div data-custom="cval" id="by-data-attr">data-custom</div>
+    <div aria-label="Aria Name" role="button" id="by-role">button aria</div>
+  </section>
+  <section class="card" id="area-text">
+    <h2>Text-based</h2>
+    <div id="text-exact">Exact Match</div>
+    <div id="text-partial">Contains Substring Here</div>
+    <div id="text-mixed">Spaced Text</div>
+  </section>
+  <section class="card" id="area-label">
+    <h2>Labels</h2>
+    <label for="email">Email Address</label>
+    <input id="email" type="email" placeholder="Enter email" />
+    <label>Wrapped Label<input id="wrapped" type="text" /></label>
+  </section>
+  <section class="card" id="area-scope">
+    <h2>Scoped composition</h2>
+    <div id="scope-card-1" class="product-card"><button id="scope-card-1-btn">Submit</button></div>
+    <div id="scope-card-2" class="product-card"><button id="scope-card-2-btn">Submit</button></div>
+    <div id="scope-card-3" class="product-card"><button id="scope-card-3-btn">Cancel</button></div>
+  </section>
+  <section class="card" id="area-roles-extra">
+    <h2>Extra roles</h2>
+    <select id="single-select">
+      <option>One</option>
+      <option>Two</option>
+    </select>
+    <select id="multi-select" multiple>
+      <option>One</option>
+      <option>Two</option>
+    </select>
+    <article id="article-with-header"><header id="article-header">Article Header</header></article>
+    <article id="article-with-footer"><footer id="article-footer">Article Footer</footer></article>
+  </section>
+  <!-- Outside any sectioning content (article/aside/main/nav/section) on purpose:
+       a <header>/<footer> here keeps the banner/contentinfo role, unlike the
+       ones nested in <article> above. -->
+  <header id="page-header">Page Header</header>
+  <footer id="page-footer">Page Footer</footer>
+  <section class="card" id="area-links">
+    <h2>Links</h2>
+    <a id="link-exact" href="#docs">Documentation</a>
+    <a id="link-partial" href="#guide">Read the Guide Now</a>
+  </section>
+  <section class="card" id="area-hidden">
+    <h2>Accessibility-hidden</h2>
+    <!-- aria-hidden on the wrapper removes the whole subtree from the a11y
+         tree; the button is still visually rendered (aria-hidden != display). -->
+    <div aria-hidden="true">
+      <button id="hidden-btn">Ghost</button>
+    </div>
+    <button id="visible-btn">Ghost</button>
+  </section>
+  <section class="card" id="result">
+    <h2>Result</h2>
+    <div id="status" class="muted">idle</div>
+  </section>
+  <script>
+    (function () {
+      const $ = (s) => document.querySelector(s);
+      const status = $('#status');
+      function mark(id) {
+        status.textContent = id;
+      }
+      // Use a single delegated handler and mark the closest element with an id
+      // Stop propagation so ancestors don't override the status with their own ids
+      document.addEventListener(
+        'click',
+        (e) => {
+          const target = e.target;
+          if (!(target instanceof Element)) return;
+          const withId = target.closest('[id]');
+          if (withId) {
+            e.stopPropagation();
+            mark(withId.id);
+          }
+        },
+        true
+      );
+    })();
+  </script>
+</body>
+</html>