Test that a checkout extension renders without breaking payment

The checks that matter

An extension test that stops at "the block appeared" is not testing the thing that costs money. The sequence below adds one assertion for each way an extension touches the order.

• It renders - the Order details card and its version badge are present, so you know which build of the extension is live.
• Its input is captured - text typed into the custom field stays in the field.
• Its upsell reaches the summary - gift wrapping appears as a real line item at $4.50, not just as a ticked box.
• Payment still completes - the card goes through and the confirmation page carries the custom field value forward.

That last assertion is the one worth stealing. Checking that "Leave at the side door" appears on the thank-you page proves the extension data survived order creation, which is a different thing from the field accepting text.

The same flow as a test file

The version badge is asserted by name, Alder Add-ons v1.4, so an extension update that changes behaviour is visible in the test output rather than inferred from a deploy log.

---
mode: testing
url: https://my-testing-repo-main.vercel.app/shopify-clone-app?reset=true
max_steps: 45
tags: [shopify, e-commerce, extension]
---

# Shoplify 2.3: Checkout extension render

Catalog objective: proceed through checkout and confirm custom fields and the upsell block appear.
Key assertion: the extension renders without breaking the payment step.

## Reach the checkout
Click "Add to cart" on "Enamel Camp Mug", click "View cart", click "Checkout", and verify the checkout page is shown with a "Payment" section.

## Confirm the extension block rendered
Verify an "Order details" card is shown containing the badge "Checkout extension · Alder Add-ons v1.4" and a custom field labelled "Delivery instructions".

## Use the custom field
Type "Leave at the side door" into "Delivery instructions" and verify the field contains "Leave at the side door".

## Take the upsell
Click the "Add gift wrapping - $4.50" checkbox and verify the order summary now lists "Gift wrapping × 1" at "$4.50".

## Confirm payment still works after the extension
Type "4242 4242 4242 4242" into "Card number", "12 / 34" into Expiration, "123" into CVC, click the Pay button, and verify the page shows "Thank you for your order!" with a "Delivery instructions" card reading "Leave at the side door".

Reproduce the run with:

kane-cli testmd run tests/shopify/checkout-extension_test.md

Run output

Five passes. The two payment-adjacent steps dominate the run: reaching checkout at 59 seconds and paying at 67.1 seconds, with the three extension checks costing well under a minute between the first two.

---
test: ../checkout-extension_test.md
status: passed
started: 2026-09-15T09:25:01.674Z
duration_s: 226
session_id: 97cf2ed1-e295-46f7-988b-48f0c5fce967
---

# Shoplify 2.3: Checkout extension render - Result

## Reach the checkout ✓ passed (59s)
md5: 173b996f9f8087d0b318ca20bb41017b
Click "Add to cart" on "Enamel Camp Mug", click "View cart", click "Checkout", and verify the checkout page is shown with a "Payment" section.

## Confirm the extension block rendered ✓ passed (27.9s)
md5: 335829725ac5d7ebfbaea868d2bddf28
Verify an "Order details" card is shown containing the badge "Checkout extension · Alder Add-ons v1.4" and a custom field labelled "Delivery instructions".

## Use the custom field ✓ passed (29.1s)
md5: 00de7f28433f1621ff3b424a62ef8f6f
Type "Leave at the side door" into "Delivery instructions" and verify the field contains "Leave at the side door".

## Take the upsell ✓ passed (40s)
md5: a0fed085d77632045c793ed23d182f56
Click the "Add gift wrapping - $4.50" checkbox and verify the order summary now lists "Gift wrapping × 1" at "$4.50".

## Confirm payment still works after the extension ✓ passed (67.1s)
md5: 234fbb0af5ca9529bcfad80b28c72331
Type "4242 4242 4242 4242" into "Card number", "12 / 34" into Expiration, "123" into CVC, click the Pay button, and verify the page shows "Thank you for your order!" with a "Delivery instructions" card reading "Leave at the side door".

The cheap steps are the assertions against a page that is already loaded. That is the shape to aim for when structuring a flow: pay the navigation cost once and check several things against the same page state.

Taking it further

What you end up with is a regression test you can run against every extension update, including ones you did not schedule. It answers the question a merchant actually asks after an app updates itself, which is whether checkout still takes money.

This is the flow worth running before a pull request rather than after. The pre-PR UI check shows that workflow, and the open evidence format covers what the run writes out for attaching to a review.