Testing the messy real world

Stitch the workshop's patterns into one end-to-end purchase against the local /checkout.

Every lesson up to this one has isolated a single technique — a locator, a web-first assertion, a network handler, a page event. The local checkout at /checkout is where you put them all together against a flow a real user would walk through: log in, add a product, fill the form, hit Place order, land on a receipt.

There's no new API in this lesson. This is the final flow!

Finalize everything and drive things home!

Six steps, in order:

  1. Log in.
  2. Add a product to the cart.
  3. Navigate to /checkout.
  4. Fill the form.
  5. Place an order.
  6. Land on /checkout/confirmation.
Note

The checkout isn't picky and snowboards are cheap. Any 16-digit card (e.g. 4242 4242 4242 4242, expiry 12/26, CVC 123) will work. Use promo code WORKSHOP10 for 10% off, payment card or invoice (invoice skips the card fields), shipping standard or express. Just try to finalize the checkout!

Catch the order number off the wire

The order number is generated server-side and comes back in the JSON response from POST /api/checkout/:

{
  "ok": true,
  "orderNumber": "WS-LXFG2K1Z",
  "redirectTo": "/checkout/confirmation"
}

Check if the order number is rendered correctly and the we end up on a proper confirmation page!

Hands on

Build the final end-to-end purchase

Exercise 1 of 1

Drive a complete order and assert the order number off the API response

The capstone test. One spec file, one happy path, every pattern from the workshop.

  1. Use the storage state from your login setup project so the test starts authenticated.
  2. Visit /, add one product to the cart.
  3. Navigate to /checkout and fill the form (any valid email, the test card data, standard shipping, card payment).
  4. Read the /checkout request and dicover the order number.
  5. Read orderNumber from the response body and assert it starts with WS-.
  6. Wait for /checkout/confirmation to load, and check for correctness.

Stretch goals:

  • Create variations for this checkout test (applied voucher, different shipment, etc).