HSNAKDValidation Labhakdogan.com

E-Commerce

Checkout

Three-step checkout: shipping → payment → review with Place Order side effects.

User story

As a shopper, I want to complete checkout in three clear steps so I never feel lost about what comes next.

Acceptance criteria

  • Each step requires its mandatory fields
  • Stepper allows backward navigation but not forward skip
  • Place Order shows a spinner and disables the CTA
  • Success page displays an order ID matching /^VL-[A-Z0-9]{6}$/

Manual test steps

  1. 1.Open /checkout
  2. 2.Fill the address form, click Continue
  3. 3.Fill the test card 4242 4242 4242 4242
  4. 4.Click Place Order
  5. 5.Confirm /checkout/success page

Expected result

/checkout/success renders with an order ID and a 'Track shipment' link.

Possible bug risks

  • Place Order can be re-clicked, double-charging the card
  • Browser back button on success page re-runs the order
  • Address autofill bypasses validation on country code

Reference Playwright spec

checkout.spec.ts
ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { test, expect } from '@playwright/test';

test('checkout three step happy path @smoke', async ({ page }) => {
  await page.goto('https://lab.hakdogan.com/checkout');
  await page.getByLabel(/full name/i).fill('Hasan Akdogan');
  await page.getByLabel(/address/i).fill('1 Glass Lane');
  await page.getByRole('button', { name: /continue to payment/i }).click();

  await page.getByLabel(/card number/i).fill('4242 4242 4242 4242');
  await page.getByRole('button', { name: /review order/i }).click();

  await page.getByRole('button', { name: /place order/i }).click();
  await expect(page).toHaveURL(/\/checkout\/success$/);
  await expect(page.getByText(/^VL-[A-Z0-9]{6}$/)).toBeVisible();
});