Prompt: ECommerce Product Page With Image Zoom and Reviews (FPC004)
Model: Groq-DeepSeek-70b | Date: 07/16/2025 | Page Title: High-Performance Laptop
Prompt Description
Develop a detailed product page for an e-commerce site (e.g., for a 'High-Performance Laptop').
**Page Structure & Features:**
1. **Product Gallery:**
* Main product image (identifiable as `data-testid='main-product-image'`).
* Several thumbnail images below it. Clicking a thumbnail updates the main product image.
* **Image Zoom:** Hovering over the main product image should display a magnified version of that portion of the image, typically in an adjacent container or as an overlay (identifiable as `data-testid='image-zoom-view'`).
2. **Product Information:**
* Product Name (H1).
* Short Description.
* Price (identifiable as `data-testid='product-price'`).
* Variant Selection (e.g., Color, Storage Size - use `<select>` dropdowns or radio button groups). Changes here might update the price or image (optional complexity, but good to handle basic selection).
* Quantity Selector (input type number, identifiable as `data-testid='quantity-input'`).
* 'Add to Cart' button (identifiable as `data-testid='add-to-cart-button'`).
3. **Product Details Tabs:**
* An accessible tabbed interface (`role='tablist'`) with sections for 'Full Description', 'Specifications', and 'Customer Reviews'. Each tab and panel should follow ARIA best practices. The tab list should be `data-testid='product-tabs'`. Tab panels should be `data-testid='tab-panel-description'`, etc.
4. **Customer Reviews Tab Content:**
* Display a few sample reviews (reviewer name, rating as stars, review text).
* A form to submit a new review (similar to FPC002 but integrated here).
**Technical & Accessibility Requirements:**
* Semantic HTML for the entire page. Logical heading structure.
* Responsive design. The image gallery, zoom feature, and tabs must work well on mobile.
* **Image Zoom Accessibility:** Ensure the zoom feature is usable with a keyboard if possible, or can be easily bypassed. Magnified content should be announced if it appears off-screen or significantly changes context.
* **Tab Interface Accessibility:** Must be fully keyboard navigable (arrow keys for tabs, Tab to panel content) and use correct ARIA attributes (`aria-selected`, `aria-controls`, etc.).
* All interactive elements must be accessible.
* Styling: Tailwind CSS primarily. Custom CSS/JS will be essential for the image zoom, thumbnail gallery logic, and potentially the tab interface if advanced styling/animation is desired.
**Testing Identifiers:**
* Main Product Image: `data-testid='main-product-image'`
* Image Zoom View Area: `data-testid='image-zoom-view'`
* A Thumbnail Image (example): `data-testid='thumbnail-1'`
* Product Price Display: `data-testid='product-price'`
* Quantity Input: `data-testid='quantity-input'`
* Add to Cart Button: `data-testid='add-to-cart-button'`
* Product Tabs Container: `data-testid='product-tabs'`
* Description Tab Panel: `data-testid='tab-panel-description'`
Key Links & Info
Analysis Timestamp: 07/16/2025 17:46:04
Mobile Screenshot:
Scores for this Prompt
Technical Quality
33.0 / 110.0
(30.00%)
Prompt Adherence
14.0 / 25.0
(56.00%)
Overall Weighted
48.20 %
Technical Quality Breakdown
Page Load Errors (0.0 / 0.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Page Completeness | FAIL |
Page timed out loading at desktop.
|
0.0 / 0.0 | desktop |
HTML Structure & Semantics (6.0 / 10.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| HTML Lang | PASS |
PASS
|
1.0 / 1.0 | mobile |
| Page Title | PASS |
PASS
|
1.0 / 1.0 | mobile |
| Main Tag | PASS |
PASS
|
1.0 / 1.0 | mobile |
| Nav Tag | WARN |
No visible <nav>.
|
0.0 / 1.0 | mobile |
| Footer Tag | WARN |
No visible <footer>.
|
0.0 / 1.0 | mobile |
| H1 Count | PASS |
PASS
|
1.0 / 1.0 | mobile |
| Heading Order Logic | PASS |
PASS
|
1.0 / 1.0 | mobile |
| Image Alts | PASS |
PASS
|
1.0 / 1.0 | mobile |
| Form Labels | FAIL |
2 inputs unlabeled.
{
"unlabeled_count": 2
}
|
0.0 / 2.0 | mobile |
CSS Quality (2.0 / 5.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| CSS Variables | WARN |
No :root CSS variables.
|
0.0 / 2.0 | mobile |
| Modern Layout Body/Main | INFO |
Flex/Grid not on body/main.
|
0.0 / 1.0 | mobile |
| Inline Styles | PASS |
Minimal inline styles.
|
1.0 / 1.0 | mobile |
| !important Usage | PASS |
No !important in <style> tags.
|
1.0 / 1.0 | mobile |
JavaScript Health (0.0 / 5.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| JS Console Errors | FAIL |
4 JS error(s).
[ "JS ERROR: https://via.placeholder.com/600x400 - Failed to load resource: net::ERR_NAME_NOT_RESOLVED", "JS ERROR: https://via.placeholder.com/100 - Failed to load resource: net::ERR_NAME_NOT_RESOLVED", "JS ERROR: https://via.placeholder.com/100 - Failed to load resource: net::ERR_NAME_NOT_RESOLVED", "JS ERROR: https://via.placeholder.com/600x400 - Failed to load resource: net::ERR_NAME_NOT_RESOLVED" ] |
0.0 / 5.0 | mobile |
Accessibility (Axe-core) (0.0 / 40.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Axe Violations | FAIL |
2 Axe violations (Crit:2,Ser:0,Mod:0,Min:0). Report: axe_report_FPC004_ECommerce_Product_Page_With_Image_Zoom_and_Reviews_mobile.json
[
{
"help": "Form elements must have labels",
"id": "label",
"impact": "critical"
},
{
"help": "Radio inputs with the same name attribute value must be part of a group",
"id": "radiogroup",
"impact": "critical"
}
]
|
0.0 / 20.0 | mobile |
Rendered Color & Contrast (15.0 / 30.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 5.17 for 'Add to Cart' in <button id='add-to-cart-button' data-testid='add-to-cart-button' class='w-full bg-blue-600 text-white ...'>
{
"ratio": 5.168555560022562
}
|
0.0 / 0.0 | mobile |
| Contrast Check Result | PASS |
All 14 instances meet WCAG AA. (1 only AA, not AAA).
|
15.0 / 15.0 | mobile |
Responsiveness (Viewport & Scroll) (10.0 / 20.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Viewport Meta Tag | PASS |
Configured correctly for responsiveness.
|
4.0 / 4.0 | mobile |
| Horizontal Scrollbar | PASS |
No horizontal scrollbar detected.
|
6.0 / 6.0 | mobile |
Prompt Adherence Breakdown
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Main Product Image | PASS |
Element 'img[data-testid='main-product-image']' present and visible.
Selector:
img[data-testid='main-product-image'] |
2.0 / 2.0 | mobile |
| Thumbnail Images (min 2) | FAIL |
Count is 1 (Actual: 1, Expected: >= 2).
|
0.0 / 2.0 | mobile |
| Image Zoom View Area | FAIL |
Element '[data-testid='image-zoom-view']' present but NOT visible.
Selector:
[data-testid='image-zoom-view'] |
0.0 / 2.0 | mobile |
| Add to Cart Button | PASS |
Element 'button[data-testid='add-to-cart-button']' present and visible.
Selector:
button[data-testid='add-to-cart-button'] |
1.0 / 1.0 | mobile |
| Product Tabs Container | PASS |
Element '[role='tablist'][data-testid='product-tabs']' present and visible.
Selector:
[role='tablist'][data-testid='product-tabs'] |
2.0 / 2.0 | mobile |
| Tab Buttons (min 3) | PASS |
Count is 3 (Actual: 3, Expected: >= 3).
|
1.0 / 1.0 | mobile |
| Thumbnail Click Updates Main Image | PASS |
All interaction steps/outcomes verified.
|
4.0 / 4.0 | mobile |
| Tab Switching (e.g., to Specifications) | PASS |
All interaction steps/outcomes verified.
|
4.0 / 4.0 | mobile |
| Tablist Keyboard Nav (Arrow Key Focus) | FAIL |
Custom script evaluation result: False (expected true).
Script Eval: False
|
0.0 / 3.0 | mobile |