waygraph 0.12.24 → 0.12.26

package/dist/cli.js

@@ -1139,18 +1139,40 @@ async function ensureSelectorInView(page, selector) {
     const loc = page.locator(selector).first();
     await loc.scrollIntoViewIfNeeded().catch(() => {});
     await page
-      .evaluate((sel) => {
+      .evaluate(async (sel) => {
         const el = document.querySelector(sel);
         if (!el) return;
+        const waitScroll = (node, ms) =>
+          new Promise((resolve) => {
+            let done = false;
+            const finish = () => {
+              if (done) return;
+              done = true;
+              node.removeEventListener("scrollend", finish);
+              clearTimeout(t);
+              resolve();
+            };
+            const t = setTimeout(finish, ms);
+            try {
+              node.addEventListener("scrollend", finish, { once: true });
+            } catch {
+              /* scrollend unsupported - timeout only */
+            }
+          });
         try {
-          el.scrollIntoView({ block: "center", inline: "center", behavior: "instant" });
+          el.scrollIntoView({ block: "center", inline: "center", behavior: "smooth" });
         } catch {
           try {
-            el.scrollIntoView(true);
+            el.scrollIntoView({ block: "center", inline: "center" });
           } catch {
-            /* ignore */
+            try {
+              el.scrollIntoView(true);
+            } catch {
+              /* ignore */
+            }
           }
         }
+        await waitScroll(document.scrollingElement || document.documentElement, 500);
         let p = el.parentElement;
         while (p && p !== document.documentElement && p !== document.body) {
           const st = getComputedStyle(p);
@@ -1160,8 +1182,15 @@ async function ensureSelectorInView(page, selector) {
             const er = el.getBoundingClientRect();
             const pr = p.getBoundingClientRect();
             if (er.left < pr.left || er.right > pr.right || er.top < pr.top || er.bottom > pr.bottom) {
-              p.scrollLeft += er.left + er.width / 2 - (pr.left + pr.width / 2);
-              p.scrollTop += er.top + er.height / 2 - (pr.top + pr.height / 2);
+              const left = p.scrollLeft + (er.left + er.width / 2 - (pr.left + pr.width / 2));
+              const top = p.scrollTop + (er.top + er.height / 2 - (pr.top + pr.height / 2));
+              try {
+                p.scrollTo({ left, top, behavior: "smooth" });
+              } catch {
+                p.scrollLeft = left;
+                p.scrollTop = top;
+              }
+              await waitScroll(p, 500);
             }
           }
           p = p.parentElement;

package/examples/saucedemo/package-lock.json

@@ -17,7 +17,7 @@
       }
     },
     "../..": {
-      "version": "0.12.4",
+      "version": "0.12.24",
       "license": "MIT",
       "dependencies": {
         "tsx": "^4.0.0"
@@ -26,7 +26,7 @@
         "waygraph": "bin/waygraph"
       },
       "devDependencies": {
-        "@playwright/test": "^1.55.0",
+        "@playwright/test": "^1.63.0",
         "@types/node": "^26.0.0",
         "typescript": "^5.6.0"
       },

package/examples/saucedemo/src/blocks/saucedemo-web/methods/submit-login.method.block.ts

@@ -45,20 +45,36 @@ export const SubmitLoginActionBlock = defineMethodBlock<LoginPage, LoginSubmitOu
       out.__state === "LoggedIn"
         ? [Trait.url({ pathname: "/inventory.html" })]
         : [Trait.visible('[data-test="error"]')],
-    stubBefore: {
-      username: { selector: "#user-name", label: "Username" },
-      password: { selector: "#password", label: "Password" },
-      submit: { selector: "#login-button", label: "Login" },
+    // Open lifecycle: todos + zoom; stubAfter rings a lower inventory item
+    // so smooth auto-scroll is visible after login.
+    stubBefore: (ctx) => {
+      ctx.todos(["Enter username", "Enter password", "Click Login"]);
+      ctx.todoIndex(0);
+      ctx.zoom(1.25);
+      ctx.highlights({
+        username: { selector: "#user-name", label: "Username", zoom: 1.3 },
+        password: { selector: "#password", label: "Password", zoom: 1.3 },
+        submit: { selector: "#login-button", label: "Login", zoom: 1.45 },
+      });
     },
-    stubAfter: {},
-    // Fail-path rings (demo step throw only) - locked-out / wrong-password
-    // bug-repro narration; success never shows these.
-    stubOnError: {
-      error: {
+    stubAfter: (ctx) => {
+      ctx.todos(["Enter username", "Enter password", "Click Login"]);
+      ctx.todoIndex(2);
+      // Inventory is tall - fleece sits lower; demo smooth-scrolls + zooms it.
+      ctx.ring("fleece", {
+        selector: '[data-test="add-to-cart-sauce-labs-fleece-jacket"]',
+        label: "Fleece jacket",
+        detail: "Smooth scroll + zoom",
+        zoom: 1.4,
+        duration: true,
+      });
+    },
+    stubOnError: (ctx) => {
+      ctx.ring("error", {
         selector: '[data-test="error"]',
         label: "Login error banner",
         duration: true,
-      },
+      });
     },
   },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waygraph",
-  "version": "0.12.24",
+  "version": "0.12.26",
   "type": "module",
   "description": "A typed graph of reusable Blocks for driving a browser through E2E flows.",
   "license": "MIT",

package/templates/quickstart/src/blocks/saucedemo-web/methods/submit-login.method.block.ts

@@ -45,18 +45,33 @@ export const SubmitLoginActionBlock = defineMethodBlock<LoginPage, LoginSubmitOu
       out.__state === "LoggedIn"
         ? [Trait.url({ pathname: "/inventory.html" })]
         : [Trait.visible('[data-test="error"]')],
-    stubBefore: {
-      username: { selector: "#user-name", label: "Username" },
-      password: { selector: "#password", label: "Password" },
-      submit: { selector: "#login-button", label: "Login" },
+    stubBefore: (ctx) => {
+      ctx.todos(["Enter username", "Enter password", "Click Login"]);
+      ctx.todoIndex(0);
+      ctx.zoom(1.25);
+      ctx.highlights({
+        username: { selector: "#user-name", label: "Username", zoom: 1.3 },
+        password: { selector: "#password", label: "Password", zoom: 1.3 },
+        submit: { selector: "#login-button", label: "Login", zoom: 1.45 },
+      });
     },
-    stubAfter: {},
-    stubOnError: {
-      error: {
+    stubAfter: (ctx) => {
+      ctx.todos(["Enter username", "Enter password", "Click Login"]);
+      ctx.todoIndex(2);
+      ctx.ring("fleece", {
+        selector: '[data-test="add-to-cart-sauce-labs-fleece-jacket"]',
+        label: "Fleece jacket",
+        detail: "Smooth scroll + zoom",
+        zoom: 1.4,
+        duration: true,
+      });
+    },
+    stubOnError: (ctx) => {
+      ctx.ring("error", {
         selector: '[data-test="error"]',
         label: "Login error banner",
         duration: true,
-      },
+      });
     },
   },
 });