Testing the messy real world

Get used to test real world scenarios.

Okay, here's the end boss!

So far we've been testing this ecommerce site which mostly provides proper test ids and semantic DOM elements. This is not the real world though.

The checkout flow of this site is provided by Shopify and testing it is way harder. Give it a try!

Update a day before the workshop: after arriving in Athens and running 100s of tests I'm convinced that either Shopify is ratelimiting automated tests, or that there's a bug in the checkout. 😅

Try to test the order flow up to the point you see the big blue "Buy now" button.

But before you start, here are some tips.

Note

For shipping, use this address:

  • Email: stefanjudis@gmail.com (feel free to use mine 😉)
  • Name: Doe
  • Address: The Athens Concert Hall
  • Postal code: 115 21
  • City: Athens
Note

And for the credit card flow, these credentials will work:

  • Card Number: 1 (yes a single digit 🫣)
  • Expiration date: 11/23
  • Security code: 123
  • Name: Doe

The Playwright UI with the long end to end test.

Note

Review and tweak the generated selectors so that the tests won't break next week. 😅

Ways to work around flakiness

Especially, with JavaScript-heavy applications, end-to-end tests can become challenging.

DOM Elements might look active but are not yet (because of poor hydration). AJAX requests come resolve and overwrite already filled form fields.

To work around these situations, leverage toPass() to keep interacting with elements until your expected UI state appears.

// repeat clicking on the button and checking if it's gone
await expect(async () => {
  await expect(page.getByText("Calculating...")).not.toBeVisible();
  await page.getByRole("button", { name: "Review order" }).click();
  await page.waitForURL(/review/, { timeout: 10000 });
}).toPass();

The checkout flow can sometimes be a bit slow, so you also might want to increase the test timeout time.

test.setTimeout(90_000);
Exercise

Test the entire shopping flow.

  1. Create a new complete test case that covers the entire purchase flow.
  2. Add an item to a cart and fullfill the checkout.
  3. Finish the test with an assertion for the Thank you headline.
Todo
Solution

💡 If you're stuck, find a working example on GitHub.