1 / 3
Playwright

Mock a payment failure

Hard130 pts~50 min
  • Network mocking
  • Error handling
Practice app · Gear Shop

A product grid loaded from a real API with search, filters, infinite scroll and a checkout that calls a payments API.

Test URL
/lab/mock-payment-failure

Your starter code already declares TEST_URL — never hardcode a host.

Objective

Intercept the payments API, force a 402 decline and verify the UI fails gracefully.

Your task

  1. 1Before checkout, route POST **/api/practice/payments and fulfil it with status 402 and { "status": "declined", "reason": "insufficient_funds" }.
  2. 2Add any product to the cart (.add-button) and click #checkout.
  3. 3Assert #payment-status reads "Payment declined: insufficient_funds" and #error-banner mentions HTTP 402.
  4. 4Assert #checkout is enabled again so the user can retry.

Acceptance criteria

  • The UI shows the mocked decline
  • The error banner reports HTTP 402
  • Checkout can be retried
  • At least 3 assertions pass

Constraints

  • Mock the response — do not rely on the real decline rules (amount > 1000 or a card ending in 0002).

Playwright · Playwright · Featured challenges