Skip to main content

WEB-003: View Product Detail

FieldValue
Story IDWEB-003
TitleView Product Detail
PriorityHigh
ComponentWeb Frontend
Labelsproduct-detail, browsing, pdp

User Story​

As a shopper, I want to view a product's detail page, So that I can see full information before buying.

Acceptance Criteria​

AC-1: Product core information display​

Given a shopper navigates to a product detail page (/products/{id}) When the page finishes loading Then the following product information is displayed:

  • Product image
  • Product name
  • Category badge (label or tag showing the product category)
  • Star rating (visual representation)
  • Review count (numeric)
  • Price
  • Product description text

AC-2: Star rating accuracy​

Given a product with a rating of 4.8 stars and 214 reviews When the product detail page loads Then the rating display shows 4.8 stars (or equivalent visual) And the review count text shows "214 reviews" or "(214)"

AC-3: Add to Cart button​

Given the product detail page has loaded When the shopper views the action area Then an "Add to Cart" button is displayed And the button contains data attributes identifying the product (e.g., data-product-id) And clicking the button sends a POST request to add the product to the cart

Given the product detail page has loaded When the shopper views the action area Then a "Buy Now" link/button is displayed And clicking it navigates to the checkout page (/checkout)

AC-5: Related products - You might also like​

Given the product detail page has loaded When the shopper scrolls to the "You might also like" section Then up to 4 related products are displayed And products from the same category are prioritized first And each related product card links to its own detail page

Given the product detail page has loaded When the shopper scrolls to the "Trending in the studio" section Then additional product recommendations are displayed And each product card shows name, price, and image

AC-7: Product highlights section​

Given the product detail page has loaded When the shopper scrolls to the product highlights section Then the following highlight items are visible:

  • Warranty information
  • Compatibility details
  • Impact/sustainability information

AC-8: Navigation back to catalogue​

Given the shopper is on a product detail page When the shopper clicks the browser back button or a navigation link Then the shopper can return to the products catalogue page

AC-9: Invalid product ID handling​

Given a visitor navigates to /products/{invalid_id} where the ID does not exist When the page attempts to load Then an appropriate error state or 404-like message is displayed And the visitor is not shown a broken or empty product detail page

Test Data​

Primary Test Product​

AttributeValue
Product ID1
NameAurora Neural Headphones
Price$249.99
CategoryAudio
Rating4.8 stars
Review Count214
URL/products/1
ScenarioExpected Behavior
Product has same-category siblingsSame-category products shown first
Product is only one in its categoryProducts from other categories fill slots
Total related productsUp to 4 maximum

Edge Cases​

ScenarioProduct IDExpected
First product1Normal display
Last product12Normal display
Non-existent product9999Error/404 state
String ID"abc"Error/404 state

Notes​

  • The category badge should be styled distinctly (e.g., colored tag or pill element).
  • Star rating can be implemented with filled/empty star icons or a visual bar; test should verify the numeric value is present.
  • Data attributes on the Add to Cart button (e.g., data-product-id="1") are critical for automation selectors.
  • The "Buy Now" link going to /checkout may pre-populate the cart or assume the product is already in the cart; clarify expected behavior.
  • "You might also like" prioritizes same-category products; if fewer than 4 same-category products exist, fill remaining slots with other products.
  • Product highlights (warranty, compatibility, impact) may have default/generic text if not product-specific.
  • Test image loading and alt text for accessibility compliance.