Testing the messy real world

Combine everything you learned into one end-to-end purchase using the local /checkout.

Every lesson so far focused on a single technique. You've learned about locators, web-first assertions, network handlers, and page events. Now you'll put them all together in the local checkout at /checkout, a flow a real user would walk through: log in, add a product, fill out the form, hit Place order, and land on a receipt.

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

Put it all together and bring it home!

There are six steps:

  1. Log in.
  2. Add a product to the cart.
  3. Navigate to /checkout.
  4. Fill out 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 complete the checkout!

Catch the order number from the network response

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 that the order number is rendered correctly and that you end up on the confirmation page!

Hands on

Build the final end-to-end purchase

Exercise 1 of 1

Complete an order and assert it's correct

The final test is one spec file with one happy path that uses 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 out the form (any valid email, the test card data, standard shipping, card payment).
  4. Read the /checkout request and discover 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 that the page shows the right order.

Stretch goals:

  • Create variations for this checkout test (an applied promo code, a different shipping method, etc.).