Skip to content

Instantly share code, notes, and snippets.

@amElnagdy

amElnagdy/prompt.md

Created August 31, 2025 12:32
Show Gist options
  • Save amElnagdy/9942e9705f8188f29f63524e3c349860 to your computer and use it in GitHub Desktop.
Save amElnagdy/9942e9705f8188f29f63524e3c349860 to your computer and use it in GitHub Desktop.
Download ZIP
Visual QA Assistance
Raw
prompt.md

I need you to perform a comprehensive visual and functional quality assurance check of this website using Playwright MCP tools. URL: INSERT_URL

🚨 CRITICAL RULE: ALL TESTING MUST BE DONE ON THE PROVIDED URL ONLY 🚨

Navigation Protocol:

  • If any click navigates you to a different page/URL, immediately navigate BACK to the provided URL
  • Continue all testing from the original URL
  • Do NOT test functionality on external pages - only test that links work from the main page
  • Your goal is to test the provided URL thoroughly, not to explore the entire website

Your Role

Act as a professional visual QA specialist conducting a pixel-perfect review of a high-stakes website where visual perfection and functionality are critical. Assume this website will be used by non-technical users who expect everything to work flawlessly.

Core QA Methodology

1. Systematic Testing Principle

You must test EVERY interactive element by actually clicking it, not just hovering. For each element, ask:

  • "Does this element work exactly as a user would expect?"
  • "Does this element LOOK complete and professional?"
  • "Are there any visual gaps, missing icons, or empty spaces?"
  • "Would a non-technical user be confused by how this appears or behaves?"

2. Visual Completeness Detection

Apply the "Missing Element Test" to every section:

  • Look for empty spaces where content/icons should appear
  • Identify elements with placeholder or incomplete styling
  • Check for text like "View [something]" and verify visual indicators (play icons, arrows) are present
  • Examine button/link areas for missing visual elements
  • Screenshot any element that looks "unfinished" even if it technically functions

3. Interaction Testing Protocol

For EVERY interactive element you find:

Step A: Identify and Inventory

  • Create a mental list of all clickable elements (buttons, links, form controls, media players)

Step B: Test Each Element

  • Take a screenshot of the element in normal state
  • Attempt to CLICK it (not just hover)
  • If click fails: Document exactly what error occurs (timeout, blocked, etc.)
  • If click succeeds: Verify the expected outcome actually happens
  • IMPORTANT: If click navigates away from the provided URL, immediately go back to continue testing
  • Take a screenshot of the result (success or failure state)

Step C: Visual Completeness Check

  • Does the element have all expected visual components (icons, text, styling)?
  • Compare it to similar elements elsewhere on the page - are they consistent?
  • Does it meet the visual quality standards of professional websites?

4. Cross-Device Validation

Test these viewports and apply ALL above tests at each size:

  • Desktop: 1920x1080
  • Tablet: 768x1024
  • Mobile: 375x812

Mandatory Testing Checklist

Primary User Actions (Test ALL of these):

  • Search functionality: Type text AND click submit button (test both Enter key and button click)
  • All buttons: Click each one and verify expected response occurs
  • All links: Click and verify they work, then immediately return to the provided URL
  • Form submissions: Fill out and submit using button clicks, not just keyboard
  • Media players: Click play buttons and verify media actually starts
  • Navigation menus: Test all dropdown/mobile menu functionality
  • Language/settings controls: Test all switchers and controls

⚠️ REMINDER: After any interaction that changes the page, navigate back to the provided URL to continue testing

Visual Element Verification:

  • Icons and graphics: Verify all icons display properly (no empty icon fonts)
  • Images: Check all images load completely
  • Typography: Ensure consistent font rendering
  • Buttons: Verify all buttons have proper styling and hover states
  • Spacing: Check for proper layout and no overlapping elements

Error Detection Requirements:

Document ALL of these scenarios when they occur:

  • Elements that timeout when clicked
  • Buttons that appear clickable but produce no response
  • Visual elements that appear to be missing (empty icon areas, broken images)
  • JavaScript console errors that appear during testing
  • Network requests that fail (check for 4xx, 5xx status codes)
  • Elements that overlap incorrectly or block other elements
  • Inconsistent styling between similar elements

Professional Standards Compliance

Visual Quality Checklist:

  • ✅ All interactive elements provide clear visual feedback
  • ✅ No missing icons, broken images, or empty placeholders
  • ✅ Consistent styling across similar elements
  • ✅ Professional appearance matching industry standards
  • ✅ No visual gaps or incomplete-looking areas
  • ✅ All text has appropriate contrast and readability

Functional Quality Checklist:

  • ✅ Every clickable element responds to clicks appropriately
  • ✅ All links navigate to correct destinations
  • ✅ All form controls accept input and submit properly
  • ✅ All media controls start/stop content as expected
  • ✅ No JavaScript errors disrupting user experience
  • ✅ All features work across tested viewport sizes

Issue Classification System

🔴 Critical Issues (Site Not Ready):

  • Any primary user action that fails completely
  • Missing core functionality (broken search, navigation, etc.)
  • Major visual gaps that make the site look unprofessional

🟡 High Priority Issues (Fix Recommended):

  • Minor functionality problems with workarounds
  • Visual inconsistencies affecting professional appearance
  • Elements that work but look incomplete or confusing

🟢 Medium Priority Issues (Monitor):

  • Cosmetic improvements that don't affect core functionality
  • Minor styling inconsistencies
  • Performance optimizations

⚪ Low Priority Issues (Optional):

  • Very minor cosmetic tweaks
  • Browser-specific rendering differences that don't impact usability

Required Documentation

For Each Issue Found:

  1. Location: Exact element and page section
  2. Issue Type: Visual or functional problem
  3. Current Behavior: What actually happens
  4. Expected Behavior: What should happen
  5. User Impact: How this affects the user experience
  6. Screenshots: Before/during/after interaction states
  7. Severity Level: Using the classification system above

Screenshots Required:

  • Full page at each tested viewport size
  • Each interactive element in normal state
  • Each interactive element during interaction (hover/click)
  • Each interactive element after interaction (success or failure)
  • Any visually incomplete or problematic areas
  • Comparison screenshots showing inconsistencies

Final Assessment Framework

Pass Criteria (Ready for Publication):

  • All critical functionality works via click interactions
  • All visual elements appear complete and professional
  • No missing icons, broken images, or visual gaps
  • Consistent user experience across all tested viewports
  • No blocking errors or failed user interactions

Fail Criteria (Needs Fixes):

  • Any primary user action fails when clicked
  • Significant visual elements missing or broken
  • Inconsistent or unprofessional appearance
  • Console errors affecting functionality
  • Poor user experience on any tested viewport

Deliverables

  1. Executive Summary: Overall status with confidence level and go/no-go recommendation
  2. Cross-Device Results: Detailed findings for each viewport tested
  3. Interactive Element Report: Results of clicking every interactive element
  4. Visual Completeness Assessment: Documentation of any missing or broken visual elements
  5. Issue Inventory: Complete list of all problems found, classified by severity
  6. Professional Recommendation: Clear guidance on publication readiness
  7. Screenshot Evidence: Visual documentation of all findings

Quality Standard

The website must appear completely polished and professional with every interactive element working perfectly. Any element that would confuse a non-technical user or appears visually incomplete should be flagged. The standard is: "Would I be comfortable showing this website to a client or CEO as a finished, professional product?"

🎯 KEY REMINDERS:

  1. STAY ON THE PROVIDED URL - If any click takes you away, navigate back immediately
  2. Click everything - Test every interactive element thoroughly
  3. Document everything - Screenshot and record all findings
  4. Assume perfection is expected - Flag anything that looks incomplete or unprofessional
  5. Test from a user's perspective - Consider how a non-technical visitor would react
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment