End-to-End (E2E) Testing Checkout Flow

Before going to the checkout flow, we need to ensure we can add an item to the basket. Here we should be very generic in picking the item since the content in our ecommerce may change, which could affect the test. Also, do not use hardcoded links to an item since the product may no longer exist, and thus the URL may be gone.

So let's select an item from the current page and navigate to it, where we can then add it to the basket. In our case, all product items with a link have a data-testid=”product-link,” which we can use to navigate to the item.

 // Navigate to the first product on the home page
 await page.getByTestId('product-link').first().click();


// Add the product to the cart and navigate to the cart
await page.getByTestId('add-to-cart-button');
await page.getByTestId('go-to-cart-button');

As you can see here, we select the first product from the list of products since we don’t know how many of them are on the current page. Once on the item page, we can use the “Add to cart” button to add the item to the basket and navigate to it.

In this step, we need to gather all the necessary information about the user. If looking at a test with an existing user, we need to check that user is logged in. If our test case is with a new user, we must fill in all the required fields. For this demo, I decided to go with the case where we must provide all the user information.

 // Fill in the form
await page.type('input[name=firstname]', customer.firstname);
await page.type('input[name=lastname]', customer.lastname);
await page.type('input[name=email]', customer.email);
...

This is the most complicated step because it often involves third parties handling the payment. If that is your case, check with the payment provider you are working with on how to handle test payments. For example, Stripe has excellent documentation on testing.

Here you may also need to fallback to listening for a specific payment request and mocking the result to continue your test. At the end of the day, it is the responsibility of the third party to ensure their API works when you send a specific payload. 

For our test case, we decided to ensure we could place an order against the Crystallize API, for which we chose to use the Crystal coin payment method. Clicking on the Next button and selecting the Crystal coin payment option is enough for this step.

// Navigate to next step - payment
await page.getByTestId('checkout-next-step-button').click();


// Select the Crystal coin payment method
await page.getByTestId('crystal-coin-payment-button').click();

Once the order is successfully handled on the API side, we receive a confirmation in the UI. In this step, we often need to confirm that by giving the user some visual clue that everything went as expected. These clues can be used to ensure a successful operation.

// Confirm the order is placed
await page.getByTestId('order-placed').waitFor({ state: 'visible' });


// Get the order id
const orderId = await page.getByTestId('guest-order-id').textContent();

In this step, we want to confirm that the order does exist in the API. The previous step gives us a good level of confidence about it, but it is also likely that the backend processed the order while the order never made it to the database.

Since there is no indication of when the order will be available in the API, we need to make a few requests until it is available. For that, a loop can be used where we wait a certain number of milliseconds before making a new request.

// Wait until the order appears in the API
while (retryCount < MAX_RETRY_COUNT) {
  retryCount += 1;
  // Wait 300 ms before making a new attempt to get the order
  await new Promise((r) => setTimeout(r, 300));


  // Fetch the order from the API
  const orderRes = await apiContext.post('/graphql', { data });
  expect(orderRes.ok()).toBeTruthy();
...

Once the request to get the order succeeds, we can extract the payment information and compare it with our local data to ensure the order is handled correctly.

This is one of the most important steps that often gets neglected. Here we want to remove all the data we created during the test, so we do not pollute the database. For that, we can use the `afterAll` method of the `test` property, which should run after all tests - even if they fail.

test.afterAll(async ({}) => {
   // Clean up order
   !!orderId && (await apiContext.post('/graphql', { data) }));
   // Dispose all responses
   await apiContext.dispose();
});