@browserbasehq/orca 3.1.0-patch.3 → 3.2.0-preview.1

package/dist/cjs/tests/integration/page-console.spec.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const test_1 = require("@playwright/test");
+const v3_js_1 = require("../../lib/v3/v3.js");
+const v3_config_js_1 = require("./v3.config.js");
+test_1.test.describe("Page console events", () => {
+    let v3;
+    test_1.test.beforeEach(async () => {
+        v3 = new v3_js_1.V3(v3_config_js_1.v3TestConfig);
+        await v3.init();
+    });
+    test_1.test.afterEach(async () => {
+        await v3?.close?.().catch(() => { });
+    });
+    (0, test_1.test)("captures console messages emitted by the page", async () => {
+        const browserTarget = (process.env.STAGEHAND_BROWSER_TARGET ?? "local").toLowerCase();
+        const isBrowserbase = browserTarget === "browserbase";
+        if (isBrowserbase) {
+            console.warn("[page-console] TODO: re-enable once BB cloud browsers support Runtime.consoleAPICalled events again. See https://browserbase.slack.com/archives/C06U6CM7YS1/p1769483322836589");
+            test_1.test.skip(true, "TODO: re-enable once BB cloud browsers support Runtime.consoleAPICalled events again.");
+        }
+        const page = v3.context.pages()[0];
+        const received = [];
+        page.on("console", (message) => {
+            received.push({ type: message.type(), text: message.text() });
+        });
+        await page.goto("https://browserbase.github.io/stagehand-eval-sites/sites/iframe-hn/");
+        await page.evaluate(() => {
+            console.log("stagehand console", { ok: true });
+            console.error("stagehand console error");
+        });
+        const waitForConsole = async (predicate, timeoutMs = 2000) => {
+            const deadline = Date.now() + timeoutMs;
+            while (Date.now() < deadline) {
+                if (predicate())
+                    return;
+                await new Promise((resolve) => setTimeout(resolve, 50));
+            }
+        };
+        await waitForConsole(() => received.some((m) => m.type === "log") &&
+            received.some((m) => m.type === "error" && m.text.includes("error")), 5000);
+        (0, test_1.expect)(received.length).toBeGreaterThanOrEqual(2);
+        (0, test_1.expect)(received.some((m) => m.type === "log")).toBeTruthy();
+        (0, test_1.expect)(received.some((m) => m.type === "error" && m.text.includes("error"))).toBeTruthy();
+    });
+});
+//# sourceMappingURL=page-console.spec.js.map

package/dist/cjs/tests/integration/page-console.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-console.spec.js","sourceRoot":"","sources":["../../../../tests/integration/page-console.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { test, expect } from \"@playwright/test\";\nimport { V3 } from \"../../lib/v3/v3.js\";\nimport { v3TestConfig } from \"./v3.config.js\";\n\ntest.describe(\"Page console events\", () => {\n  let v3: V3;\n\n  test.beforeEach(async () => {\n    v3 = new V3(v3TestConfig);\n    await v3.init();\n  });\n\n  test.afterEach(async () => {\n    await v3?.close?.().catch(() => {});\n  });\n\n  test(\"captures console messages emitted by the page\", async () => {\n    const browserTarget = (\n      process.env.STAGEHAND_BROWSER_TARGET ?? \"local\"\n    ).toLowerCase();\n    const isBrowserbase = browserTarget === \"browserbase\";\n    if (isBrowserbase) {\n      console.warn(\n        \"[page-console] TODO: re-enable once BB cloud browsers support Runtime.consoleAPICalled events again. See https://browserbase.slack.com/archives/C06U6CM7YS1/p1769483322836589\",\n      );\n      test.skip(\n        true,\n        \"TODO: re-enable once BB cloud browsers support Runtime.consoleAPICalled events again.\",\n      );\n    }\n    const page = v3.context.pages()[0];\n    const received: Array<{ type: string; text: string }> = [];\n\n    page.on(\"console\", (message) => {\n      received.push({ type: message.type(), text: message.text() });\n    });\n\n    await page.goto(\n      \"https://browserbase.github.io/stagehand-eval-sites/sites/iframe-hn/\",\n    );\n\n    await page.evaluate(() => {\n      console.log(\"stagehand console\", { ok: true });\n      console.error(\"stagehand console error\");\n    });\n\n    const waitForConsole = async (\n      predicate: () => boolean,\n      timeoutMs = 2000,\n    ) => {\n      const deadline = Date.now() + timeoutMs;\n      while (Date.now() < deadline) {\n        if (predicate()) return;\n        await new Promise((resolve) => setTimeout(resolve, 50));\n      }\n    };\n\n    await waitForConsole(\n      () =>\n        received.some((m) => m.type === \"log\") &&\n        received.some((m) => m.type === \"error\" && m.text.includes(\"error\")),\n      5000,\n    );\n\n    expect(received.length).toBeGreaterThanOrEqual(2);\n    expect(received.some((m) => m.type === \"log\")).toBeTruthy();\n    expect(\n      received.some((m) => m.type === \"error\" && m.text.includes(\"error\")),\n    ).toBeTruthy();\n  });\n});\n"]}

package/dist/cjs/tests/integration/page-drag-and-drop.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/tests/integration/page-drag-and-drop.spec.js

@@ -0,0 +1,437 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const test_1 = require("@playwright/test");
+const v3_js_1 = require("../../lib/v3/v3.js");
+const v3_config_js_1 = require("./v3.config.js");
+test_1.test.describe("Page.dragAndDrop() - dragging elements", () => {
+    let v3;
+    test_1.test.beforeEach(async () => {
+        v3 = new v3_js_1.V3(v3_config_js_1.v3TestConfig);
+        await v3.init();
+    });
+    test_1.test.afterEach(async () => {
+        await v3?.close?.().catch(() => { });
+    });
+    (0, test_1.test)("drags and drops element to target zone", async () => {
+        const page = v3.context.pages()[0];
+        await page.goto("data:text/html," +
+            encodeURIComponent(`
+          <!doctype html>
+          <html>
+          <head>
+            <style>
+              body { font-family: Arial; margin: 0; padding: 20px; }
+              .container { display: flex; gap: 20px; }
+              .source-box {
+                width: 150px;
+                height: 100px;
+                background: lightblue;
+                border: 2px solid blue;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                cursor: move;
+                user-select: none;
+              }
+              .drop-zone {
+                width: 200px;
+                height: 150px;
+                background: lightyellow;
+                border: 2px dashed orange;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+              }
+              .result { margin-top: 20px; font-weight: bold; }
+            </style>
+          </head>
+          <body>
+            <div class="container">
+              <div id="source" class="source-box" draggable="true">Drag Me</div>
+              <div id="dropZone" class="drop-zone">Drop Here</div>
+            </div>
+            <div id="result" class="result">Status: Waiting</div>
+            <script>
+              const source = document.getElementById('source');
+              const dropZone = document.getElementById('dropZone');
+              const result = document.getElementById('result');
+              
+              source.addEventListener('dragstart', (e) => {
+                e.dataTransfer.effectAllowed = 'move';
+                e.dataTransfer.setData('text/plain', 'Dragged Element');
+              });
+              
+              dropZone.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                e.dataTransfer.dropEffect = 'move';
+                dropZone.style.background = 'lightgreen';
+              });
+              
+              dropZone.addEventListener('dragleave', () => {
+                dropZone.style.background = 'lightyellow';
+              });
+              
+              dropZone.addEventListener('drop', (e) => {
+                e.preventDefault();
+                result.textContent = 'Status: DROP SUCCESSFUL';
+                result.style.color = 'green';
+                dropZone.style.background = 'lightgreen';
+              });
+            </script>
+          </body>
+          </html>
+        `));
+        // Get coordinates for drag and drop
+        const sourceLocation = await page
+            .frames()[0]
+            .getLocationForSelector("#source");
+        const dropZoneLocation = await page
+            .frames()[0]
+            .getLocationForSelector("#dropZone");
+        const fromX = sourceLocation.x + sourceLocation.width / 2;
+        const fromY = sourceLocation.y + sourceLocation.height / 2;
+        const toX = dropZoneLocation.x + dropZoneLocation.width / 2;
+        const toY = dropZoneLocation.y + dropZoneLocation.height / 2;
+        // Perform drag and drop
+        await page.dragAndDrop(fromX, fromY, toX, toY);
+        // Wait for events to be processed
+        await page.evaluate(() => new Promise((r) => setTimeout(r, 100)));
+        // Verify visual result
+        const resultText = await page.evaluate(() => document.getElementById("result").textContent);
+        (0, test_1.expect)(resultText).toContain("DROP SUCCESSFUL");
+    });
+    (0, test_1.test)("drag and drop with steps parameter", async () => {
+        const page = v3.context.pages()[0];
+        await page.goto("data:text/html," +
+            encodeURIComponent(`
+          <!doctype html>
+          <html>
+          <head>
+            <style>
+              body { margin: 0; padding: 20px; }
+              .box {
+                width: 100px;
+                height: 100px;
+                background: lightblue;
+                margin: 20px;
+                cursor: move;
+              }
+              .target {
+                width: 200px;
+                height: 200px;
+                background: lightyellow;
+                margin: 20px;
+                border: 2px dashed orange;
+              }
+            </style>
+          </head>
+          <body>
+            <div id="box" class="box" draggable="true"></div>
+            <div id="target" class="target"></div>
+            <div id="status">Not dropped</div>
+            <script>
+              document.getElementById('box').addEventListener('dragstart', (e) => {
+                e.dataTransfer.effectAllowed = 'move';
+              });
+              document.getElementById('target').addEventListener('drop', (e) => {
+                e.preventDefault();
+                document.getElementById('status').textContent = 'Dropped with steps';
+              });
+              document.getElementById('target').addEventListener('dragover', (e) => {
+                e.preventDefault();
+              });
+            </script>
+          </body>
+          </html>
+        `));
+        const boxLocation = await page.frames()[0].getLocationForSelector("#box");
+        const targetLocation = await page
+            .frames()[0]
+            .getLocationForSelector("#target");
+        const fromX = boxLocation.x + boxLocation.width / 2;
+        const fromY = boxLocation.y + boxLocation.height / 2;
+        const toX = targetLocation.x + targetLocation.width / 2;
+        const toY = targetLocation.y + targetLocation.height / 2;
+        // Drag with multiple steps for smoother motion
+        await page.dragAndDrop(fromX, fromY, toX, toY, { steps: 5 });
+        // Wait for events to be processed
+        await page.evaluate(() => new Promise((r) => setTimeout(r, 100)));
+        const status = await page.evaluate(() => document.getElementById("status").textContent);
+        (0, test_1.expect)(status).toContain("Dropped");
+    });
+    (0, test_1.test)("drag and drop with delay between steps", async () => {
+        const page = v3.context.pages()[0];
+        await page.goto("data:text/html," +
+            encodeURIComponent(`
+          <!doctype html>
+          <html>
+          <head>
+            <style>
+              body { margin: 0; padding: 20px; }
+              #dragItem { width: 80px; height: 80px; background: lightcoral; cursor: move; }
+              #dropArea { width: 150px; height: 150px; background: lightgray; margin-top: 20px; }
+            </style>
+          </head>
+          <body>
+            <div id="dragItem" draggable="true"></div>
+            <div id="dropArea"></div>
+            <div id="complete">false</div>
+            <script>
+              const item = document.getElementById('dragItem');
+              const area = document.getElementById('dropArea');
+              const complete = document.getElementById('complete');
+              
+              item.addEventListener('dragstart', (e) => {
+                e.dataTransfer.effectAllowed = 'move';
+              });
+              
+              area.addEventListener('drop', (e) => {
+                e.preventDefault();
+                complete.textContent = 'true';
+              });
+              
+              area.addEventListener('dragover', (e) => {
+                e.preventDefault();
+              });
+            </script>
+          </body>
+          </html>
+        `));
+        const itemLocation = await page
+            .frames()[0]
+            .getLocationForSelector("#dragItem");
+        const areaLocation = await page
+            .frames()[0]
+            .getLocationForSelector("#dropArea");
+        const fromX = itemLocation.x + itemLocation.width / 2;
+        const fromY = itemLocation.y + itemLocation.height / 2;
+        const toX = areaLocation.x + areaLocation.width / 2;
+        const toY = areaLocation.y + areaLocation.height / 2;
+        // Drag with delay between steps
+        await page.dragAndDrop(fromX, fromY, toX, toY, { steps: 3, delay: 50 });
+        // Wait for events to be processed
+        await page.evaluate(() => new Promise((r) => setTimeout(r, 100)));
+        const isComplete = await page.evaluate(() => document.getElementById("complete").textContent === "true");
+        (0, test_1.expect)(isComplete).toBe(true);
+    });
+    (0, test_1.test)("drag and drop returns xpath when requested", async () => {
+        const page = v3.context.pages()[0];
+        await page.goto("data:text/html," +
+            encodeURIComponent(`
+          <!doctype html>
+          <html>
+          <head>
+            <style>
+              body { margin: 20px; }
+              #source { width: 100px; height: 100px; background: blue; cursor: move; }
+              #target { width: 150px; height: 150px; background: green; margin-top: 20px; }
+            </style>
+          </head>
+          <body>
+            <div id="source" draggable="true"></div>
+            <div id="target"></div>
+            <script>
+              document.getElementById('source').addEventListener('dragstart', (e) => {
+                e.dataTransfer.effectAllowed = 'move';
+              });
+              document.getElementById('target').addEventListener('drop', (e) => {
+                e.preventDefault();
+              });
+              document.getElementById('target').addEventListener('dragover', (e) => {
+                e.preventDefault();
+              });
+            </script>
+          </body>
+          </html>
+        `));
+        const sourceLocation = await page
+            .frames()[0]
+            .getLocationForSelector("#source");
+        const targetLocation = await page
+            .frames()[0]
+            .getLocationForSelector("#target");
+        const fromX = sourceLocation.x + sourceLocation.width / 2;
+        const fromY = sourceLocation.y + sourceLocation.height / 2;
+        const toX = targetLocation.x + targetLocation.width / 2;
+        const toY = targetLocation.y + targetLocation.height / 2;
+        const [fromXpath, toXpath] = await page.dragAndDrop(fromX, fromY, toX, toY, {
+            returnXpath: true,
+        });
+        // Should return xpaths for both start and end positions
+        (0, test_1.expect)(typeof fromXpath).toBe("string");
+        (0, test_1.expect)(typeof toXpath).toBe("string");
+        (0, test_1.expect)(fromXpath.length).toBeGreaterThan(0);
+        (0, test_1.expect)(toXpath.length).toBeGreaterThan(0);
+    });
+    (0, test_1.test)("drag and drop without returnXpath returns empty strings", async () => {
+        const page = v3.context.pages()[0];
+        await page.goto("data:text/html," +
+            encodeURIComponent(`
+          <!doctype html>
+          <html>
+          <head>
+            <style>
+              body { margin: 20px; }
+              #item1 { width: 80px; height: 80px; background: red; cursor: move; }
+              #item2 { width: 100px; height: 100px; background: yellow; margin-top: 20px; }
+            </style>
+          </head>
+          <body>
+            <div id="item1" draggable="true"></div>
+            <div id="item2"></div>
+            <script>
+              document.getElementById('item1').addEventListener('dragstart', (e) => {
+                e.dataTransfer.effectAllowed = 'move';
+              });
+              document.getElementById('item2').addEventListener('drop', (e) => {
+                e.preventDefault();
+              });
+              document.getElementById('item2').addEventListener('dragover', (e) => {
+                e.preventDefault();
+              });
+            </script>
+          </body>
+          </html>
+        `));
+        const item1Location = await page
+            .frames()[0]
+            .getLocationForSelector("#item1");
+        const item2Location = await page
+            .frames()[0]
+            .getLocationForSelector("#item2");
+        const fromX = item1Location.x + item1Location.width / 2;
+        const fromY = item1Location.y + item1Location.height / 2;
+        const toX = item2Location.x + item2Location.width / 2;
+        const toY = item2Location.y + item2Location.height / 2;
+        const [fromXpath, toXpath] = await page.dragAndDrop(fromX, fromY, toX, toY);
+        // Should return empty strings when returnXpath is not set
+        (0, test_1.expect)(fromXpath).toBe("");
+        (0, test_1.expect)(toXpath).toBe("");
+    });
+    (0, test_1.test)("drag and drop with different mouse buttons", async () => {
+        const page = v3.context.pages()[0];
+        await page.goto("data:text/html," +
+            encodeURIComponent(`
+          <!doctype html>
+          <html>
+          <head>
+            <style>
+              body { margin: 20px; }
+              .draggable { width: 100px; height: 100px; background: lightblue; cursor: move; }
+              .drop-area { width: 200px; height: 200px; background: lightgray; margin-top: 20px; }
+            </style>
+          </head>
+          <body>
+            <div id="source" class="draggable" draggable="true"></div>
+            <div id="target" class="drop-area"></div>
+            <div id="buttonUsed">none</div>
+            <script>
+              document.getElementById('source').addEventListener('dragstart', (e) => {
+                e.dataTransfer.effectAllowed = 'move';
+              });
+              document.getElementById('target').addEventListener('drop', (e) => {
+                e.preventDefault();
+                document.getElementById('buttonUsed').textContent = 'left';
+              });
+              document.getElementById('target').addEventListener('dragover', (e) => {
+                e.preventDefault();
+              });
+            </script>
+          </body>
+          </html>
+        `));
+        const sourceLocation = await page
+            .frames()[0]
+            .getLocationForSelector("#source");
+        const targetLocation = await page
+            .frames()[0]
+            .getLocationForSelector("#target");
+        const fromX = sourceLocation.x + sourceLocation.width / 2;
+        const fromY = sourceLocation.y + sourceLocation.height / 2;
+        const toX = targetLocation.x + targetLocation.width / 2;
+        const toY = targetLocation.y + targetLocation.height / 2;
+        // Test with left button (default)
+        await page.dragAndDrop(fromX, fromY, toX, toY, { button: "left" });
+        // Wait for events to be processed
+        await page.evaluate(() => new Promise((r) => setTimeout(r, 100)));
+        const buttonUsed = await page.evaluate(() => document.getElementById("buttonUsed").textContent);
+        (0, test_1.expect)(buttonUsed).toBe("left");
+    });
+    (0, test_1.test)("multiple sequential drag and drops", async () => {
+        const page = v3.context.pages()[0];
+        await page.goto("data:text/html," +
+            encodeURIComponent(`
+          <!doctype html>
+          <html>
+          <head>
+            <style>
+              body { margin: 20px; font-family: Arial; }
+              .item { width: 80px; height: 80px; background: lightblue; margin: 10px; cursor: move; display: inline-block; }
+              .zone { width: 150px; height: 150px; background: lightyellow; margin: 10px; display: inline-block; border: 2px dashed orange; }
+              #log { margin-top: 20px; }
+            </style>
+          </head>
+          <body>
+            <div id="item1" class="item" draggable="true">Item 1</div>
+            <div id="zone1" class="zone"></div>
+            <div id="item2" class="item" draggable="true">Item 2</div>
+            <div id="zone2" class="zone"></div>
+            <div id="log">Drops: 0</div>
+            <script>
+              let dropCount = 0;
+              const items = ['item1', 'item2'];
+              const zones = ['zone1', 'zone2'];
+              
+              items.forEach(id => {
+                document.getElementById(id).addEventListener('dragstart', (e) => {
+                  e.dataTransfer.effectAllowed = 'move';
+                });
+              });
+              
+              zones.forEach(id => {
+                const zone = document.getElementById(id);
+                zone.addEventListener('drop', (e) => {
+                  e.preventDefault();
+                  dropCount++;
+                  document.getElementById('log').textContent = 'Drops: ' + dropCount;
+                });
+                zone.addEventListener('dragover', (e) => {
+                  e.preventDefault();
+                });
+              });
+            </script>
+          </body>
+          </html>
+        `));
+        const item1Location = await page
+            .frames()[0]
+            .getLocationForSelector("#item1");
+        const zone1Location = await page
+            .frames()[0]
+            .getLocationForSelector("#zone1");
+        const from1X = item1Location.x + item1Location.width / 2;
+        const from1Y = item1Location.y + item1Location.height / 2;
+        const to1X = zone1Location.x + zone1Location.width / 2;
+        const to1Y = zone1Location.y + zone1Location.height / 2;
+        await page.dragAndDrop(from1X, from1Y, to1X, to1Y);
+        await page.evaluate(() => new Promise((r) => setTimeout(r, 100)));
+        let dropCountText = await page.evaluate(() => document.getElementById("log").textContent);
+        (0, test_1.expect)(dropCountText).toContain("Drops: 1");
+        const item2Location = await page
+            .frames()[0]
+            .getLocationForSelector("#item2");
+        const zone2Location = await page
+            .frames()[0]
+            .getLocationForSelector("#zone2");
+        const from2X = item2Location.x + item2Location.width / 2;
+        const from2Y = item2Location.y + item2Location.height / 2;
+        const to2X = zone2Location.x + zone2Location.width / 2;
+        const to2Y = zone2Location.y + zone2Location.height / 2;
+        await page.dragAndDrop(from2X, from2Y, to2X, to2Y);
+        // Wait for events to be processed
+        await page.evaluate(() => new Promise((r) => setTimeout(r, 100)));
+        dropCountText = await page.evaluate(() => document.getElementById("log").textContent);
+        (0, test_1.expect)(dropCountText).toContain("Drops: 2");
+    });
+});
+//# sourceMappingURL=page-drag-and-drop.spec.js.map

package/dist/cjs/tests/integration/page-drag-and-drop.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-drag-and-drop.spec.js","sourceRoot":"","sources":["../../../../tests/integration/page-drag-and-drop.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { test, expect } from \"@playwright/test\";\nimport { V3 } from \"../../lib/v3/v3.js\";\nimport { v3TestConfig } from \"./v3.config.js\";\n\ntest.describe(\"Page.dragAndDrop() - dragging elements\", () => {\n  let v3: V3;\n\n  test.beforeEach(async () => {\n    v3 = new V3(v3TestConfig);\n    await v3.init();\n  });\n\n  test.afterEach(async () => {\n    await v3?.close?.().catch(() => {});\n  });\n\n  test(\"drags and drops element to target zone\", async () => {\n    const page = v3.context.pages()[0];\n\n    await page.goto(\n      \"data:text/html,\" +\n        encodeURIComponent(`\n          <!doctype html>\n          <html>\n          <head>\n            <style>\n              body { font-family: Arial; margin: 0; padding: 20px; }\n              .container { display: flex; gap: 20px; }\n              .source-box {\n                width: 150px;\n                height: 100px;\n                background: lightblue;\n                border: 2px solid blue;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                cursor: move;\n                user-select: none;\n              }\n              .drop-zone {\n                width: 200px;\n                height: 150px;\n                background: lightyellow;\n                border: 2px dashed orange;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n              }\n              .result { margin-top: 20px; font-weight: bold; }\n            </style>\n          </head>\n          <body>\n            <div class=\"container\">\n              <div id=\"source\" class=\"source-box\" draggable=\"true\">Drag Me</div>\n              <div id=\"dropZone\" class=\"drop-zone\">Drop Here</div>\n            </div>\n            <div id=\"result\" class=\"result\">Status: Waiting</div>\n            <script>\n              const source = document.getElementById('source');\n              const dropZone = document.getElementById('dropZone');\n              const result = document.getElementById('result');\n              \n              source.addEventListener('dragstart', (e) => {\n                e.dataTransfer.effectAllowed = 'move';\n                e.dataTransfer.setData('text/plain', 'Dragged Element');\n              });\n              \n              dropZone.addEventListener('dragover', (e) => {\n                e.preventDefault();\n                e.dataTransfer.dropEffect = 'move';\n                dropZone.style.background = 'lightgreen';\n              });\n              \n              dropZone.addEventListener('dragleave', () => {\n                dropZone.style.background = 'lightyellow';\n              });\n              \n              dropZone.addEventListener('drop', (e) => {\n                e.preventDefault();\n                result.textContent = 'Status: DROP SUCCESSFUL';\n                result.style.color = 'green';\n                dropZone.style.background = 'lightgreen';\n              });\n            </script>\n          </body>\n          </html>\n        `),\n    );\n\n    // Get coordinates for drag and drop\n    const sourceLocation = await page\n      .frames()[0]\n      .getLocationForSelector(\"#source\");\n    const dropZoneLocation = await page\n      .frames()[0]\n      .getLocationForSelector(\"#dropZone\");\n\n    const fromX = sourceLocation.x + sourceLocation.width / 2;\n    const fromY = sourceLocation.y + sourceLocation.height / 2;\n    const toX = dropZoneLocation.x + dropZoneLocation.width / 2;\n    const toY = dropZoneLocation.y + dropZoneLocation.height / 2;\n\n    // Perform drag and drop\n    await page.dragAndDrop(fromX, fromY, toX, toY);\n\n    // Wait for events to be processed\n    await page.evaluate(() => new Promise((r) => setTimeout(r, 100)));\n\n    // Verify visual result\n    const resultText = await page.evaluate(\n      () => document.getElementById(\"result\").textContent,\n    );\n    expect(resultText).toContain(\"DROP SUCCESSFUL\");\n  });\n\n  test(\"drag and drop with steps parameter\", async () => {\n    const page = v3.context.pages()[0];\n\n    await page.goto(\n      \"data:text/html,\" +\n        encodeURIComponent(`\n          <!doctype html>\n          <html>\n          <head>\n            <style>\n              body { margin: 0; padding: 20px; }\n              .box {\n                width: 100px;\n                height: 100px;\n                background: lightblue;\n                margin: 20px;\n                cursor: move;\n              }\n              .target {\n                width: 200px;\n                height: 200px;\n                background: lightyellow;\n                margin: 20px;\n                border: 2px dashed orange;\n              }\n            </style>\n          </head>\n          <body>\n            <div id=\"box\" class=\"box\" draggable=\"true\"></div>\n            <div id=\"target\" class=\"target\"></div>\n            <div id=\"status\">Not dropped</div>\n            <script>\n              document.getElementById('box').addEventListener('dragstart', (e) => {\n                e.dataTransfer.effectAllowed = 'move';\n              });\n              document.getElementById('target').addEventListener('drop', (e) => {\n                e.preventDefault();\n                document.getElementById('status').textContent = 'Dropped with steps';\n              });\n              document.getElementById('target').addEventListener('dragover', (e) => {\n                e.preventDefault();\n              });\n            </script>\n          </body>\n          </html>\n        `),\n    );\n\n    const boxLocation = await page.frames()[0].getLocationForSelector(\"#box\");\n    const targetLocation = await page\n      .frames()[0]\n      .getLocationForSelector(\"#target\");\n\n    const fromX = boxLocation.x + boxLocation.width / 2;\n    const fromY = boxLocation.y + boxLocation.height / 2;\n    const toX = targetLocation.x + targetLocation.width / 2;\n    const toY = targetLocation.y + targetLocation.height / 2;\n\n    // Drag with multiple steps for smoother motion\n    await page.dragAndDrop(fromX, fromY, toX, toY, { steps: 5 });\n\n    // Wait for events to be processed\n    await page.evaluate(() => new Promise((r) => setTimeout(r, 100)));\n\n    const status = await page.evaluate(\n      () => document.getElementById(\"status\").textContent,\n    );\n    expect(status).toContain(\"Dropped\");\n  });\n\n  test(\"drag and drop with delay between steps\", async () => {\n    const page = v3.context.pages()[0];\n\n    await page.goto(\n      \"data:text/html,\" +\n        encodeURIComponent(`\n          <!doctype html>\n          <html>\n          <head>\n            <style>\n              body { margin: 0; padding: 20px; }\n              #dragItem { width: 80px; height: 80px; background: lightcoral; cursor: move; }\n              #dropArea { width: 150px; height: 150px; background: lightgray; margin-top: 20px; }\n            </style>\n          </head>\n          <body>\n            <div id=\"dragItem\" draggable=\"true\"></div>\n            <div id=\"dropArea\"></div>\n            <div id=\"complete\">false</div>\n            <script>\n              const item = document.getElementById('dragItem');\n              const area = document.getElementById('dropArea');\n              const complete = document.getElementById('complete');\n              \n              item.addEventListener('dragstart', (e) => {\n                e.dataTransfer.effectAllowed = 'move';\n              });\n              \n              area.addEventListener('drop', (e) => {\n                e.preventDefault();\n                complete.textContent = 'true';\n              });\n              \n              area.addEventListener('dragover', (e) => {\n                e.preventDefault();\n              });\n            </script>\n          </body>\n          </html>\n        `),\n    );\n\n    const itemLocation = await page\n      .frames()[0]\n      .getLocationForSelector(\"#dragItem\");\n    const areaLocation = await page\n      .frames()[0]\n      .getLocationForSelector(\"#dropArea\");\n\n    const fromX = itemLocation.x + itemLocation.width / 2;\n    const fromY = itemLocation.y + itemLocation.height / 2;\n    const toX = areaLocation.x + areaLocation.width / 2;\n    const toY = areaLocation.y + areaLocation.height / 2;\n\n    // Drag with delay between steps\n    await page.dragAndDrop(fromX, fromY, toX, toY, { steps: 3, delay: 50 });\n\n    // Wait for events to be processed\n    await page.evaluate(() => new Promise((r) => setTimeout(r, 100)));\n\n    const isComplete = await page.evaluate(\n      () => document.getElementById(\"complete\").textContent === \"true\",\n    );\n    expect(isComplete).toBe(true);\n  });\n\n  test(\"drag and drop returns xpath when requested\", async () => {\n    const page = v3.context.pages()[0];\n\n    await page.goto(\n      \"data:text/html,\" +\n        encodeURIComponent(`\n          <!doctype html>\n          <html>\n          <head>\n            <style>\n              body { margin: 20px; }\n              #source { width: 100px; height: 100px; background: blue; cursor: move; }\n              #target { width: 150px; height: 150px; background: green; margin-top: 20px; }\n            </style>\n          </head>\n          <body>\n            <div id=\"source\" draggable=\"true\"></div>\n            <div id=\"target\"></div>\n            <script>\n              document.getElementById('source').addEventListener('dragstart', (e) => {\n                e.dataTransfer.effectAllowed = 'move';\n              });\n              document.getElementById('target').addEventListener('drop', (e) => {\n                e.preventDefault();\n              });\n              document.getElementById('target').addEventListener('dragover', (e) => {\n                e.preventDefault();\n              });\n            </script>\n          </body>\n          </html>\n        `),\n    );\n\n    const sourceLocation = await page\n      .frames()[0]\n      .getLocationForSelector(\"#source\");\n    const targetLocation = await page\n      .frames()[0]\n      .getLocationForSelector(\"#target\");\n\n    const fromX = sourceLocation.x + sourceLocation.width / 2;\n    const fromY = sourceLocation.y + sourceLocation.height / 2;\n    const toX = targetLocation.x + targetLocation.width / 2;\n    const toY = targetLocation.y + targetLocation.height / 2;\n\n    const [fromXpath, toXpath] = await page.dragAndDrop(\n      fromX,\n      fromY,\n      toX,\n      toY,\n      {\n        returnXpath: true,\n      },\n    );\n\n    // Should return xpaths for both start and end positions\n    expect(typeof fromXpath).toBe(\"string\");\n    expect(typeof toXpath).toBe(\"string\");\n    expect(fromXpath.length).toBeGreaterThan(0);\n    expect(toXpath.length).toBeGreaterThan(0);\n  });\n\n  test(\"drag and drop without returnXpath returns empty strings\", async () => {\n    const page = v3.context.pages()[0];\n\n    await page.goto(\n      \"data:text/html,\" +\n        encodeURIComponent(`\n          <!doctype html>\n          <html>\n          <head>\n            <style>\n              body { margin: 20px; }\n              #item1 { width: 80px; height: 80px; background: red; cursor: move; }\n              #item2 { width: 100px; height: 100px; background: yellow; margin-top: 20px; }\n            </style>\n          </head>\n          <body>\n            <div id=\"item1\" draggable=\"true\"></div>\n            <div id=\"item2\"></div>\n            <script>\n              document.getElementById('item1').addEventListener('dragstart', (e) => {\n                e.dataTransfer.effectAllowed = 'move';\n              });\n              document.getElementById('item2').addEventListener('drop', (e) => {\n                e.preventDefault();\n              });\n              document.getElementById('item2').addEventListener('dragover', (e) => {\n                e.preventDefault();\n              });\n            </script>\n          </body>\n          </html>\n        `),\n    );\n\n    const item1Location = await page\n      .frames()[0]\n      .getLocationForSelector(\"#item1\");\n    const item2Location = await page\n      .frames()[0]\n      .getLocationForSelector(\"#item2\");\n\n    const fromX = item1Location.x + item1Location.width / 2;\n    const fromY = item1Location.y + item1Location.height / 2;\n    const toX = item2Location.x + item2Location.width / 2;\n    const toY = item2Location.y + item2Location.height / 2;\n\n    const [fromXpath, toXpath] = await page.dragAndDrop(fromX, fromY, toX, toY);\n\n    // Should return empty strings when returnXpath is not set\n    expect(fromXpath).toBe(\"\");\n    expect(toXpath).toBe(\"\");\n  });\n\n  test(\"drag and drop with different mouse buttons\", async () => {\n    const page = v3.context.pages()[0];\n\n    await page.goto(\n      \"data:text/html,\" +\n        encodeURIComponent(`\n          <!doctype html>\n          <html>\n          <head>\n            <style>\n              body { margin: 20px; }\n              .draggable { width: 100px; height: 100px; background: lightblue; cursor: move; }\n              .drop-area { width: 200px; height: 200px; background: lightgray; margin-top: 20px; }\n            </style>\n          </head>\n          <body>\n            <div id=\"source\" class=\"draggable\" draggable=\"true\"></div>\n            <div id=\"target\" class=\"drop-area\"></div>\n            <div id=\"buttonUsed\">none</div>\n            <script>\n              document.getElementById('source').addEventListener('dragstart', (e) => {\n                e.dataTransfer.effectAllowed = 'move';\n              });\n              document.getElementById('target').addEventListener('drop', (e) => {\n                e.preventDefault();\n                document.getElementById('buttonUsed').textContent = 'left';\n              });\n              document.getElementById('target').addEventListener('dragover', (e) => {\n                e.preventDefault();\n              });\n            </script>\n          </body>\n          </html>\n        `),\n    );\n\n    const sourceLocation = await page\n      .frames()[0]\n      .getLocationForSelector(\"#source\");\n    const targetLocation = await page\n      .frames()[0]\n      .getLocationForSelector(\"#target\");\n\n    const fromX = sourceLocation.x + sourceLocation.width / 2;\n    const fromY = sourceLocation.y + sourceLocation.height / 2;\n    const toX = targetLocation.x + targetLocation.width / 2;\n    const toY = targetLocation.y + targetLocation.height / 2;\n\n    // Test with left button (default)\n    await page.dragAndDrop(fromX, fromY, toX, toY, { button: \"left\" });\n\n    // Wait for events to be processed\n    await page.evaluate(() => new Promise((r) => setTimeout(r, 100)));\n\n    const buttonUsed = await page.evaluate(\n      () => document.getElementById(\"buttonUsed\").textContent,\n    );\n    expect(buttonUsed).toBe(\"left\");\n  });\n\n  test(\"multiple sequential drag and drops\", async () => {\n    const page = v3.context.pages()[0];\n\n    await page.goto(\n      \"data:text/html,\" +\n        encodeURIComponent(`\n          <!doctype html>\n          <html>\n          <head>\n            <style>\n              body { margin: 20px; font-family: Arial; }\n              .item { width: 80px; height: 80px; background: lightblue; margin: 10px; cursor: move; display: inline-block; }\n              .zone { width: 150px; height: 150px; background: lightyellow; margin: 10px; display: inline-block; border: 2px dashed orange; }\n              #log { margin-top: 20px; }\n            </style>\n          </head>\n          <body>\n            <div id=\"item1\" class=\"item\" draggable=\"true\">Item 1</div>\n            <div id=\"zone1\" class=\"zone\"></div>\n            <div id=\"item2\" class=\"item\" draggable=\"true\">Item 2</div>\n            <div id=\"zone2\" class=\"zone\"></div>\n            <div id=\"log\">Drops: 0</div>\n            <script>\n              let dropCount = 0;\n              const items = ['item1', 'item2'];\n              const zones = ['zone1', 'zone2'];\n              \n              items.forEach(id => {\n                document.getElementById(id).addEventListener('dragstart', (e) => {\n                  e.dataTransfer.effectAllowed = 'move';\n                });\n              });\n              \n              zones.forEach(id => {\n                const zone = document.getElementById(id);\n                zone.addEventListener('drop', (e) => {\n                  e.preventDefault();\n                  dropCount++;\n                  document.getElementById('log').textContent = 'Drops: ' + dropCount;\n                });\n                zone.addEventListener('dragover', (e) => {\n                  e.preventDefault();\n                });\n              });\n            </script>\n          </body>\n          </html>\n        `),\n    );\n\n    const item1Location = await page\n      .frames()[0]\n      .getLocationForSelector(\"#item1\");\n    const zone1Location = await page\n      .frames()[0]\n      .getLocationForSelector(\"#zone1\");\n\n    const from1X = item1Location.x + item1Location.width / 2;\n    const from1Y = item1Location.y + item1Location.height / 2;\n    const to1X = zone1Location.x + zone1Location.width / 2;\n    const to1Y = zone1Location.y + zone1Location.height / 2;\n\n    await page.dragAndDrop(from1X, from1Y, to1X, to1Y);\n\n    await page.evaluate(() => new Promise((r) => setTimeout(r, 100)));\n\n    let dropCountText = await page.evaluate(\n      () => document.getElementById(\"log\").textContent,\n    );\n    expect(dropCountText).toContain(\"Drops: 1\");\n\n    const item2Location = await page\n      .frames()[0]\n      .getLocationForSelector(\"#item2\");\n    const zone2Location = await page\n      .frames()[0]\n      .getLocationForSelector(\"#zone2\");\n\n    const from2X = item2Location.x + item2Location.width / 2;\n    const from2Y = item2Location.y + item2Location.height / 2;\n    const to2X = zone2Location.x + zone2Location.width / 2;\n    const to2Y = zone2Location.y + zone2Location.height / 2;\n\n    await page.dragAndDrop(from2X, from2Y, to2X, to2Y);\n\n    // Wait for events to be processed\n    await page.evaluate(() => new Promise((r) => setTimeout(r, 100)));\n\n    dropCountText = await page.evaluate(\n      () => document.getElementById(\"log\").textContent,\n    );\n    expect(dropCountText).toContain(\"Drops: 2\");\n  });\n});\n"]}

package/dist/cjs/tests/integration/page-extra-http-headers.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/tests/integration/page-extra-http-headers.spec.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const test_1 = require("@playwright/test");
+const v3_js_1 = require("../../lib/v3/v3.js");
+const v3_config_js_1 = require("./v3.config.js");
+const testUtils_js_1 = require("./testUtils.js");
+const TEST_URL = "https://browserbase.github.io/stagehand-eval-sites/sites/example/";
+test_1.test.describe("page.setExtraHTTPHeaders", () => {
+    let v3;
+    test_1.test.beforeEach(async () => {
+        v3 = new v3_js_1.V3(v3_config_js_1.v3TestConfig);
+        await v3.init();
+    });
+    test_1.test.afterEach(async () => {
+        await (0, testUtils_js_1.closeV3)(v3);
+    });
+    (0, test_1.test)("applies headers to navigation requests", async () => {
+        const ctx = v3.context;
+        const page = await ctx.awaitActivePage();
+        await page.setExtraHTTPHeaders({ "x-page-header": "from-page" });
+        const internal = page;
+        await internal.mainSession.send("Network.enable");
+        const requestPromise = new Promise((resolve, reject) => {
+            const timeout = setTimeout(() => {
+                internal.mainSession.off("Network.requestWillBeSent", handler);
+                reject(new Error("Timed out waiting for request"));
+            }, 5000);
+            const handler = (evt) => {
+                if (evt.type !== "Document")
+                    return;
+                const url = String(evt.request?.url ?? "");
+                if (!url.startsWith(TEST_URL))
+                    return;
+                clearTimeout(timeout);
+                internal.mainSession.off("Network.requestWillBeSent", handler);
+                resolve(evt);
+            };
+            internal.mainSession.on("Network.requestWillBeSent", handler);
+        });
+        await page.goto(TEST_URL, { waitUntil: "domcontentloaded" });
+        const request = await requestPromise;
+        const headers = Object.fromEntries(Object.entries(request.request.headers ?? {}).map(([key, value]) => [
+            key.toLowerCase(),
+            String(value),
+        ]));
+        (0, test_1.expect)(headers["x-page-header"]).toBe("from-page");
+    });
+    (0, test_1.test)("updated headers replace previous ones", async () => {
+        const ctx = v3.context;
+        const page = await ctx.awaitActivePage();
+        const internal = page;
+        await internal.mainSession.send("Network.enable");
+        // Set initial headers and navigate
+        await page.setExtraHTTPHeaders({ "x-first": "yes" });
+        await page.goto(TEST_URL, { waitUntil: "domcontentloaded" });
+        // Update headers
+        await page.setExtraHTTPHeaders({ "x-second": "yes" });
+        const requestPromise = new Promise((resolve, reject) => {
+            const timeout = setTimeout(() => {
+                internal.mainSession.off("Network.requestWillBeSent", handler);
+                reject(new Error("Timed out waiting for request"));
+            }, 5000);
+            const handler = (evt) => {
+                if (evt.type !== "Document")
+                    return;
+                const url = String(evt.request?.url ?? "");
+                if (!url.startsWith(TEST_URL))
+                    return;
+                clearTimeout(timeout);
+                internal.mainSession.off("Network.requestWillBeSent", handler);
+                resolve(evt);
+            };
+            internal.mainSession.on("Network.requestWillBeSent", handler);
+        });
+        await page.goto(TEST_URL, { waitUntil: "domcontentloaded" });
+        const request = await requestPromise;
+        const headers = Object.fromEntries(Object.entries(request.request.headers ?? {}).map(([key, value]) => [
+            key.toLowerCase(),
+            String(value),
+        ]));
+        (0, test_1.expect)(headers["x-second"]).toBe("yes");
+        (0, test_1.expect)(headers["x-first"]).toBeUndefined();
+    });
+});
+//# sourceMappingURL=page-extra-http-headers.spec.js.map