HSNAKDValidation Labhakdogan.com

E-Commerce

Add to cart

Adding a product updates the badge counter and opens the mini-cart drawer.

User story

As a shopper, I want to add a product to my cart and see immediate visual confirmation so I know it took effect.

Acceptance criteria

  • Cart badge increments by 1 per click
  • Mini-cart drawer opens with the product line
  • Product line shows the chosen quantity
  • Drawer can be dismissed via Escape

Manual test steps

  1. 1.Open /shop/sku-glass
  2. 2.Choose quantity 2
  3. 3.Click 'Add to cart'
  4. 4.Inspect the mini-cart drawer

Expected result

Cart badge reads 2 and drawer lists 'Glass desk lamp · 2'.

Possible bug risks

  • Double click fires two add-to-cart calls
  • Badge count drifts from the actual cart
  • Drawer open trap focus not released on Escape

Reference Playwright spec

add-to-cart.spec.ts
ts
1
2
3
4
5
6
7
8
9
10
import { test, expect } from '@playwright/test';

test('add to cart updates badge and drawer @smoke', async ({ page }) => {
  await page.goto('https://lab.hakdogan.com/shop/sku-glass');
  await page.getByLabel(/quantity/i).fill('2');
  await page.getByRole('button', { name: /add to cart/i }).click();

  await expect(page.getByTestId('cart-badge')).toHaveText('2');
  await expect(page.getByRole('dialog', { name: /your cart/i })).toBeVisible();
});