Prompt: ECommerce Product Page With Image Zoom and Reviews (FPC004)
Model: Groq-Llama3.3-70b | Date: 05/17/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: 05/17/2025 11:46:10
Desktop Screenshot:
Mobile Screenshot:
Scores for this Prompt
Technical Quality
136.3 / 190.0
(71.74%)
Prompt Adherence
20.0 / 25.0
(80.00%)
Overall Weighted
78.35 %
Technical Quality Breakdown
HTML Structure & Semantics (8.0 / 10.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| HTML Lang | PASS |
PASS
|
1.0 / 1.0 | desktop |
| Page Title | PASS |
PASS
|
1.0 / 1.0 | desktop |
| Main Tag | PASS |
PASS
|
1.0 / 1.0 | desktop |
| Nav Tag | WARN |
No visible <nav>.
|
0.0 / 1.0 | desktop |
| Footer Tag | WARN |
No visible <footer>.
|
0.0 / 1.0 | desktop |
| H1 Count | PASS |
PASS
|
1.0 / 1.0 | desktop |
| Heading Order Logic | PASS |
PASS
|
1.0 / 1.0 | desktop |
| Image Alts | PASS |
PASS
|
1.0 / 1.0 | desktop |
| Form Labels | PASS |
PASS
{
"unlabeled_count": 0
}
|
2.0 / 2.0 | desktop |
CSS Quality (2.0 / 5.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| CSS Variables | WARN |
No :root CSS variables.
|
0.0 / 2.0 | desktop |
| Modern Layout Body/Main | INFO |
Flex/Grid not on body/main.
|
0.0 / 1.0 | desktop |
| Inline Styles | PASS |
Minimal inline styles.
|
1.0 / 1.0 | desktop |
| !important Usage | PASS |
No !important in <style> tags.
|
1.0 / 1.0 | desktop |
JavaScript Health (0.0 / 5.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| JS Console Errors | FAIL |
3 JS error(s).
[ "JS ERROR: https://via.placeholder.com/400x400 - Failed to load resource: net::ERR_NAME_NOT_RESOLVED", "JS ERROR: https://via.placeholder.com/100x100 - Failed to load resource: net::ERR_NAME_NOT_RESOLVED", "JS ERROR: https://via.placeholder.com/100x100 - Failed to load resource: net::ERR_NAME_NOT_RESOLVED" ] |
0.0 / 5.0 | desktop |
Accessibility (Axe-core) (10.0 / 40.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Axe Violations | FAIL |
2 Axe violations (Crit:1,Ser:1,Mod:0,Min:0). Report: axe_report_FPC004_ECommerce_Product_Page_With_Image_Zoom_and_Reviews_desktop.json
[
{
"help": "ARIA attributes must conform to valid values",
"id": "aria-valid-attr-value",
"impact": "critical"
},
{
"help": "Elements must have sufficient color contrast",
"id": "color-contrast",
"impact": "serious"
}
]
|
5.0 / 20.0 | desktop |
| Axe Violations | FAIL |
2 Axe violations (Crit:1,Ser:1,Mod:0,Min:0). Report: axe_report_FPC004_ECommerce_Product_Page_With_Image_Zoom_and_Reviews_mobile.json
[
{
"help": "ARIA attributes must conform to valid values",
"id": "aria-valid-attr-value",
"impact": "critical"
},
{
"help": "Elements must have sufficient color contrast",
"id": "color-contrast",
"impact": "serious"
}
]
|
5.0 / 20.0 | mobile |
Rendered Color & Contrast (25.0 / 30.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Contrast Failure (AA) | FAIL |
AA FAIL 2.80 for 'Add to Cart' in <button id='add-to-cart' data-testid='add-to-cart-button' class='bg-orange-500 hover:bg-orange-...'>
{
"bg_eff": "rgb(249, 115, 22)",
"fg": "rgb(255, 255, 255)",
"ratio": 2.8030548103399218,
"text": "Add to Cart"
}
|
0.0 / 0.0 | desktop |
| Contrast Check Result | FAIL |
1 WCAG AA failures on 12 instances.
|
12.5 / 15.0 | desktop |
| Contrast Failure (AA) | FAIL |
AA FAIL 2.80 for 'Add to Cart' in <button id='add-to-cart' data-testid='add-to-cart-button' class='bg-orange-500 hover:bg-orange-...'>
{
"bg_eff": "rgb(249, 115, 22)",
"fg": "rgb(255, 255, 255)",
"ratio": 2.8030548103399218,
"text": "Add to Cart"
}
|
0.0 / 0.0 | mobile |
| Contrast Check Result | FAIL |
1 WCAG AA failures on 12 instances.
|
12.5 / 15.0 | mobile |
Responsiveness (Viewport & Scroll) (16.0 / 20.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Viewport Meta Tag | PASS |
Configured correctly for responsiveness.
|
4.0 / 4.0 | desktop |
| Horizontal Scrollbar | PASS |
No horizontal scrollbar detected.
|
6.0 / 6.0 | desktop |
| Viewport Meta Tag | INFO |
Already scored for this prompt.
|
0.0 / 0.0 | mobile |
| Horizontal Scrollbar | PASS |
No horizontal scrollbar detected.
|
6.0 / 6.0 | mobile |
Performance (Lighthouse) (37.4 / 40.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Lighthouse Score | PASS |
96/100
|
19.2 / 20.0 | desktop |
| Lighthouse Score | PASS |
91/100
|
18.2 / 20.0 | mobile |
Accessibility (Lighthouse) (19.2 / 20.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Lighthouse Score | PASS |
96/100
|
9.6 / 10.0 | desktop |
| Lighthouse Score | PASS |
96/100
|
9.6 / 10.0 | mobile |
Best Practices (Lighthouse) (9.6 / 10.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Lighthouse Score | PASS |
96/100
|
4.8 / 5.0 | desktop |
| Lighthouse Score | PASS |
96/100
|
4.8 / 5.0 | mobile |
SEO (Lighthouse) (9.1 / 10.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Lighthouse Score | PASS |
91/100
|
4.5 / 5.0 | desktop |
| Lighthouse Score | PASS |
91/100
|
4.5 / 5.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 | desktop |
| Thumbnail Images (min 2) | PASS |
Count is 3 (Actual: 3, Expected: >= 2).
|
2.0 / 2.0 | desktop |
| 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 | desktop |
| 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 | desktop |
| 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 | desktop |
| Tab Buttons (min 3) | PASS |
Count is 3 (Actual: 3, Expected: >= 3).
|
1.0 / 1.0 | desktop |
| Thumbnail Click Updates Main Image | PASS |
All interaction steps/outcomes verified.
|
4.0 / 4.0 | desktop |
| Image Zoom on Hover | PASS |
All interaction steps/outcomes verified.
|
4.0 / 4.0 | desktop |
| Tab Switching (e.g., to Specifications) | PASS |
All interaction steps/outcomes verified.
|
4.0 / 4.0 | desktop |
| Tablist Keyboard Nav (Arrow Key Focus) | FAIL |
Custom script evaluation result: False (expected true).
Script Eval: False
|
0.0 / 3.0 | desktop |
| Main Product Image | PASS |
(Points already awarded) Element 'img[data-testid='main-product-image']' present and visible.
Selector:
img[data-testid='main-product-image'] |
0.0 / 2.0 | mobile |
| Thumbnail Images (min 2) | PASS |
(Points already awarded) Count is 3 (Actual: 3, 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 |
(Points already awarded) Element 'button[data-testid='add-to-cart-button']' present and visible.
Selector:
button[data-testid='add-to-cart-button'] |
0.0 / 1.0 | mobile |
| Product Tabs Container | PASS |
(Points already awarded) Element '[role='tablist'][data-testid='product-tabs']' present and visible.
Selector:
[role='tablist'][data-testid='product-tabs'] |
0.0 / 2.0 | mobile |
| Tab Buttons (min 3) | PASS |
(Points already awarded) Count is 3 (Actual: 3, Expected: >= 3).
|
0.0 / 1.0 | mobile |
| Thumbnail Click Updates Main Image | PASS |
(Points already awarded) All interaction steps/outcomes verified.
|
0.0 / 4.0 | mobile |
| Tab Switching (e.g., to Specifications) | PASS |
(Points already awarded) All interaction steps/outcomes verified.
|
0.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 |