jpglens Examples

// tests/checkout-flow.spec.js
import { test, expect } from '@playwright/test';
import { analyzeUserJourney, analyzeCompleteJourney } from 'jpglens/playwright';

test('checkout flow with AI analysis', async ({ page }) => {
  // Navigate to product page
  await page.goto('/products/wireless-headphones');
  
  // Add to cart
  await page.click('[data-testid="add-to-cart"]');
  await page.click('[data-testid="view-cart"]');
  
  // Analyze cart page UX
  await analyzeUserJourney(page, {
    stage: 'cart-review',
    userIntent: 'review items before checkout',
    userContext: {
      persona: 'price-conscious-shopper',
      device: 'mobile',
      urgency: 'medium',
      trustLevel: 'first-time-buyer'
    },
    criticalElements: ['cart-items', 'total-price', 'security-badges'],
    analysisTypes: ['usability', 'conversion-optimization', 'trust-signals']
  });
  
  // Proceed to checkout
  await page.click('[data-testid="checkout"]');
  
  // Fill shipping information
  await page.fill('[data-testid="email"]', 'customer@example.com');
  await page.fill('[data-testid="first-name"]', 'John');
  await page.fill('[data-testid="last-name"]', 'Doe');
  await page.fill('[data-testid="address"]', '123 Main Street');
  await page.fill('[data-testid="city"]', 'New York');
  await page.selectOption('[data-testid="state"]', 'NY');
  await page.fill('[data-testid="zip"]', '10001');
  
  // Analyze checkout form UX
  await analyzeUserJourney(page, {
    stage: 'checkout-form',
    userIntent: 'provide shipping information quickly',
    userContext: {
      persona: 'mobile-user',
      device: 'mobile',
      expertise: 'novice',
      timeConstraint: 'limited'
    },
    criticalElements: ['form-fields', 'validation-messages', 'progress-indicator'],
    analysisTypes: ['form-usability', 'mobile-optimization', 'accessibility'],
    customPrompts: {
      'mobile-form-analysis': 'Focus on mobile form usability and keyboard navigation'
    }
  });
  
  // Continue to payment
  await page.click('[data-testid="continue-to-payment"]');
  
  // Analyze payment page security and trust
  await analyzeUserJourney(page, {
    stage: 'payment',
    userIntent: 'complete purchase securely',
    userContext: {
      persona: 'security-conscious',
      device: 'mobile',
      concernLevel: 'high'
    },
    criticalElements: ['payment-form', 'ssl-indicators', 'security-badges'],
    analysisTypes: ['security-perception', 'trust-signals', 'accessibility']
  });
  
  // Complete order (using test payment)
  await page.fill('[data-testid="card-number"]', '4242424242424242');
  await page.fill('[data-testid="expiry"]', '12/25');
  await page.fill('[data-testid="cvc"]', '123');
  await page.click('[data-testid="place-order"]');
  
  // Verify success page
  await expect(page.locator('[data-testid="order-confirmation"]')).toBeVisible();
  
  // Final analysis of success page
  await analyzeUserJourney(page, {
    stage: 'order-confirmation',
    userIntent: 'confirm successful purchase and next steps',
    userContext: {
      persona: 'relieved-customer',
      emotionalState: 'satisfied',
      nextAction: 'track-order'
    },
    criticalElements: ['confirmation-message', 'order-details', 'next-steps'],
    analysisTypes: ['satisfaction-indicators', 'next-action-clarity']
  });
});

// tests/dashboard-ux.spec.js
import { test } from '@playwright/test';
import { analyzeUserJourney } from 'jpglens/playwright';

test('dashboard UX analysis for business users', async ({ page }) => {
  await page.goto('/dashboard');
  
  // Login as business analyst
  await page.fill('[data-testid="email"]', 'analyst@company.com');
  await page.fill('[data-testid="password"]', 'password');
  await page.click('[data-testid="login"]');
  
  // Wait for dashboard to load
  await page.waitForSelector('[data-testid="dashboard-container"]');
  
  // Analyze main dashboard overview
  await analyzeUserJourney(page, {
    stage: 'dashboard-overview',
    userIntent: 'quickly understand business performance',
    userContext: {
      persona: 'business-analyst',
      expertise: 'expert',
      device: 'desktop',
      timeConstraint: 'daily-review',
      dataLiteracy: 'high'
    },
    criticalElements: [
      'kpi-cards',
      'main-chart',
      'data-filters',
      'navigation-menu',
      'date-selector'
    ],
    analysisTypes: [
      'data-visualization',
      'information-hierarchy',
      'cognitive-load',
      'workflow-efficiency'
    ],
    businessContext: {
      industry: 'saas',
      userRole: 'analyst',
      primaryGoals: ['trend-identification', 'anomaly-detection', 'reporting']
    }
  });
  
  // Filter data by date range
  await page.click('[data-testid="date-filter"]');
  await page.click('[data-testid="last-30-days"]');
  
  // Navigate to detailed analytics
  await page.click('[data-testid="revenue-chart"]');
  
  // Analyze detailed view
  await analyzeUserJourney(page, {
    stage: 'detailed-analytics',
    userIntent: 'drill down into revenue metrics',
    userContext: {
      persona: 'data-analyst',
      previousAction: 'clicked-revenue-chart',
      currentFocus: 'revenue-trends',
      urgency: 'high'
    },
    criticalElements: [
      'detailed-chart',
      'data-table',
      'export-options',
      'comparison-tools',
      'breadcrumb-navigation'
    ],
    analysisTypes: [
      'data-exploration',
      'chart-readability',
      'interaction-patterns',
      'export-usability'
    ]
  });
});

// tests/accessibility-comprehensive.spec.js
import { test } from '@playwright/test';
import { analyzeUserJourney } from 'jpglens/playwright';

test('comprehensive accessibility analysis', async ({ page }) => {
  await page.goto('/contact-form');
  
  // Analyze form accessibility for screen reader users
  await analyzeUserJourney(page, {
    stage: 'form-interaction',
    userIntent: 'submit contact inquiry',
    userContext: {
      persona: 'screen-reader-user',
      assistiveTechnology: 'NVDA',
      device: 'desktop',
      expertise: 'intermediate'
    },
    criticalElements: [
      'form-labels',
      'input-fields',
      'error-messages',
      'submit-button',
      'form-instructions'
    ],
    analysisTypes: [
      'wcag-compliance',
      'screen-reader-compatibility',
      'keyboard-navigation',
      'focus-management',
      'semantic-structure'
    ],
    accessibilityFocus: {
      wcagLevel: 'AA',
      priorities: ['perceivable', 'operable', 'understandable', 'robust'],
      assistiveTech: ['screen-reader', 'keyboard-only', 'voice-control']
    }
  });
  
  // Test keyboard navigation
  await page.keyboard.press('Tab'); // Focus first field
  await page.keyboard.type('John Doe');
  await page.keyboard.press('Tab'); // Move to email
  await page.keyboard.type('john@example.com');
  await page.keyboard.press('Tab'); // Move to message
  await page.keyboard.type('Hello, I need help with accessibility.');
  
  // Analyze keyboard interaction flow
  await analyzeUserJourney(page, {
    stage: 'keyboard-navigation',
    userIntent: 'complete form using only keyboard',
    userContext: {
      persona: 'motor-impaired-user',
      inputMethod: 'keyboard-only',
      device: 'desktop'
    },
    criticalElements: [
      'focus-indicators',
      'tab-order',
      'skip-links',
      'keyboard-shortcuts'
    ],
    analysisTypes: [
      'keyboard-accessibility',
      'focus-visibility',
      'navigation-efficiency'
    ]
  });
  
  // Submit form and analyze feedback
  await page.keyboard.press('Tab'); // Focus submit button
  await page.keyboard.press('Enter'); // Submit
  
  // Analyze success/error feedback accessibility
  await analyzeUserJourney(page, {
    stage: 'form-feedback',
    userIntent: 'understand form submission result',
    userContext: {
      persona: 'visually-impaired-user',
      assistiveTechnology: 'screen-reader',
      concernLevel: 'high'
    },
    criticalElements: [
      'success-message',
      'error-announcements',
      'live-regions',
      'status-indicators'
    ],
    analysisTypes: [
      'feedback-accessibility',
      'live-region-usage',
      'error-handling',
      'status-communication'
    ]
  });
});

// cypress/e2e/onboarding-ux.cy.js
import 'jpglens/cypress';

describe('User Onboarding UX Analysis', () => {
  it('analyzes complete onboarding experience', () => {
    cy.visit('/signup');
    
    // Analyze landing/signup page
    cy.analyzeUserExperience({
      stage: 'signup-landing',
      userIntent: 'understand value and sign up',
      userContext: {
        persona: 'first-time-visitor',
        device: 'desktop',
        trafficSource: 'organic-search',
        motivationLevel: 'medium'
      },
      criticalElements: ['hero-section', 'signup-form', 'value-proposition'],
      analysisTypes: ['first-impression', 'trust-building', 'conversion-optimization']
    });
    
    // Fill signup form
    cy.get('[data-cy="email"]').type('newuser@example.com');
    cy.get('[data-cy="password"]').type('SecurePass123!');
    cy.get('[data-cy="confirm-password"]').type('SecurePass123!');
    cy.get('[data-cy="signup-button"]').click();
    
    // Analyze welcome screen
    cy.url().should('include', '/welcome');
    cy.analyzeUserExperience({
      stage: 'welcome-screen',
      userIntent: 'understand next steps and get started',
      userContext: {
        persona: 'new-user',
        emotionalState: 'curious',
        expectation: 'clear-guidance'
      },
      criticalElements: ['welcome-message', 'next-steps', 'progress-indicator'],
      analysisTypes: ['onboarding-clarity', 'user-guidance', 'engagement']
    });
    
    // Complete profile setup
    cy.get('[data-cy="continue-setup"]').click();
    cy.get('[data-cy="first-name"]').type('John');
    cy.get('[data-cy="last-name"]').type('Doe');
    cy.get('[data-cy="company"]').type('Acme Corp');
    cy.get('[data-cy="role"]').select('Developer');
    
    // Analyze profile setup UX
    cy.analyzeUserExperience({
      stage: 'profile-setup',
      userIntent: 'complete profile with minimal effort',
      userContext: {
        persona: 'busy-professional',
        timeConstraint: 'limited',
        completionMotivation: 'high'
      },
      criticalElements: ['form-fields', 'progress-bar', 'skip-options'],
      analysisTypes: ['form-completion', 'progress-communication', 'optional-vs-required']
    });
    
    cy.get('[data-cy="save-profile"]').click();
    
    // Analyze onboarding completion
    cy.analyzeUserExperience({
      stage: 'onboarding-complete',
      userIntent: 'start using the product',
      userContext: {
        persona: 'activated-user',
        emotionalState: 'accomplished',
        nextGoal: 'explore-features'
      },
      criticalElements: ['success-message', 'main-dashboard', 'feature-highlights'],
      analysisTypes: ['activation-success', 'feature-discovery', 'user-confidence']
    });
  });
});

// Button.stories.js
import { within, userEvent } from '@storybook/testing-library';
import { analyzeComponentStates } from 'jpglens/storybook';

export const InteractiveButton = {
  args: {
    variant: 'primary',
    size: 'medium',
    children: 'Click me'
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const button = canvas.getByRole('button');
    
    // Analyze default state
    await analyzeComponentStates(canvas, {
      component: 'Primary Button',
      variant: 'primary',
      states: ['default'],
      context: 'design-system-review',
      analysisTypes: ['visual-consistency', 'accessibility', 'brand-alignment']
    });
    
    // Test hover state
    await userEvent.hover(button);
    await analyzeComponentStates(canvas, {
      component: 'Primary Button',
      states: ['hover'],
      context: 'interaction-feedback',
      analysisTypes: ['hover-feedback', 'visual-hierarchy']
    });
    
    // Test focus state
    await userEvent.tab();
    await analyzeComponentStates(canvas, {
      component: 'Primary Button',
      states: ['focus'],
      context: 'keyboard-navigation',
      analysisTypes: ['focus-visibility', 'accessibility']
    });
    
    // Test active state
    await userEvent.click(button);
    await analyzeComponentStates(canvas, {
      component: 'Primary Button',
      states: ['active', 'clicked'],
      context: 'user-interaction',
      analysisTypes: ['click-feedback', 'state-transitions']
    });
  }
};

// jpglens.config.js
export default {
  ai: {
    provider: 'openrouter',
    model: 'anthropic/claude-3-5-sonnet',
    apiKey: process.env.JPGLENS_API_KEY
  },
  reporting: {
    enabled: true,
    format: 'html',
    customPrompts: {
      'fintech-compliance': `
        Analyze this financial interface for:
        1. Regulatory compliance indicators
        2. Security trust signals
        3. Data privacy transparency
        4. Accessibility for users with disabilities
        Focus on fintech industry standards and user trust.
      `,
      'mobile-first-ecommerce': `
        Evaluate this mobile e-commerce interface for:
        1. Thumb-friendly navigation
        2. One-handed usability
        3. Loading performance perception
        4. Conversion optimization
        Consider mobile-first shopping behaviors.
      `
    }
  }
};

// tests/advanced-analysis.spec.js
import { test } from '@playwright/test';
import { analyzeUserJourney, analyzeCompleteJourney } from 'jpglens/playwright';

test('fintech app compliance analysis', async ({ page }) => {
  await page.goto('/banking/transfer');
  
  await analyzeUserJourney(page, {
    stage: 'money-transfer-form',
    userIntent: 'transfer money securely',
    userContext: {
      persona: 'security-conscious-user',
      device: 'mobile',
      transactionAmount: 'high-value',
      regulatoryContext: 'PCI-DSS'
    },
    customPrompt: 'fintech-compliance',
    analysisTypes: ['security-perception', 'compliance-indicators', 'trust-signals'],
    industryContext: {
      sector: 'fintech',
      regulations: ['PCI-DSS', 'GDPR', 'PSD2'],
      riskLevel: 'high'
    }
  });
});

// Multi-stage journey analysis
const userJourney = {
  name: 'complete-loan-application',
  persona: 'first-time-borrower',
  device: 'desktop',
  stages: [
    {
      name: 'loan-calculator',
      url: '/loans/calculator',
      userGoal: 'understand loan terms',
      analysisPrompt: 'Focus on financial clarity and trust building'
    },
    {
      name: 'application-form',
      url: '/loans/apply',
      userGoal: 'complete application efficiently',
      analysisPrompt: 'Analyze form complexity and data sensitivity handling'
    },
    {
      name: 'document-upload',
      url: '/loans/documents',
      userGoal: 'upload required documents',
      analysisPrompt: 'Evaluate security perception and upload UX'
    },
    {
      name: 'application-review',
      url: '/loans/review',
      userGoal: 'review and submit application',
      analysisPrompt: 'Focus on final decision confidence and security'
    }
  ]
};

test('complete loan journey analysis', async ({ page }) => {
  const results = await analyzeCompleteJourney(userJourney, {
    generateReport: true,
    compareStages: true,
    identifyDropoffRisks: true
  });
  
  // Results contain comprehensive journey analysis
  console.log('Journey Analysis:', results.summary);
  console.log('Critical Issues:', results.criticalIssues);
  console.log('Recommendations:', results.recommendations);
});