Skip to main content

How to preview and test options?

Previewing and testing options is crucial to ensure the best customer experience before publishing. XB Product Options provides multiple tools for testing and previewing.

Preview Tools​

1. Live Preview 👁️​

Purpose: View options directly on products

Features:

  • Real-time preview when editing
  • Display customization area (purple dashed box)
  • Change options and see results immediately
  • Zoom in/out to see details

How to use:

  1. Open Editor
  2. Select product for preview
  3. Edit options
  4. See results immediately

2. Product Preview 🖼️​

Purpose: View options on actual products

Features:

  • Display actual product images
  • Customization area clearly marked
  • Product information (name, price)
  • Responsive preview

How to use:

  1. Select product from dropdown
  2. View preview with options
  3. Test different options
  4. Check on different products

3. Mobile Preview 📱​

Purpose: Check display on mobile

Features:

  • Preview with mobile size
  • Touch-friendly interface
  • Responsive design testing
  • Mobile-specific layout

How to use:

  1. Click mobile icon in preview
  2. Test touch interactions
  3. Check mobile layout
  4. Test on different screen sizes

Testing Process​

Step 1: Basic Preview​

  1. Open Live Preview
  2. Test all options
  3. Check display
  4. View customization area

Step 2: Function Testing​

  1. Test Required fields
  2. Test Conditional logic
  3. Test File upload
  4. Test Pricing integration

Step 3: Responsive Testing​

  1. Desktop preview
  2. Tablet preview
  3. Mobile preview
  4. Cross-browser testing

Step 4: User Flow Testing​

  1. Simulate customer journey
  2. Test edge cases
  3. Test error handling
  4. Test performance

Important Test Cases​

1. Required Fields Testing ✅​

Purpose: Ensure required options work correctly

Test cases:

  • Leave required field empty → Show error
  • Fill all required fields → Allow continuation
  • Required field with conditional logic → Test logic
  • Required field with pricing → Test pricing

Example:

Test case: Required name engraving
1. Leave "Name" field empty → Error: "Please enter name"
2. Enter name → Allow continuation
3. Test with long/short names → Validation
4. Test with special characters → Validation

2. Conditional Logic Testing 🔄​

Purpose: Ensure conditional logic works correctly

Test cases:

  • Change conditions → Options show/hide correctly
  • Multiple conditions → Test all combinations
  • Edge cases → Test boundary conditions
  • Error states → Test error handling

Example:

Test case: Name engraving logic
1. Select "Yes engraving" → Show name input field
2. Select "No engraving" → Hide name input field
3. Select "Yes engraving" → Show name input field again
4. Test with other options → Logic not affected

3. File Upload Testing 📁​

Purpose: Ensure file upload works well

Test cases:

  • Upload valid file → Success
  • Upload unsupported file → Error message
  • Upload oversized file → Error message
  • Upload multiple files → Test multiple upload

Example:

Test case: Logo upload
1. Upload PNG 1MB → Success, show preview
2. Upload PDF 15MB → Error: "File too large"
3. Upload TXT → Error: "Format not supported"
4. Upload PNG 5MB → Success, show preview

4. Pricing Integration Testing 💰​

Purpose: Ensure pricing is calculated correctly

Test cases:

  • Select option with price → Add price correctly
  • Deselect option with price → Subtract price correctly
  • Multiple pricing options → Test total price
  • Edge cases → Test boundary conditions

Example:

Test case: T-shirt pricing
1. T-shirt $25 + Name engraving $5 → Total $30
2. Deselect name engraving → Total $25
3. Add logo upload $8 → Total $33
4. Deselect logo upload → Total $25

Cross-Device Testing​

Desktop Testing 🖥️​

Screen size: 1200px+ Test cases:

  • Layout displays correctly
  • Mouse interactions work
  • Keyboard navigation
  • Good performance

Tablet Testing 📱​

Screen size: 768px - 1199px Test cases:

  • Responsive layout
  • Touch interaction
  • Orientation change
  • Acceptable performance

Mobile Testing 📱​

Screen size: < 768px Test cases:

  • Mobile-friendly layout
  • Smooth touch interaction
  • Readable text
  • Good performance

Cross-Browser Testing​

Chrome 🌐​

  • Test all features
  • Test performance
  • Test compatibility
  • Test latest features

Firefox 🦊​

  • Test all features
  • Test performance
  • Test compatibility
  • Test specific features

Safari 🍎​

  • Test all features
  • Test performance
  • Test compatibility
  • Test mobile Safari

Edge 🔷​

  • Test all features
  • Test performance
  • Test compatibility
  • Test Windows integration

Performance Testing​

Load Time Testing ⚡​

Purpose: Ensure options load quickly

Test cases:

  • Initial load time < 2s
  • Option switching < 1s
  • File upload progress
  • Preview generation time

Memory Usage Testing 🧠​

Purpose: Ensure not using too much memory

Test cases:

  • Memory usage with many options
  • Memory usage with file upload
  • Memory leak detection
  • Garbage collection

Network Testing 🌐​

Purpose: Ensure works well with slow networks

Test cases:

  • Slow 3G connection
  • Intermittent connection
  • Offline handling
  • Retry mechanism

User Experience Testing​

Usability Testing 👥​

Purpose: Ensure easy to use

Test cases:

  • Intuitive interface
  • Clear instructions
  • Helpful error messages
  • Clear success feedback

Accessibility Testing ♿​

Purpose: Ensure accessible to everyone

Test cases:

  • Screen reader compatibility
  • Keyboard navigation
  • Color contrast
  • Font size options

Internationalization Testing 🌍​

Purpose: Ensure works with multiple languages

Test cases:

  • RTL languages
  • Unicode characters
  • Date/time formats
  • Number formats

Error Handling Testing​

Input Validation Testing ✅​

Purpose: Ensure validation works correctly

Test cases:

  • Invalid input → Error message
  • Empty required fields → Error message
  • File validation → Error message
  • Network errors → Error message

Recovery Testing 🔄​

Purpose: Ensure can recover from errors

Test cases:

  • Network interruption → Retry
  • File upload failure → Retry
  • Validation errors → Clear error
  • System errors → Graceful degradation

Testing Tools​

Built-in Tools 🛠️​

  • Live Preview: Real-time preview
  • Mobile Preview: Mobile testing
  • Error Console: Error debugging
  • Performance Monitor: Performance tracking

External Tools 🔧​

  • Browser DevTools: Debugging
  • Lighthouse: Performance audit
  • WebPageTest: Performance testing
  • GTmetrix: Performance analysis

Best Practices​

✅ Test Early, Test Often Principle​

  • Test immediately when creating options
  • Test every time you make changes
  • Test before publishing
  • Test after publishing

✅ Test Everything Principle​

  • Test all options
  • Test all devices
  • Test all browsers
  • Test all scenarios

✅ User-Centric Testing Principle​

  • Test from customer perspective
  • Test with real data
  • Test with real users
  • Test with feedback

Common Issues​

❌ Preview not displaying​

  • Check JavaScript errors
  • Check network connection
  • Check browser compatibility
  • Clear cache and test again

❌ Options not working​

  • Check configuration
  • Check conditional logic
  • Check validation rules
  • Test with different data

❌ Slow performance​

  • Check file size
  • Check network speed
  • Check server performance
  • Optimize code and assets

Do you need guidance on testing any specific option type?