SPA Testing Examples

Compare how Single Page Applications behave with and without JavaScript enabled

JavaScript-Enabled SPA
Dynamic content updates without page reloads

This version uses client-side JavaScript to dynamically update content, providing a smooth single-page application experience.

  • • Dynamic content loading
  • • Hash-based routing
  • • No page reloads
  • • Interactive components
JavaScript-Disabled SPA
Fallback navigation and server-rendered content

This version provides fallback functionality when JavaScript is disabled, ensuring basic navigation and content access.

  • • Server-side rendering
  • • Standard link navigation
  • • Graceful degradation
  • • Accessible fallbacks

Testing Instructions

With JavaScript Enabled

  1. 1. Navigate to the JS-enabled example
  2. 2. Click navigation links
  3. 3. Notice smooth transitions
  4. 4. Check URL changes (hash-based)

With JavaScript Disabled

  1. 1. Disable JavaScript in browser
  2. 2. Navigate to the JS-disabled example
  3. 3. Use fallback navigation
  4. 4. Notice page reloads but functionality remains