waygraph 0.12.33 → 0.12.34

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 (8) hide show
  1. package/examples/saucedemo/package.json +3 -3
  2. package/examples/saucedemo/src/blocks/saucedemo-web/cart/nav-cart.block.ts +33 -0
  3. package/examples/saucedemo/src/blocks/saucedemo-web/inventory/methods/add-to-cart.effect.block.ts +41 -5
  4. package/examples/saucedemo/src/blocks/saucedemo-web/methods/submit-login.method.block.ts +7 -7
  5. package/package.json +1 -1
  6. package/templates/quickstart/src/blocks/saucedemo-web/cart/nav-cart.block.ts +33 -0
  7. package/templates/quickstart/src/blocks/saucedemo-web/inventory/methods/add-to-cart.effect.block.ts +41 -5
  8. package/templates/quickstart/src/blocks/saucedemo-web/methods/submit-login.method.block.ts +7 -7
package/examples/saucedemo/package.json CHANGED
@@ -8,9 +8,9 @@
8
8
  "typecheck": "tsc --noEmit",
9
9
  "test": "playwright test",
10
10
  "flows": "waygraph list",
11
- "demo": "waygraph demo --blocks shopFlow",
12
- "demo:step": "waygraph demo --blocks shopFlow --title \"Shop demo\"",
13
- "demo:auto-next": "waygraph demo --blocks shopFlow --auto-next --title \"Shop demo\"",
11
+ "demo": "waygraph demo --blocks \"loginFlow then shopFlow\" --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"},\\\"saucedemo.selectedItem\\\":{\\\"id\\\":\\\"sauce-labs-backpack\\\",\\\"name\\\":\\\"Sauce Labs Backpack\\\"}}\"",
12
+ "demo:step": "waygraph demo --blocks \"loginFlow then shopFlow\" --title \"Shop demo\" --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"},\\\"saucedemo.selectedItem\\\":{\\\"id\\\":\\\"sauce-labs-backpack\\\",\\\"name\\\":\\\"Sauce Labs Backpack\\\"}}\"",
13
+ "demo:auto-next": "waygraph demo --blocks \"loginFlow then shopFlow\" --auto-next --title \"Product then cart\" --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"},\\\"saucedemo.selectedItem\\\":{\\\"id\\\":\\\"sauce-labs-backpack\\\",\\\"name\\\":\\\"Sauce Labs Backpack\\\"}}\"",
14
14
  "auto": "waygraph auto",
15
15
  "auto:cli": "waygraph auto --cli --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"}}\"",
16
16
  "prove:auto-cli": "node scripts/drive-auto-cli.mjs",
package/examples/saucedemo/src/blocks/saucedemo-web/cart/nav-cart.block.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { defineNavClickBlock, Trait } from "waygraph";
2
2
  import type { CartPage } from "../../../states/checkout.states.js";
3
+ import { InventorySel } from "../inventory/methods/inventory-items.js";
3
4
 
4
5
  /**
5
6
  * Kind: Nav
@@ -14,4 +15,36 @@ export const NavCartBlock = defineNavClickBlock<CartPage>({
14
15
  checkpoint: "CartPage",
15
16
  click: ".shopping_cart_link",
16
17
  verify: [Trait.url({ pathname: "/cart.html" })],
18
+ // Demo: zoom cart chrome, then the cart line items after landing.
19
+ stubBefore: (ctx) => {
20
+ ctx.title("Open cart");
21
+ ctx.todos(["Find the product", "Add to cart", "Open cart"]);
22
+ ctx.todoIndex(2);
23
+ ctx.zoom(1.4);
24
+ ctx.highlights({
25
+ cart: {
26
+ selector: ".shopping_cart_link",
27
+ label: "Cart",
28
+ detail: "Zoom cart chrome",
29
+ focus: true,
30
+ color: "#c9a6ff",
31
+ zoom: 1.55,
32
+ followMouse: true,
33
+ weight: "bold",
34
+ },
35
+ });
36
+ },
37
+ stubAfter: (ctx) => {
38
+ ctx.banner("Your cart");
39
+ ctx.ring("items", {
40
+ selector: InventorySel.cartItem,
41
+ label: "Cart items",
42
+ detail: "Product landed in cart",
43
+ focus: true,
44
+ color: "#86efac",
45
+ zoom: 1.4,
46
+ followMouse: true,
47
+ duration: true,
48
+ });
49
+ },
17
50
  });
package/examples/saucedemo/src/blocks/saucedemo-web/inventory/methods/add-to-cart.effect.block.ts CHANGED
@@ -3,6 +3,9 @@ import type { ItemInCart } from "../../../../states/checkout.states.js";
3
3
  import { SelectedItem } from "../../../../states/checkout.mem-keys.js";
4
4
  import { collectAddableItems, InventorySel } from "./inventory-items.js";
5
5
 
6
+ /** Showcase product for headed demos (matches shopFlow --data selectedItem). */
7
+ const DEMO_PRODUCT_ID = "sauce-labs-backpack";
8
+
6
9
  /**
7
10
  * Kind: Effect
8
11
  * Helper: defineEffectBlock
@@ -30,13 +33,46 @@ export const AddToCartBlock = defineEffectBlock<Checkpoint<string>, ItemInCart>(
30
33
  },
31
34
  },
32
35
  ],
33
- stubBefore: {},
34
- stubAfter: {
35
- badge: {
36
+ // Demo path: zoom the product, then the add button, then (after) the cart badge.
37
+ stubBefore: (ctx) => {
38
+ ctx.title("Pick a product");
39
+ ctx.todos(["Find the product", "Add to cart", "Open cart"]);
40
+ ctx.todoIndex(0);
41
+ ctx.zoom(1.35);
42
+ ctx.highlights({
43
+ product: {
44
+ selector: InventorySel.title(DEMO_PRODUCT_ID),
45
+ label: "Sauce Labs Backpack",
46
+ detail: "Zoom the product",
47
+ focus: true,
48
+ color: "#c9a6ff",
49
+ zoom: 1.45,
50
+ followMouse: true,
51
+ },
52
+ add: {
53
+ selector: InventorySel.addBtn(DEMO_PRODUCT_ID),
54
+ label: "Add to cart",
55
+ focus: true,
56
+ color: "#86efac",
57
+ zoom: 1.5,
58
+ weight: "bold",
59
+ },
60
+ });
61
+ },
62
+ stubAfter: (ctx) => {
63
+ ctx.banner("In the cart");
64
+ ctx.todos(["Find the product", "Add to cart", "Open cart"]);
65
+ ctx.todoIndex(1);
66
+ ctx.ring("badge", {
36
67
  selector: InventorySel.cartBadge,
37
68
  label: "Cart badge",
38
- detail: "Item is in the cart",
39
- },
69
+ detail: "Item count updated",
70
+ focus: true,
71
+ color: "#86efac",
72
+ zoom: 1.6,
73
+ followMouse: true,
74
+ duration: true,
75
+ });
40
76
  },
41
77
  },
42
78
  async instanceOptions(page): Promise<readonly WaygraphInstanceOption[]> {
package/examples/saucedemo/src/blocks/saucedemo-web/methods/submit-login.method.block.ts CHANGED
@@ -81,14 +81,14 @@ export const SubmitLoginActionBlock = defineMethodBlock<LoginPage, LoginSubmitOu
81
81
  ctx.banner("Inventory");
82
82
  ctx.todos(["Enter username", "Enter password", "Click Login"]);
83
83
  ctx.todoIndex(2);
84
- // Fleece sits lower - demo smooth-scrolls + Screen Studio zooms to it.
85
- ctx.ring("fleece", {
86
- selector: '[data-test="add-to-cart-sauce-labs-fleece-jacket"]',
87
- label: "Fleece jacket",
88
- detail: "Smooth scroll + camera zoom",
84
+ // Landed on inventory - hand off to shopFlow for product -> cart zoom.
85
+ ctx.ring("shelf", {
86
+ selector: ".inventory_list",
87
+ label: "Product shelf",
88
+ detail: "Ready to shop",
89
89
  focus: true,
90
- color: "#86efac",
91
- zoom: 1.45,
90
+ color: "#c9a6ff",
91
+ zoom: 1.25,
92
92
  duration: true,
93
93
  });
94
94
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "waygraph",
3
- "version": "0.12.33",
3
+ "version": "0.12.34",
4
4
  "type": "module",
5
5
  "description": "A typed graph of reusable Blocks for driving a browser through E2E flows.",
6
6
  "license": "MIT",
package/templates/quickstart/src/blocks/saucedemo-web/cart/nav-cart.block.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { defineNavClickBlock, Trait } from "waygraph";
2
2
  import type { CartPage } from "../../../states/checkout.states.js";
3
+ import { InventorySel } from "../inventory/methods/inventory-items.js";
3
4
 
4
5
  /**
5
6
  * Kind: Nav
@@ -14,4 +15,36 @@ export const NavCartBlock = defineNavClickBlock<CartPage>({
14
15
  checkpoint: "CartPage",
15
16
  click: ".shopping_cart_link",
16
17
  verify: [Trait.url({ pathname: "/cart.html" })],
18
+ // Demo: zoom cart chrome, then the cart line items after landing.
19
+ stubBefore: (ctx) => {
20
+ ctx.title("Open cart");
21
+ ctx.todos(["Find the product", "Add to cart", "Open cart"]);
22
+ ctx.todoIndex(2);
23
+ ctx.zoom(1.4);
24
+ ctx.highlights({
25
+ cart: {
26
+ selector: ".shopping_cart_link",
27
+ label: "Cart",
28
+ detail: "Zoom cart chrome",
29
+ focus: true,
30
+ color: "#c9a6ff",
31
+ zoom: 1.55,
32
+ followMouse: true,
33
+ weight: "bold",
34
+ },
35
+ });
36
+ },
37
+ stubAfter: (ctx) => {
38
+ ctx.banner("Your cart");
39
+ ctx.ring("items", {
40
+ selector: InventorySel.cartItem,
41
+ label: "Cart items",
42
+ detail: "Product landed in cart",
43
+ focus: true,
44
+ color: "#86efac",
45
+ zoom: 1.4,
46
+ followMouse: true,
47
+ duration: true,
48
+ });
49
+ },
17
50
  });
package/templates/quickstart/src/blocks/saucedemo-web/inventory/methods/add-to-cart.effect.block.ts CHANGED
@@ -3,6 +3,9 @@ import type { ItemInCart } from "../../../../states/checkout.states.js";
3
3
  import { SelectedItem } from "../../../../states/checkout.mem-keys.js";
4
4
  import { collectAddableItems, InventorySel } from "./inventory-items.js";
5
5
 
6
+ /** Showcase product for headed demos (matches shopFlow --data selectedItem). */
7
+ const DEMO_PRODUCT_ID = "sauce-labs-backpack";
8
+
6
9
  /**
7
10
  * Kind: Effect
8
11
  * Helper: defineEffectBlock
@@ -30,13 +33,46 @@ export const AddToCartBlock = defineEffectBlock<Checkpoint<string>, ItemInCart>(
30
33
  },
31
34
  },
32
35
  ],
33
- stubBefore: {},
34
- stubAfter: {
35
- badge: {
36
+ // Demo path: zoom the product, then the add button, then (after) the cart badge.
37
+ stubBefore: (ctx) => {
38
+ ctx.title("Pick a product");
39
+ ctx.todos(["Find the product", "Add to cart", "Open cart"]);
40
+ ctx.todoIndex(0);
41
+ ctx.zoom(1.35);
42
+ ctx.highlights({
43
+ product: {
44
+ selector: InventorySel.title(DEMO_PRODUCT_ID),
45
+ label: "Sauce Labs Backpack",
46
+ detail: "Zoom the product",
47
+ focus: true,
48
+ color: "#c9a6ff",
49
+ zoom: 1.45,
50
+ followMouse: true,
51
+ },
52
+ add: {
53
+ selector: InventorySel.addBtn(DEMO_PRODUCT_ID),
54
+ label: "Add to cart",
55
+ focus: true,
56
+ color: "#86efac",
57
+ zoom: 1.5,
58
+ weight: "bold",
59
+ },
60
+ });
61
+ },
62
+ stubAfter: (ctx) => {
63
+ ctx.banner("In the cart");
64
+ ctx.todos(["Find the product", "Add to cart", "Open cart"]);
65
+ ctx.todoIndex(1);
66
+ ctx.ring("badge", {
36
67
  selector: InventorySel.cartBadge,
37
68
  label: "Cart badge",
38
- detail: "Item is in the cart",
39
- },
69
+ detail: "Item count updated",
70
+ focus: true,
71
+ color: "#86efac",
72
+ zoom: 1.6,
73
+ followMouse: true,
74
+ duration: true,
75
+ });
40
76
  },
41
77
  },
42
78
  async instanceOptions(page): Promise<readonly WaygraphInstanceOption[]> {
package/templates/quickstart/src/blocks/saucedemo-web/methods/submit-login.method.block.ts CHANGED
@@ -81,14 +81,14 @@ export const SubmitLoginActionBlock = defineMethodBlock<LoginPage, LoginSubmitOu
81
81
  ctx.banner("Inventory");
82
82
  ctx.todos(["Enter username", "Enter password", "Click Login"]);
83
83
  ctx.todoIndex(2);
84
- // Fleece sits lower - demo smooth-scrolls + Screen Studio zooms to it.
85
- ctx.ring("fleece", {
86
- selector: '[data-test="add-to-cart-sauce-labs-fleece-jacket"]',
87
- label: "Fleece jacket",
88
- detail: "Smooth scroll + camera zoom",
84
+ // Landed on inventory - hand off to shopFlow for product -> cart zoom.
85
+ ctx.ring("shelf", {
86
+ selector: ".inventory_list",
87
+ label: "Product shelf",
88
+ detail: "Ready to shop",
89
89
  focus: true,
90
- color: "#86efac",
91
- zoom: 1.45,
90
+ color: "#c9a6ff",
91
+ zoom: 1.25,
92
92
  duration: true,
93
93
  });
94
94
  },