Another key website flow that needs to be closely monitored is any sort of checkout. You want to be 100% sure your users are able to pay for goods or services you might be offering, at any given time.

​
Steps

Checkout procedures can vary dramatically depending on what is being bought or sold. A few constants will be:
  1. a shopping basket page / section, in cases where multiple items can be bought - this is normally where the checkout procedure starts
  2. a page to enter or edit billing and, where applicable, shipping information
  3. a summary to review all the different parameters of the purchase
Modelled on the above structure is the following example running against our test website. We will add a few products to the shopping cart, then proceed until the summary screen shows up and verify that the transaction has been confirmed. Here we can get creative and, for example, iterate through a number of products to fill the cart:
checkout.spec.ts
// Example code - see original file for details
Run this example as follows: 
PRODUCTS_NUMBER=3 npx playwright test checkout.spec.ts

SET PRODUCTS_NUMBER=3
npx playwright test checkout.spec.ts
Note: In some cases, users will need to log in before they can proceed to a purchase. When users are allowed to buy both with and without having a pre-existing account on the platform, it might be worthwhile to test both flows separately.

​
Limitations

Checkout is a peculiar flow: unlike Login and others, it almost always involves an actual exchange of currency. This is usually not an issue in pre-production environments, as payment providers are not yet involved or are set up in sandbox/test mode. For Production, low-value transactions can be performed with low frequency and immediately voided after the test has been completed.

​
Takeaways

  1. Checkout flows will vary depending on what is being purchased.
  2. Remember to check different flows (e.g. with and without login) if needed.
  3. Additional care is needed on production systems as real transactions will take place.