waygraph 0.13.7 → 0.14.0

package/examples/saucedemo/docs/CONVENTION.md

@@ -1,7 +1,21 @@
 # saucedemo waygraph conventions
 
-Atomic Blocks - one nav / effect / method per real URL or on-page mutation so
-`waygraph auto` can discover a real state graph (not a fat multi-page Block).
+**How this maps to the app:** navigate to the site -> you land on a `Page` Block
+(the screen hub) -> every Method/Effect/Nav that screen can do hangs off that
+Page. Each Block does exactly **one** distinct action - never two or more
+bundled together. Filling a form field and submitting it are two different
+actions, so they are two different Blocks, even on the same screen:
+`fill-username` / `fill-password` (self-loop Methods, no checkpoint change) and
+`submit-login` (the real transition) are three real Blocks, not one Method
+that "inputs username and password and logs in at the same time." The same
+split applies to `fill-first-name` / `fill-last-name` / `fill-postal-code` /
+`submit-checkout-info` on the shipping form.
+
+This is what makes `waygraph auto`/`traverse` see a clean, honest graph of the
+app: every real user-visible action is its own edge, and no Block silently
+"teleports" the user past several actions at once. It is also why a
+`page.goto()` (or NavBlock `click`) never appears anywhere except inside a
+`defineNavBlock`/`defineNavClickBlock` - see `waygraph check` below.
 
 **TypeScript salt only.** Helpers force a useful shape. At runtime everything is
 still a `Block` - there is no separate Page / Effect / Nav engine.
@@ -33,9 +47,12 @@ src/blocks/
   SITE-MAP.md
   saucedemo-web/                 # THIS FOLDER IS URL "/"
     NAV.md
-    nav-login.block.ts
+    nav-login.block.ts             # Page hub
+    ff-owner-auth.block.ts         # FFCompose wrapping the 4 Blocks below
     methods/
-      submit-login.method.block.ts
+      fill-username.method.block.ts   # self-loop, fills only
+      fill-password.method.block.ts   # self-loop, fills only
+      submit-login.method.block.ts    # click only, branches
       submit-login-for-flow.ts
       submit-logout.method.block.ts
     inventory/                   # /inventory.html
@@ -58,7 +75,10 @@ src/blocks/
     checkout-step-one/           # /checkout-step-one.html
       NAV.md
       methods/
-        submit-checkout-info.method.block.ts
+        fill-first-name.method.block.ts    # self-loop, fills only
+        fill-last-name.method.block.ts     # self-loop, fills only
+        fill-postal-code.method.block.ts   # self-loop, fills only
+        submit-checkout-info.method.block.ts  # click only
     checkout-step-two/           # /checkout-step-two.html
       NAV.md
       methods/

package/examples/saucedemo/docs/HELPERS.md

@@ -8,13 +8,24 @@ Runtime is always a `Block`. Helpers are TypeScript salt + clear intent.
 | `defineNavBlock` | URL / `goto` only | `nav-*.block.ts` |
 | `defineNavClickBlock` | Click-to-navigate only | `nav-*.block.ts` |
 | `defineMemNavBlock` | Nav + per-row `instanceOptions` | `nav-*.block.ts` |
-| `defineMethodBlock` | One-shot non-nav app step | `*.method.block.ts` under `methods/` |
+| `defineMethodBlock` | One-shot non-nav app step, exactly one action | `*.method.block.ts` under `methods/` |
+| `defineAssertBlock` | Self-loop assertion, no state change - `verify` only | `*.method.block.ts` under `methods/` |
 | `defineEffectBlock` | Instance mutate + auto menu rows | `*.effect.block.ts` under `methods/` |
 | `defineBlock` | Escape hatch: tests, unsure, probes | any |
-| `defineActionBlock` | **Deprecated** alias of `defineMethodBlock` | — |
+| `defineActionBlock` | **Deprecated** alias of `defineMethodBlock` | - |
 
 `defineNavBlock({ click })` still works (compat) - prefer `defineNavClickBlock` in app code.
 
+**One distinct action per Block.** A Method that fills fields *and* submits is wrong even if
+it "works" - split it (`fill-username` + `fill-password` + `submit-login`, not one Block).
+`defineAssertBlock({ name, checkpoint, verify, waitForHeading?, requires? })` is the
+self-loop-only shape for "assert something on the current page, no state change" - no
+hand-written `act`/`resolve` to accidentally make do two things. `waygraph check` warns when
+a `verify` array inlines a literal selector string instead of a `*Sel` reference. Give it an
+explicit type argument (`defineAssertBlock<LoggedIn>({...})`) whenever it is not the last
+Block before `end` - otherwise `Out` defaults to wildcard `Checkpoint<string>`, which breaks
+`defineFlow`'s tuple typing mid-chain.
+
 ---
 
 ## Page hub + methods + Sel
@@ -76,7 +87,7 @@ Conditional Out (no `branch()` needed for auto/graph):
 defineMethodBlock<LoginPage, LoggedIn | LoginPage>({
   name: "submit-login",
   instruction: {
-    async act(page, _in, mem) { /* fill + click */ },
+    async act(page) { /* click only - fields were filled by earlier Blocks */ },
     async observe(page) {
       try {
         await page.waitForURL(/\/inventory\.html/, { timeout: 8000 });
@@ -93,7 +104,7 @@ defineMethodBlock<LoginPage, LoggedIn | LoginPage>({
 Optional routing for `runGraph`:
 
 ```ts
-branch(SubmitLoginActionBlock, {
+branch(SubmitLoginBlock, {
   LoggedIn: AddToCartBlock,
   LoginPage: null, // stop
 });

package/examples/saucedemo/scripts/capture-wrong-login.mjs

@@ -87,7 +87,13 @@ const { graph, library } = await buildExploreContext(root);
 const nodeNames = graph.nodes.map((n) => n.checkpoint);
 
 const { NavLoginBlock } = await import(pathToFileURL(join(root, "src/blocks/saucedemo-web/nav-login.block.js")).href);
-const { SubmitLoginActionBlock } = await import(
+const { FillUsernameBlock } = await import(
+  pathToFileURL(join(root, "src/blocks/saucedemo-web/methods/fill-username.method.block.js")).href
+);
+const { FillPasswordBlock } = await import(
+  pathToFileURL(join(root, "src/blocks/saucedemo-web/methods/fill-password.method.block.js")).href
+);
+const { SubmitLoginBlock } = await import(
   pathToFileURL(join(root, "src/blocks/saucedemo-web/methods/submit-login.method.block.js")).href
 );
 const { LoginCreds } = await import(pathToFileURL(join(root, "src/states/checkout.mem-keys.js")).href);
@@ -111,7 +117,7 @@ await paintPanel(page, menuBefore, nodeNames, library.byName, "Mem: standard_use
 await snap(page, "wrong-login-1-before.png");
 
 mem.set(LoginCreds({ username: "standard_user", password: "wrong-password" }));
-const flow = engine.defineFlow([start, NavLoginBlock, SubmitLoginActionBlock, end]);
+const flow = engine.defineFlow([start, NavLoginBlock, FillUsernameBlock, FillPasswordBlock, SubmitLoginBlock, end]);
 const runOut = await flow.run(context, mem, { page, closeOnFinish: false });
 const result = runOut && typeof runOut === "object" && "result" in runOut ? runOut.result : runOut;
 

package/examples/saucedemo/scripts/prove-wrong-login-runtime.mjs

@@ -14,7 +14,13 @@ const root = join(dirname(fileURLToPath(import.meta.url)), "..");
 const waygraphDist = join(root, "../../dist");
 const { Engine, start, end, MemPage } = await import(pathToFileURL(join(waygraphDist, "index.js")).href);
 const { NavLoginBlock } = await import(pathToFileURL(join(root, "src/blocks/saucedemo-web/nav-login.block.js")).href);
-const { SubmitLoginActionBlock } = await import(
+const { FillUsernameBlock } = await import(
+  pathToFileURL(join(root, "src/blocks/saucedemo-web/methods/fill-username.method.block.js")).href
+);
+const { FillPasswordBlock } = await import(
+  pathToFileURL(join(root, "src/blocks/saucedemo-web/methods/fill-password.method.block.js")).href
+);
+const { SubmitLoginBlock } = await import(
   pathToFileURL(join(root, "src/blocks/saucedemo-web/methods/submit-login.method.block.js")).href
 );
 const { LoginCreds } = await import(pathToFileURL(join(root, "src/states/checkout.mem-keys.js")).href);
@@ -35,7 +41,7 @@ const engine = new Engine({ headless: true });
 const mem = new MemPage();
 mem.set(LoginCreds({ username: "standard_user", password: "wrong-password" }));
 
-const flow = engine.defineFlow([start, NavLoginBlock, SubmitLoginActionBlock, end]);
+const flow = engine.defineFlow([start, NavLoginBlock, FillUsernameBlock, FillPasswordBlock, SubmitLoginBlock, end]);
 const runOut = await flow.run(context, mem, { page, closeOnFinish: false });
 const result = runOut && typeof runOut === "object" && "result" in runOut ? runOut.result : runOut;
 

package/examples/saucedemo/src/blocks/SITE-MAP.md

@@ -8,11 +8,15 @@ src/blocks/
   SITE-MAP.md
   saucedemo-web/                      # URL /
     NAV.md
-    nav-login.block.ts                # Nav  defineNavBlock url:/
+    nav-login.block.ts                # Page  definePageBlock url:/
+    ff-owner-auth.block.ts            # FFCompose (nav-login + fill-username + fill-password + submit-login)
     methods/
-      submit-login.method.block.ts    # Method defineMethodBlock
+      fill-username.method.block.ts   # Method defineMethodBlock (self-loop on LoginPage)
+      fill-password.method.block.ts   # Method defineMethodBlock (self-loop on LoginPage)
+      submit-login.method.block.ts    # Method defineMethodBlock (click only; branches)
       submit-login-for-flow.ts        # helper (not a discoverable *.block.ts alone)
       submit-logout.method.block.ts   # Method defineMethodBlock
+      login.sel.ts                    # LoginSel (not a Block)
     inventory/                        # URL /inventory.html
       inventory.page.block.ts       # Page definePageBlock
       NAV.md
@@ -25,20 +29,27 @@ src/blocks/
         remove-from-cart.effect.block.ts
     inventory-item/                   # URL /inventory-item.html
       NAV.md
+      item-detail.sel.ts              # ItemDetailSel (not a Block)
       nav-continue-shopping.block.ts
       nav-back-to-products.block.ts
       nav-back-to-inventory.block.ts
     cart/                             # URL /cart.html
       NAV.md
+      cart.sel.ts                     # CartSel (not a Block)
       nav-cart.block.ts               # Nav click header cart
       nav-checkout-info.block.ts
     checkout-step-one/                # URL /checkout-step-one.html
       NAV.md
       methods/
-        submit-checkout-info.method.block.ts
+        checkout-info.sel.ts               # CheckoutInfoSel (not a Block)
+        fill-first-name.method.block.ts    # Method defineMethodBlock (self-loop on CheckoutInfoPage)
+        fill-last-name.method.block.ts     # Method defineMethodBlock (self-loop on CheckoutInfoPage)
+        fill-postal-code.method.block.ts   # Method defineMethodBlock (self-loop on CheckoutInfoPage)
+        submit-checkout-info.method.block.ts  # Method defineMethodBlock (click only)
     checkout-step-two/                # URL /checkout-step-two.html
       NAV.md
       methods/
+        checkout-overview.sel.ts      # CheckoutOverviewSel (not a Block)
         finish-order.method.block.ts
 ```
 

package/examples/saucedemo/src/blocks/saucedemo-web/NAV.md

@@ -16,11 +16,25 @@ Login page for Swag Labs. This folder is the namespace root (`/` in the browser)
 
 | File | Kind | Notes |
 |------|------|-------|
-| `methods/submit-login.method.block.ts` | Method | Form submit; branches LoggedIn vs LoginPage |
+| `methods/fill-username.method.block.ts` | Method | Fills username only; self-loop on LoginPage |
+| `methods/fill-password.method.block.ts` | Method | Fills password only; self-loop on LoginPage |
+| `methods/submit-login.method.block.ts` | Method | Click Login only; branches LoggedIn vs LoginPage |
 | `methods/submit-login-for-flow.ts` | helper | Typed alias for linear Flows |
 | `methods/submit-logout.method.block.ts` | Method | Burger menu logout -> LoginPage |
+| `methods/login.sel.ts` | helper | `LoginSel` (not a Block) |
+
+Fill and submit are three separate Blocks (not one that fills both fields and
+clicks Login) so the graph/demo show each as its own step - no Block does
+more than one distinct action.
+
+## Other
+
+| File | Kind | Notes |
+|------|------|-------|
+| `ff-owner-auth.block.ts` | FFCompose | Collapses nav-login + fill-username + fill-password + submit-login into one opaque demo/run step (`--ff-expand` shows all 4 again) |
 
 ## Related mem keys / checkpoints
 
 - Mem: `saucedemo.credentials` (`LoginCreds`)
 - Checkpoints: `LoginPage`, `LoggedIn` (success path of submit-login)
+- Sel: `LoginSel` (`methods/login.sel.ts`) - DOM only, not mem

package/examples/saucedemo/src/blocks/saucedemo-web/cart/NAV.md

@@ -20,3 +20,4 @@ Shopping cart page and checkout entry.
 ## Related mem keys / checkpoints
 
 - Checkpoints: `CartPage`, `CheckoutInfoPage`, `ItemInCart` / `LoggedIn` (cart contents)
+- Sel: `CartSel` (`cart.sel.ts`) - DOM only, not mem

package/examples/saucedemo/src/blocks/saucedemo-web/cart/cart.sel.ts

@@ -0,0 +1,9 @@
+/**
+ * DOM selectors for the cart route (`/cart.html`) and its outbound nav
+ * controls. Convention: DOM strings live in `*Sel` next to the page, not
+ * inlined in each Block.
+ */
+export const CartSel = {
+  cartLink: ".shopping_cart_link",
+  checkoutBtn: "#checkout",
+};

package/examples/saucedemo/src/blocks/saucedemo-web/cart/nav-cart.block.ts

@@ -2,6 +2,7 @@ import { defineNavClickBlock, Trait } from "waygraph";
 import type { StubCtx } from "waygraph";
 import type { CartPage } from "../../../states/checkout.states.js";
 import { InventorySel } from "../inventory/methods/inventory-items.js";
+import { CartSel } from "./cart.sel.js";
 
 /**
  * Kind: Nav
@@ -14,7 +15,7 @@ export const NavCartBlock = defineNavClickBlock<CartPage>({
   name: "nav-cart",
   description: "Clicks the cart link in the header.",
   checkpoint: "CartPage",
-  click: ".shopping_cart_link",
+  click: CartSel.cartLink,
   verify: [Trait.url({ pathname: "/cart.html" })],
   stubBefore: (ctx: StubCtx) => {
     ctx.title("Open cart · landscape");
@@ -35,7 +36,7 @@ export const NavCartBlock = defineNavClickBlock<CartPage>({
     ctx.zoomOut(false);
     ctx.highlights({
       cart: {
-        selector: ".shopping_cart_link",
+        selector: CartSel.cartLink,
         label: "Cart",
         detail: "Open cart",
         focus: true,

package/examples/saucedemo/src/blocks/saucedemo-web/cart/nav-checkout-info.block.ts

@@ -1,5 +1,6 @@
 import { defineNavClickBlock, Trait } from "waygraph";
 import type { CheckoutInfoPage } from "../../../states/checkout.states.js";
+import { CartSel } from "./cart.sel.js";
 
 /**
  * Kind: Nav
@@ -12,6 +13,6 @@ export const NavCheckoutInfoBlock = defineNavClickBlock<CheckoutInfoPage>({
   name: "nav-checkout-info",
   description: "Clicks 'Checkout' on the cart page.",
   checkpoint: "CheckoutInfoPage",
-  click: "#checkout",
+  click: CartSel.checkoutBtn,
   verify: [Trait.url({ pathname: "/checkout-step-one.html" })],
 });

package/examples/saucedemo/src/blocks/saucedemo-web/checkout-step-one/NAV.md

@@ -14,8 +14,13 @@ Shipping info form before order overview.
 
 | File | Kind | Notes |
 |------|------|-------|
-| `methods/submit-checkout-info.method.block.ts` | Method | Fill form + Continue -> overview |
+| `methods/fill-first-name.method.block.ts` | Method | Fills first name only; self-loop on CheckoutInfoPage |
+| `methods/fill-last-name.method.block.ts` | Method | Fills last name only; self-loop on CheckoutInfoPage |
+| `methods/fill-postal-code.method.block.ts` | Method | Fills postal code only; self-loop on CheckoutInfoPage |
+| `methods/submit-checkout-info.method.block.ts` | Method | Click Continue only -> overview |
+| `methods/checkout-info.sel.ts` | helper | `CheckoutInfoSel` (not a Block) |
 
 ## Related mem keys / checkpoints
 
 - Checkpoints: `CheckoutInfoPage`, `CheckoutOverviewPage`
+- Sel: `CheckoutInfoSel` (`methods/checkout-info.sel.ts`) - DOM only, not mem

package/examples/saucedemo/src/blocks/saucedemo-web/checkout-step-one/methods/checkout-info.sel.ts

@@ -0,0 +1,11 @@
+/**
+ * DOM selectors for the shipping info form (`/checkout-step-one.html`).
+ * Convention: DOM strings live in `*Sel` next to the page, not inlined in
+ * each Block.
+ */
+export const CheckoutInfoSel = {
+  firstName: "#first-name",
+  lastName: "#last-name",
+  postalCode: "#postal-code",
+  continueBtn: "#continue",
+};

package/examples/saucedemo/src/blocks/saucedemo-web/checkout-step-one/methods/fill-first-name.method.block.ts

@@ -0,0 +1,22 @@
+import { defineMethodBlock, checkpoint } from "waygraph";
+import type { CheckoutInfoPage } from "../../../../states/checkout.states.js";
+import { CheckoutInfoSel } from "./checkout-info.sel.js";
+
+/**
+ * Kind: Method
+ * Helper: defineMethodBlock
+ * Route: saucedemo-web/checkout-step-one/methods/  (= /checkout-step-one.html)
+ *
+ * Fills the first name field only - self-loop on CheckoutInfoPage. Continue
+ * is its own Block (submit-checkout-info.method.block.ts).
+ */
+export const FillFirstNameBlock = defineMethodBlock<CheckoutInfoPage, CheckoutInfoPage>({
+  name: "fill-first-name",
+  description: "Fills the first name field on the shipping info form.",
+  instruction: {
+    async act(page) {
+      await page.locator(CheckoutInfoSel.firstName).fill("Ada");
+    },
+    resolve: () => checkpoint("CheckoutInfoPage"),
+  },
+});

package/examples/saucedemo/src/blocks/saucedemo-web/checkout-step-one/methods/fill-last-name.method.block.ts

@@ -0,0 +1,21 @@
+import { defineMethodBlock, checkpoint } from "waygraph";
+import type { CheckoutInfoPage } from "../../../../states/checkout.states.js";
+import { CheckoutInfoSel } from "./checkout-info.sel.js";
+
+/**
+ * Kind: Method
+ * Helper: defineMethodBlock
+ * Route: saucedemo-web/checkout-step-one/methods/  (= /checkout-step-one.html)
+ *
+ * Fills the last name field only - self-loop on CheckoutInfoPage.
+ */
+export const FillLastNameBlock = defineMethodBlock<CheckoutInfoPage, CheckoutInfoPage>({
+  name: "fill-last-name",
+  description: "Fills the last name field on the shipping info form.",
+  instruction: {
+    async act(page) {
+      await page.locator(CheckoutInfoSel.lastName).fill("Lovelace");
+    },
+    resolve: () => checkpoint("CheckoutInfoPage"),
+  },
+});

package/examples/saucedemo/src/blocks/saucedemo-web/checkout-step-one/methods/fill-postal-code.method.block.ts

@@ -0,0 +1,21 @@
+import { defineMethodBlock, checkpoint } from "waygraph";
+import type { CheckoutInfoPage } from "../../../../states/checkout.states.js";
+import { CheckoutInfoSel } from "./checkout-info.sel.js";
+
+/**
+ * Kind: Method
+ * Helper: defineMethodBlock
+ * Route: saucedemo-web/checkout-step-one/methods/  (= /checkout-step-one.html)
+ *
+ * Fills the postal code field only - self-loop on CheckoutInfoPage.
+ */
+export const FillPostalCodeBlock = defineMethodBlock<CheckoutInfoPage, CheckoutInfoPage>({
+  name: "fill-postal-code",
+  description: "Fills the postal code field on the shipping info form.",
+  instruction: {
+    async act(page) {
+      await page.locator(CheckoutInfoSel.postalCode).fill("1000");
+    },
+    resolve: () => checkpoint("CheckoutInfoPage"),
+  },
+});

package/examples/saucedemo/src/blocks/saucedemo-web/checkout-step-one/methods/submit-checkout-info.method.block.ts

@@ -1,23 +1,22 @@
 import { defineMethodBlock, checkpoint, Trait } from "waygraph";
 import type { CheckoutInfoPage, CheckoutOverviewPage } from "../../../../states/checkout.states.js";
+import { CheckoutInfoSel } from "./checkout-info.sel.js";
 
 /**
  * Kind: Method
  * Helper: defineMethodBlock
  * Route: saucedemo-web/checkout-step-one/methods/  (= /checkout-step-one.html)
  *
- * Fills shipping form and continues - never navigates itself
- * (nav-checkout-info already got here).
+ * Clicks Continue only - fields are filled by fill-first-name /
+ * fill-last-name / fill-postal-code (each its own Block). One Block, one
+ * action: submit.
  */
 export const SubmitCheckoutInfoBlock = defineMethodBlock<CheckoutInfoPage, CheckoutOverviewPage>({
   name: "submit-checkout-info",
-  description: "Fills in the shipping info form and continues to the order overview.",
+  description: "Continues from the shipping info form to the order overview.",
   instruction: {
     async act(page) {
-      await page.locator("#first-name").fill("Ada");
-      await page.locator("#last-name").fill("Lovelace");
-      await page.locator("#postal-code").fill("1000");
-      await page.locator("#continue").click();
+      await page.locator(CheckoutInfoSel.continueBtn).click();
     },
     resolve: () => checkpoint("CheckoutOverviewPage"),
     verify: [Trait.url({ pathname: "/checkout-step-two.html" })],

package/examples/saucedemo/src/blocks/saucedemo-web/checkout-step-two/NAV.md

@@ -15,7 +15,9 @@ Order overview / finish page.
 | File | Kind | Notes |
 |------|------|-------|
 | `methods/finish-order.method.block.ts` | Method | Finish -> thank-you / OrderComplete |
+| `methods/checkout-overview.sel.ts` | helper | `CheckoutOverviewSel` (not a Block) |
 
 ## Related mem keys / checkpoints
 
 - Checkpoints: `CheckoutOverviewPage`, `OrderComplete`
+- Sel: `CheckoutOverviewSel` (`methods/checkout-overview.sel.ts`) - DOM only, not mem

package/examples/saucedemo/src/blocks/saucedemo-web/checkout-step-two/methods/checkout-overview.sel.ts

@@ -0,0 +1,9 @@
+/**
+ * DOM selectors for the order overview / completion page
+ * (`/checkout-step-two.html`). Convention: DOM strings live in `*Sel` next
+ * to the page, not inlined in each Block.
+ */
+export const CheckoutOverviewSel = {
+  finishBtn: "#finish",
+  completeHeader: ".complete-header",
+};

package/examples/saucedemo/src/blocks/saucedemo-web/checkout-step-two/methods/finish-order.method.block.ts

@@ -1,5 +1,6 @@
 import { defineMethodBlock, checkpoint, Trait, narrate } from "waygraph";
 import type { CheckoutOverviewPage, OrderComplete } from "../../../../states/checkout.states.js";
+import { CheckoutOverviewSel } from "./checkout-overview.sel.js";
 
 /**
  * Kind: Method
@@ -13,17 +14,17 @@ export const FinishOrderBlock = defineMethodBlock<CheckoutOverviewPage, OrderCom
   description: "Places the order and confirms the 'Thank you for your order!' completion page.",
   instruction: {
     async act(page) {
-      const finishButton = page.locator("#finish");
+      const finishButton = page.locator(CheckoutOverviewSel.finishBtn);
       await narrate(finishButton, "Placing the order", () => finishButton.click());
     },
     resolve: () => checkpoint("OrderComplete"),
-    verify: [Trait.text(".complete-header", "Thank you for your order!")],
+    verify: [Trait.text(CheckoutOverviewSel.completeHeader, "Thank you for your order!")],
     stubBefore: {
-      finish: { selector: "#finish", label: "Finish" },
+      finish: { selector: CheckoutOverviewSel.finishBtn, label: "Finish" },
     },
     stubAfter: {
       thanks: {
-        selector: ".complete-header",
+        selector: CheckoutOverviewSel.completeHeader,
         label: "Order confirmed",
         detail: "Thank you for your order!",
         duration: true,
@@ -42,7 +43,7 @@ export const FinishOrderBlock = defineMethodBlock<CheckoutOverviewPage, OrderCom
         caption: "Completion page is the durable proof",
         detail: "The thank-you header is what verify asserts on.",
         tag: "YAP",
-        selector: ".complete-header",
+        selector: CheckoutOverviewSel.completeHeader,
         duration: 2500,
         fastMode: 700,
       },
@@ -50,7 +51,7 @@ export const FinishOrderBlock = defineMethodBlock<CheckoutOverviewPage, OrderCom
         caption: "Episode continues after this yap",
         detail: "Next step rings the same banner, then you move on.",
         tag: "YAP",
-        selector: ".complete-header",
+        selector: CheckoutOverviewSel.completeHeader,
         duration: true,
         fastMode: 500,
       },