Time to build. These exercises go from basic to advanced. Do them in order. Each one builds on what you learned. Do not skip the error handling ones -- that is where the real value is.
Go to the Shopping Portal. Mock the products API to return exactly 3 products with specific names. Verify all 3 product cards appear on the page with the correct names and prices.
Mock the products API to return an empty array. Verify the empty state message appears. Then mock the search API to return no results for the query "xyzabc" and verify the "no results" message.
Write tests for three error scenarios: (1) Mock a 500 error and verify the error message shows. (2) Use route.abort("connectionrefused") and verify the network error message. (3) Mock a 401 and verify the app redirects to login or shows "session expired."
Go to the Banking Portal transfer page. Fill in the transfer form and submit. Use waitForRequest to capture the POST request and verify the payload contains the correct from account, to account, and amount.
Use route.fetch() to get the real product list, then inject a product with a very long name (200+ characters). Verify the UI handles the overflow correctly and does not break the layout.
Write a test that monitors all API calls during a complete shopping flow (browse products, add to cart, view cart). Use page.on("response") to collect all responses. Assert that no response had a status >= 400. Print the total number of API calls made.
Mock the products API with a 3-second delay. Verify the loading spinner appears immediately after navigation. Then verify it disappears once the data loads and the products are visible.
Record a HAR file for the shopping flow. Then run the same test using the HAR file for playback. Compare execution time with and without the HAR. Commit the HAR file to your project.
Do not use the real backend for exercises 1-5. The whole point is to mock. If your test fails because the backend is down, you are not mocking correctly.
Key Point: Practice all patterns: basic mocking, empty states, errors, request verification, partial mocking, network monitoring, and loading states.