Skip to content
FSS Knowledge Base

Web Development Testing - AI Guidance

Section titled “Web Development Testing - AI Guidance”

Critical Rule: Test Visual Rendering, Not Just Structure

Section titled “Critical Rule: Test Visual Rendering, Not Just Structure”

Problem: HTML structure ≠ visual rendering
Solution: Always test computed styles + browser verification

Required Testing Steps

Section titled “Required Testing Steps”

1. Verify CSS Classes Exist

Section titled “1. Verify CSS Classes Exist”
Terminal window
grep "class-name" css/*.css

Never assume framework classes exist.

2. Test Computed Styles (REQUIRED)

Section titled “2. Test Computed Styles (REQUIRED)”
window.getComputedStyle(element).display

Structure tests alone are insufficient.

3. Browser Visual Verification (REQUIRED)

Section titled “3. Browser Visual Verification (REQUIRED)”
Terminal window
firefox file:///path/to/file.html > /dev/null 2>&1 &

Open and verify at target breakpoints.

For Responsive Design

Section titled “For Responsive Design”

Test at:

  • Desktop view (full screen)
  • Mobile view (<breakpoint)
  • Breakpoint boundary (±1px)

Add to implementation:

// Real-time visibility indicator
const visible = window.getComputedStyle(elem).display !== 'none';
console.log(`Element visible: ${visible}`);

Quality Gates

Section titled “Quality Gates”
  • CSS classes verified to exist
  • Computed styles tested
  • Browser visual verification complete
  • All interactions tested

Example: Hamburger Menu (20251103)

Section titled “Example: Hamburger Menu (20251103)”

Failed: Assumed md:hidden existed (it didn’t)
Fixed: Verified CSS, used custom @media queries
Lesson: Framework assumptions cause failures

Red Flag

Section titled “Red Flag”

If you claim to test without browser verification = STOP