πŸ§ͺ MB Specialist - Manual Test Suite

Test Summary

0
βœ… Passed
0
❌ Failed
⏭️ Skipped

πŸ“„ HTML & Structure

1.1 HTML Validation

  1. Open W3C Validator
  2. Upload MB1.0.html
  3. Check for errors/warnings
βœ… Expected: No critical errors, warnings acceptable

1.2 Semantic HTML

  1. Open DevTools (F12) β†’ Elements
  2. Verify proper use of <header>, <nav>, <main>, <section>, <footer>
βœ… Expected: All semantic tags present and properly nested

πŸ“± Responsiveness

2.1 Mobile 320px (iPhone SE)

  1. Open DevTools β†’ Device Toolbar (Ctrl+Shift+M)
  2. Set dimensions: 320px width
  3. Scroll through entire page
βœ… Expected: No horizontal scroll, all text readable, buttons accessible

2.2 Mobile 375px (iPhone 12/13)

  1. Set dimensions: 375px width
  2. Test navigation menu toggle
  3. Check all sections
βœ… Expected: Mobile menu works, grid becomes single column

2.3 Tablet 768px (iPad)

  1. Set dimensions: 768px width
  2. Check grid layouts (should be 2 columns)
βœ… Expected: Two-column grid, proper spacing

2.4 Desktop 1440px

  1. Set dimensions: 1440px width
  2. Verify full layout
βœ… Expected: Three-column grid where applicable, centered content

βš™οΈ Functionality

3.1 Navigation Links

  1. Click each navigation link
  2. Verify smooth scroll to section
  3. Test mobile menu open/close
βœ… Expected: Smooth scroll works, menu closes after click on mobile

3.2 Lightbox Gallery

  1. Click any image in gallery section
  2. Test keyboard navigation: ← β†’ arrows, ESC
  3. Test prev/next buttons
  4. Test close button
  5. Open and close 10+ times (memory leak test)
βœ… Expected: Lightbox opens, navigation works, ESC closes, TAB trapped, no memory leak

3.3 Form Validation

  1. Try submitting empty form
  2. Enter invalid email
  3. Fill all fields correctly
βœ… Expected: Browser validation shows errors, accepts valid input

3.4 Cookie Banner

  1. Open page in incognito mode
  2. Click "Prihvati sve"
  3. Refresh page β†’ banner should not appear
  4. Clear cookies, test "Samo neophodne"
βœ… Expected: Banner shows on first visit, remembers choice, hides after acceptance

3.5 Scroll to Top Button

  1. Scroll down page
  2. Button should appear after ~400px
  3. Click button
βœ… Expected: Button appears on scroll, smooth scroll to top on click

β™Ώ Accessibility

4.1 Keyboard Navigation

  1. Use TAB key to navigate through page
  2. Verify focus visible on all interactive elements
  3. Test ENTER/SPACE on buttons
βœ… Expected: All elements keyboard accessible, visible focus indicators

4.2 ARIA Labels

  1. Open DevTools β†’ Elements
  2. Search for aria-label and aria-labelledby
  3. Verify buttons and icons have proper labels
βœ… Expected: All icon buttons have aria-label, proper ARIA usage

4.3 Skip Link

  1. Refresh page
  2. Press TAB immediately (first focus)
  3. "Preskoči na glavni sadržaj" should appear
  4. Press ENTER
βœ… Expected: Skip link visible on focus, skips to main content

⚑ Performance

5.1 Lighthouse Desktop

  1. Open DevTools β†’ Lighthouse tab
  2. Device: Desktop
  3. Categories: All
  4. Click "Analyze page load"
βœ… Expected: Performance β‰₯85, Accessibility β‰₯90, Best Practices β‰₯95, SEO β‰₯95

5.2 Lighthouse Mobile

  1. Device: Mobile
  2. Run analysis
βœ… Expected: Performance β‰₯70, Accessibility β‰₯90, Best Practices β‰₯95, SEO β‰₯95

5.3 Console Errors

  1. Open DevTools β†’ Console tab
  2. Refresh page (Ctrl+Shift+R)
  3. Navigate through all sections
  4. Test all interactive features
βœ… Expected: No console errors, warnings acceptable

🌐 Cross-Browser Compatibility

6.1 Chrome/Edge

  1. Open site in Chrome or Edge
  2. Quick visual check of all sections
  3. Test one interactive feature (e.g., lightbox)
βœ… Expected: Everything renders correctly

6.2 Firefox

  1. Open site in Firefox
  2. Visual check + test lightbox
βœ… Expected: Everything renders correctly

πŸ”— Links & Resources

7.1 Internal Links

  1. Click "Pogledaj cijelu galeriju" β†’ should open gallery.html
  2. Click footer links (Privacy, Terms, Cookies)
  3. Click Portfolio link in footer
βœ… Expected: All links work, no 404 errors

7.2 External Links

  1. Click WhatsApp link
  2. Click email link (should open mail client)
  3. Click phone links (should prompt call on mobile)
βœ… Expected: All external links work, open in new tab where appropriate

7.3 Images Loading

  1. Open DevTools β†’ Network tab β†’ Filter: Img
  2. Hard refresh (Ctrl+Shift+R)
  3. Verify all images load (200 status)
  4. Check for missing images (404)
βœ… Expected: All images load successfully, no 404 errors