@sridharkikkeri/playwright-common 1.0.23 → 1.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sridharkikkeri/playwright-common",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "description": "Production-grade Playwright framework with AI-powered self-healing, visual regression, and enterprise features",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/CLEAN_IMPORTS.md

@@ -1,184 +0,0 @@
-# Clean Import Guide (v1.0.1+)
-
-## ✅ What Changed in v1.0.1
-
-**Before (v1.0.0):**
-```typescript
-// ❌ Ugly deep imports
-import { test } from '@sridharkikkeri/playwright-common/dist/com/healthedge/common/fixtures/fixtures';
-import { BasePage } from '@sridharkikkeri/playwright-common/dist/com/healthedge/common/core/pages/BasePage';
-```
-
-**After (v1.0.1):**
-```typescript
-// ✅ Clean barrel imports
-import { test, BasePage, VisualTesting } from '@sridharkikkeri/playwright-common';
-```
-
----
-
-## Usage Examples
-
-### Basic Test
-```typescript
-import { test } from '@sridharkikkeri/playwright-common';
-
-test('My test', async ({ page }) => {
-  await page.goto('https://example.com');
-});
-```
-
-### Page Object Pattern
-```typescript
-import { BasePage } from '@sridharkikkeri/playwright-common';
-import { Page } from '@playwright/test';
-
-export class LoginPage extends BasePage {
-  constructor(page: Page) {
-    super(page, 'LoginPage');
-  }
-
-  private readonly username = this.element('#username');
-  private readonly loginBtn = this.element('button[type="submit"]');
-
-  async login(user: string) {
-    await this.username.fill(user, 'Enter username');
-    await this.loginBtn.click('Click login');
-  }
-}
-```
-
-### Visual Testing
-```typescript
-import { test, VisualTesting } from '@sridharkikkeri/playwright-common';
-
-test('Visual regression', async ({ page }) => {
-  const visual = new VisualTesting(page);
-  await page.goto('/dashboard');
-  await visual.compareFullPage({ name: 'dashboard' });
-});
-```
-
-### API Testing
-```typescript
-import { test, ApiClient } from '@sridharkikkeri/playwright-common';
-
-test('API test', async ({ request }) => {
-  const client = new ApiClient(request);
-  const response = await client.get('/api/users/1');
-  expect(response.status).toBe(200);
-});
-```
-
-### Configuration
-```typescript
-import { ConfigManager } from '@sridharkikkeri/playwright-common';
-
-const config = ConfigManager.getConfig();
-console.log(config.healingEnabled); // true
-console.log(config.environment); // 'dev'
-```
-
-### Localization
-```typescript
-import { Localization } from '@sridharkikkeri/playwright-common';
-
-const message = Localization.get('welcome_message', 'en');
-```
-
-### Allure Reporting
-```typescript
-import { AllureUtil } from '@sridharkikkeri/playwright-common';
-
-await AllureUtil.step('Custom step', async () => {
-  // Your logic
-  AllureUtil.attachJson('Data', { key: 'value' });
-});
-```
-
----
-
-## All Available Exports
-
-```typescript
-import {
-  // Testing
-  test,
-  
-  // Pages
-  BasePage,
-  LoginPage,
-  
-  // Wrappers
-  ElementWrapper,
-  
-  // Self-Healing
-  ActionOrchestrator,
-  LocatorHealing,
-  ElementProfileStore,
-  
-  // API
-  ApiClient,
-  AuthStrategy,
-  CookieAuth,
-  OAuth2Auth,
-  
-  // Visual
-  VisualTesting,
-  
-  // Config
-  ConfigManager,
-  
-  // i18n
-  Localization,
-  
-  // Reporting
-  AllureUtil,
-  
-  // Utils
-  Logger,
-  ErrorUtils
-} from '@sridharkikkeri/playwright-common';
-```
-
----
-
-## TypeScript Support
-
-Full TypeScript support with auto-completion:
-
-```typescript
-import { BasePage } from '@sridharkikkeri/playwright-common';
-//       ^
-//       VS Code will show type hints and documentation
-```
-
----
-
-## Migration from v1.0.0 to v1.0.1
-
-**Find and replace in your project:**
-
-```bash
-# Old pattern
-@sridharkikkeri/playwright-common/dist/com/healthedge/common/
-
-# New pattern
-@sridharkikkeri/playwright-common
-```
-
-**Or use this script:**
-```bash
-find . -name "*.ts" -type f -exec sed -i '' \
-  's|@sridharkikkeri/playwright-common/dist/com/healthedge/common/[^'"'"']*|@sridharkikkeri/playwright-common|g' {} +
-```
-
----
-
-## Installation
-
-```bash
-npm install @sridharkikkeri/playwright-common@latest
-```
-
-**Package URL:** https://www.npmjs.com/package/@sridharkikkeri/playwright-common

package/HEALING_CACHE_STRATEGY.md

@@ -1,222 +0,0 @@
-# Self-Healing Cache Strategy
-
-## Overview
-The framework's self-healing mechanism uses an in-memory cache to store element profiles and healed selectors, enabling intelligent locator recovery without repeated AI calls.
-
----
-
-## Architecture
-
-### 1. Element Profile Store
-**Location**: `ElementProfileStore.ts`
-
-**Purpose**: Maintains a runtime cache of element "fingerprints" captured during successful interactions.
-
-```typescript
-interface ElementProfile {
-    selector: string;              // Original selector
-    intent: string;                // Human-readable action intent
-    attributes: Record<string, string>; // DOM attributes snapshot
-    lastHealedSelector?: string;   // Last successful healed selector
-    healingFailed?: boolean;       // Flag if healing exhausted
-    failureType?: string;          // Reason for healing failure
-}
-```
-
-**Key**: `{pageName}:{intent}` (e.g., `LoginPage:Click Login Button`)
-
----
-
-## Caching Flow
-
-### Phase 1: Profile Capture (Success Path)
-```
-User Action → Element Found → Capture Attributes → Store Profile
-```
-
-**When**: After every successful element interaction  
-**What's Stored**:
-- Original selector
-- Element tag, text, id, class, data-* attributes
-- Action intent for context
-
-### Phase 2: Healing Attempt (Failure Path)
-```
-Selector Fails → Check Cache → Use lastHealedSelector → If Fails → AI Healing → Update Cache
-```
-
-**Decision Tree**:
-1. **Cache Hit + Valid Healed Selector**: Use cached healed selector (fast path)
-2. **Cache Hit + Failed Flag**: Skip healing, fail fast
-3. **Cache Miss or Stale**: Trigger AI healing via LLM
-
-### Phase 3: AI Healing (Expensive Path)
-```
-Extract Profile → LLM Analysis → Generate New Selector → Validate → Cache Result
-```
-
-**LLM Input**:
-- Element attributes from profile
-- Page context (pageName)
-- Action intent
-- DOM snapshot (optional)
-
-**LLM Output**: Alternative selector candidates
-
-**Validation**: Test each candidate; first success is cached
-
----
-
-## Cache Lifecycle
-
-### Scope
-- **Per Test Run**: Cache is in-memory, resets between test executions
-- **Per Worker**: Isolated cache per Playwright worker (no cross-worker sharing)
-
-### Persistence
-**Current**: No persistence (ephemeral)
-
-**Future Enhancement**: Serialize to `.healing-cache.json` for cross-run reuse
-```json
-{
-  "LoginPage:Click Login Button": {
-    "lastHealedSelector": "button[data-testid='login-submit']",
-    "timestamp": 1704067200000,
-    "successRate": 0.95
-  }
-}
-```
-
----
-
-## Performance Optimization
-
-### 1. Fast Path (Cache Hit)
-- **Latency**: ~5ms (in-memory lookup)
-- **Cost**: $0
-- **Success Rate**: 85-90% for stable apps
-
-### 2. Slow Path (AI Healing)
-- **Latency**: 2-5 seconds (LLM API call)
-- **Cost**: ~$0.001-0.01 per healing
-- **Success Rate**: 70-80% for moderate DOM changes
-
-### 3. Fail Fast
-- **Latency**: ~10ms
-- **Triggered**: When `healingFailed=true` in cache
-- **Prevents**: Repeated expensive AI calls for permanently broken elements
-
----
-
-## Configuration
-
-### Global Toggle
-```json
-// framework.config.json
-{
-  "healingEnabled": true  // Master switch
-}
-```
-
-### Per-Action Override
-```typescript
-// Disable healing for a specific action
-await this.loginBtn.withHealing(false).click();
-
-// Force healing even if globally disabled
-await this.dynamicElement.withHealing(true).click();
-```
-
----
-
-## Cache Invalidation
-
-### Automatic Invalidation
-- Test run completion (cache cleared)
-- Worker restart
-
-### Manual Invalidation
-```typescript
-// Clear specific profile
-ElementProfileStore.clearProfile('LoginPage', 'Click Login Button');
-
-// Clear all profiles for a page
-ElementProfileStore.clearPage('LoginPage');
-
-// Nuclear option: clear entire cache
-ElementProfileStore.clearAll();
-```
-
----
-
-## Monitoring & Debugging
-
-### Healing Metrics
-```typescript
-const stats = ElementProfileStore.getStats();
-console.log(stats);
-// {
-//   totalProfiles: 45,
-//   healedCount: 12,
-//   failedCount: 2,
-//   cacheHitRate: 0.73
-// }
-```
-
-### Allure Reporting
-Healing events are automatically logged:
-- ✅ **Cache Hit**: "Used cached healed selector"
-- 🔄 **AI Healing**: "Triggered AI healing (took 3.2s)"
-- ❌ **Healing Failed**: "Exhausted healing attempts"
-
----
-
-## Best Practices
-
-### 1. Meaningful Intents
-```typescript
-// ❌ Bad: Generic intent
-await this.btn.click('click');
-
-// ✅ Good: Descriptive intent
-await this.btn.click('Submit Login Form');
-```
-
-### 2. Stable Attributes
-Prefer selectors with stable attributes:
-- `data-testid`
-- `aria-label`
-- `id` (if not auto-generated)
-
-### 3. Healing Budget
-Set a healing attempt limit to prevent infinite loops:
-```typescript
-// In ActionOrchestrator
-const MAX_HEALING_ATTEMPTS = 3;
-```
-
----
-
-## Troubleshooting
-
-### Issue: High AI Healing Costs
-**Solution**: Increase cache persistence, improve selector stability
-
-### Issue: Low Healing Success Rate
-**Solution**: Enrich element profiles with more attributes, improve LLM prompt
-
-### Issue: Stale Cached Selectors
-**Solution**: Add TTL (time-to-live) to cached entries
-```typescript
-profile.expiresAt = Date.now() + 24 * 60 * 60 * 1000; // 24h
-```
-
----
-
-## Future Enhancements
-
-1. **Persistent Cache**: Save to disk for cross-run reuse
-2. **Distributed Cache**: Redis/Memcached for multi-worker sharing
-3. **ML-Based Healing**: Train a model on historical healing data
-4. **Visual Healing**: Use screenshot comparison for element identification
-5. **Healing Analytics Dashboard**: Visualize healing patterns and costs

package/NPM_PUBLISHING.md

@@ -1,213 +0,0 @@
-# NPM Publishing Guide
-
-## Package Information
-- **Name**: `@healthedge/playwright-common`
-- **Version**: `1.0.0`
-- **Size**: ~34 KB (compressed)
-
----
-
-## Pre-Publish Checklist
-
-✅ TypeScript compiled to `dist/`  
-✅ Type definitions generated  
-✅ Documentation included (README, HEALING_CACHE_STRATEGY, VISUAL_TESTING)  
-✅ Project generator script included  
-✅ Test files excluded from package  
-
----
-
-## Publishing Steps
-
-### 1. Enable 2FA on NPM Account (Web Interface)
-**NPM no longer supports TOTP via CLI. Use web interface:**
-
-1. Go to https://www.npmjs.com/settings/YOUR_USERNAME/tfa
-2. Click "Add 2FA Method"
-3. Choose "Authenticator App" or "Security Key"
-4. Follow setup instructions
-5. Save backup codes
-
-**OR use Automation Token (recommended for publishing):**
-1. Go to https://www.npmjs.com/settings/YOUR_USERNAME/tokens
-2. Click "Generate New Token"
-3. Select **"Automation"** type (bypasses 2FA)
-4. Copy token and save securely
-5. Use token for publishing:
-```bash
-npm config set //registry.npmjs.org/:_authToken YOUR_TOKEN
-```
-
-### 2. Test Package Locally
-```bash
-# Build the package
-npm run build
-
-# Test package contents
-npm pack --dry-run
-
-# Create tarball for local testing
-npm pack
-```
-
-### 3. Test in Another Project
-```bash
-# In another project directory
-npm install /path/to/healthedge-playwright-common-1.0.0.tgz
-
-# Test imports
-import { BasePage, VisualTesting, test } from '@healthedge/playwright-common';
-```
-
-### 4. Login to NPM
-```bash
-# If using automation token, skip this step
-# Token is already configured in step 1
-
-# If using 2FA with authenticator app:
-npm login
-# Enter credentials + 2FA code when prompted
-```
-
-### 5. Publish to NPM
-```bash
-# With automation token (no 2FA prompt)
-npm publish --access public
-
-# With 2FA authenticator (enter code when prompted)
-npm publish --access public
-```
-
-### 6. Verify Publication
-```bash
-npm view @healthedge/playwright-common
-```
-
----
-
-## Installation (After Publishing)
-
-### For End Users
-```bash
-# Install the framework
-npm install @healthedge/playwright-common
-
-# Create new project
-npx create-healthedge-tests my-project
-```
-
-### Usage
-```typescript
-import { test, BasePage, VisualTesting } from '@healthedge/playwright-common';
-
-test('My test', async ({ page }) => {
-  // Use framework features
-});
-```
-
----
-
-## Version Management
-
-### Update Version
-```bash
-# Patch (1.0.0 -> 1.0.1)
-npm version patch
-
-# Minor (1.0.0 -> 1.1.0)
-npm version minor
-
-# Major (1.0.0 -> 2.0.0)
-npm version major
-```
-
-### Publish Update
-```bash
-npm run build
-npm publish
-```
-
----
-
-## CI/CD Publishing (GitHub Actions)
-
-```yaml
-name: Publish to NPM
-
-on:
-  release:
-    types: [created]
-
-jobs:
-  publish:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: '18'
-          registry-url: 'https://registry.npmjs.org'
-      
-      - run: npm ci
-      - run: npm run build
-      - run: npm publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-```
-
----
-
-## Troubleshooting
-
-### Issue: 403 Forbidden - 2FA required
-**Solution**: Use Automation Token (easiest)
-1. Go to https://www.npmjs.com/settings/YOUR_USERNAME/tokens
-2. Generate "Automation" token
-3. Configure:
-```bash
-npm config set //registry.npmjs.org/:_authToken YOUR_TOKEN
-npm publish --access public
-```
-
-### Issue: TOTP 2FA no longer supported via CLI
-**Solution**: NPM deprecated CLI-based 2FA setup. Use web interface at https://www.npmjs.com/settings/YOUR_USERNAME/tfa or use Automation tokens instead.
-
-### Issue: Package name already exists
-**Solution**: Change package name in `package.json` or use scoped name like `@yourorg/playwright-common`
-
-### Issue: Build fails
-**Solution**: Run `npm run build` and fix TypeScript errors
-
-### Issue: Large package size
-**Solution**: Check `.npmignore` to exclude unnecessary files
-
----
-
-## Package Registry Alternatives
-
-### GitHub Packages
-```bash
-# Update package.json
-"publishConfig": {
-  "registry": "https://npm.pkg.github.com"
-}
-
-# Publish
-npm publish
-```
-
-### Private Registry (Artifactory, Verdaccio)
-```bash
-npm config set registry https://your-registry.com
-npm publish
-```
-
----
-
-## Post-Publish
-
-1. Update README with installation instructions
-2. Create GitHub release with changelog
-3. Announce on team channels
-4. Update documentation site
-5. Monitor npm download stats: `npm view @healthedge/playwright-common`

package/PUBLISHED.md

@@ -1,153 +0,0 @@
-# 🎉 Package Published Successfully!
-
-## Package Details
-- **Name**: `@sridharkikkeri/playwright-common`
-- **Version**: `1.0.0`
-- **Published**: ✅ Live on NPM
-- **Size**: 131.3 kB (unpacked), 33.9 kB (tarball)
-- **NPM Page**: https://www.npmjs.com/package/@sridharkikkeri/playwright-common
-
----
-
-## Installation
-
-### For End Users
-```bash
-# Install the framework (use latest for clean imports)
-npm install @sridharkikkeri/playwright-common@latest
-
-# Or create new project with generator
-npx create-healthedge-tests my-project
-cd my-project
-npm install
-npm run test:dev
-```
-
-### Clean Imports (v1.0.1+)
-```typescript
-// ✅ Clean barrel imports
-import { test, BasePage, VisualTesting } from '@sridharkikkeri/playwright-common';
-
-// ❌ Don't use deep imports (v1.0.0 style)
-import { test } from '@sridharkikkeri/playwright-common/dist/com/healthedge/common/...';
-```
-
-See [CLEAN_IMPORTS.md](./CLEAN_IMPORTS.md) for complete usage guide.
-
----
-
-## Usage Examples
-
-### Basic Test
-```typescript
-import { test, BasePage } from '@sridharkikkeri/playwright-common';
-
-test('My first test', async ({ page }) => {
-  await page.goto('https://example.com');
-  // Your test logic
-});
-```
-
-### Visual Regression
-```typescript
-import { test, VisualTesting } from '@sridharkikkeri/playwright-common';
-
-test('Visual check', async ({ page }) => {
-  const visual = new VisualTesting(page);
-  await page.goto('/dashboard');
-  await visual.compareFullPage({ name: 'dashboard' });
-});
-```
-
-### Page Object Pattern
-```typescript
-import { BasePage } from '@sridharkikkeri/playwright-common';
-
-export class LoginPage extends BasePage {
-  constructor(page) {
-    super(page, 'LoginPage');
-  }
-
-  private readonly username = this.element('#username');
-  private readonly password = this.element('#password');
-  private readonly loginBtn = this.element('button[type="submit"]');
-
-  async login(user: string, pass: string) {
-    await this.username.fill(user, 'Enter username');
-    await this.password.fill(pass, 'Enter password');
-    await this.loginBtn.click('Click login');
-  }
-}
-```
-
----
-
-## Features Included
-
-✅ **AI-Powered Self-Healing** - Automatic locator recovery  
-✅ **Visual Regression Testing** - Built-in snapshot comparison  
-✅ **Environment Configs** - dev, qa, auto, staging, prod  
-✅ **API Testing** - Robust ApiClient with auth strategies  
-✅ **Allure Reporting** - Integrated test reporting  
-✅ **Localization (i18n)** - Multi-language support  
-✅ **Enterprise Fixtures** - Zero-boilerplate test setup  
-✅ **Project Generator** - Bootstrap new projects instantly  
-
----
-
-## Documentation
-
-- [README](https://github.com/healthedge/playwright-framework#readme)
-- [Healing Cache Strategy](./HEALING_CACHE_STRATEGY.md)
-- [Visual Testing Guide](./VISUAL_TESTING.md)
-- [NPM Publishing Guide](./NPM_PUBLISHING.md)
-
----
-
-## Next Steps
-
-### Update Package
-```bash
-# Bump version
-npm version patch  # 1.0.0 -> 1.0.1
-npm version minor  # 1.0.0 -> 1.1.0
-npm version major  # 1.0.0 -> 2.0.0
-
-# Rebuild and publish
-npm run build
-npm publish --access public
-```
-
-### Share with Team
-```bash
-# Share installation command
-npm install @sridharkikkeri/playwright-common
-
-# Or share project generator
-npx create-healthedge-tests my-project
-```
-
----
-
-## Stats & Monitoring
-
-**View package stats:**
-- NPM page: https://www.npmjs.com/package/@sridharkikkeri/playwright-common
-- Download stats: https://npm-stat.com/charts.html?package=@sridharkikkeri/playwright-common
-
-**Monitor usage:**
-```bash
-npm view @sridharkikkeri/playwright-common
-```
-
----
-
-## Support
-
-For issues or questions:
-- GitHub Issues: https://github.com/healthedge/playwright-framework/issues
-- Email: sridharkikkeri@gmail.com
-
----
-
-**Congratulations! Your framework is now available to the world! 🚀**

package/QUICK_FIX.md

@@ -1,40 +0,0 @@
-# Quick Fix: NPM Token Issue
-
-## Steps to Publish
-
-1. **Generate NEW Automation Token:**
-   - Go to: https://www.npmjs.com/settings/sridharkikkeri/tokens
-   - Click "Generate New Token"
-   - Select **"Automation"** (NOT Classic or Publish)
-   - Copy the token
-
-2. **Clear old config and set new token:**
-```bash
-npm config delete //registry.npmjs.org/:_authToken
-npm config set //registry.npmjs.org/:_authToken YOUR_NEW_TOKEN_HERE
-```
-
-3. **Verify token works:**
-```bash
-npm whoami
-# Should show: sridharkikkeri
-```
-
-4. **Publish:**
-```bash
-npm publish --access public
-```
-
-## Alternative: Use unscoped name (no @ prefix)
-
-If token issues persist, change package name to unscoped:
-
-In `package.json`:
-```json
-"name": "playwright-common-healthedge"
-```
-
-Then publish:
-```bash
-npm publish
-```

package/VISUAL_TESTING.md

@@ -1,319 +0,0 @@
-# Visual Regression Testing
-
-## Overview
-The framework includes built-in visual regression testing using Playwright's snapshot comparison, wrapped in `VisualTesting` utility with Allure integration.
-
----
-
-## Quick Start
-
-### 1. Basic Usage
-
-```typescript
-import { test } from '@healthedge/common';
-import { VisualTesting } from '@healthedge/common';
-
-test('Visual regression - Homepage', async ({ page }) => {
-  const visual = new VisualTesting(page);
-  
-  await page.goto('https://example.com');
-  
-  // Compare full page
-  await visual.compareFullPage({ name: 'homepage' });
-});
-```
-
-### 2. Element-Specific Comparison
-
-```typescript
-test('Visual regression - Login button', async ({ page }) => {
-  const visual = new VisualTesting(page);
-  const loginBtn = page.locator('#login-btn');
-  
-  await visual.compareElement(loginBtn, { 
-    name: 'login-button',
-    threshold: 0.02  // Allow 2% difference
-  });
-});
-```
-
-### 3. Masking Dynamic Content
-
-```typescript
-test('Visual regression - Mask timestamps', async ({ page }) => {
-  const visual = new VisualTesting(page);
-  
-  await page.goto('/dashboard');
-  
-  // Mask elements that change frequently
-  await visual.compareFullPage({
-    name: 'dashboard',
-    mask: [
-      page.locator('.timestamp'),
-      page.locator('.user-avatar'),
-      page.locator('[data-dynamic="true"]')
-    ]
-  });
-});
-```
-
----
-
-## API Reference
-
-### compareFullPage(options?)
-Compare entire page screenshot against baseline.
-
-**Options:**
-- `name`: Snapshot filename (default: 'full-page')
-- `threshold`: Max pixel difference ratio 0-1 (default: 0.01)
-- `mask`: Array of locators to mask
-- `fullPage`: Capture full scrollable page (default: true)
-
-### compareElement(locator, options?)
-Compare specific element screenshot.
-
-**Options:**
-- `name`: Snapshot filename (default: 'element')
-- `threshold`: Max pixel difference ratio 0-1 (default: 0.01)
-
-### compareViewport(options?)
-Compare visible viewport only (no scrolling).
-
-**Options:**
-- `name`: Snapshot filename (default: 'viewport')
-- `threshold`: Max pixel difference ratio 0-1 (default: 0.01)
-- `mask`: Array of locators to mask
-
-### captureBaseline(name, fullPage?)
-Manually capture baseline (for documentation purposes).
-
----
-
-## Workflow
-
-### 1. Create Baselines (First Run)
-```bash
-# Generate baseline snapshots
-npx playwright test --update-snapshots
-```
-
-Baselines are stored in `**/__snapshots__/` directories.
-
-### 2. Run Visual Tests
-```bash
-# Compare against baselines
-npx playwright test
-```
-
-### 3. Review Failures
-When visual tests fail, Playwright generates:
-- **Actual**: Current screenshot
-- **Expected**: Baseline screenshot
-- **Diff**: Highlighted differences
-
-Located in: `test-results/*/`
-
-### 4. Update Baselines
-```bash
-# Update specific test
-npx playwright test visual.spec.ts --update-snapshots
-
-# Update all
-npx playwright test --update-snapshots
-```
-
----
-
-## Configuration
-
-### Playwright Config
-```typescript
-// playwright.config.ts
-export default defineConfig({
-  expect: {
-    toHaveScreenshot: {
-      maxDiffPixels: 100,        // Max different pixels
-      threshold: 0.2,            // Per-pixel color threshold
-      animations: 'disabled',    // Disable CSS animations
-    }
-  }
-});
-```
-
-### Per-Test Override
-```typescript
-await visual.compareFullPage({
-  threshold: 0.05,  // Allow 5% difference for this test
-});
-```
-
----
-
-## Best Practices
-
-### 1. Stable Test Data
-```typescript
-// ❌ Bad: Random data causes failures
-await page.fill('#name', Math.random().toString());
-
-// ✅ Good: Fixed test data
-await page.fill('#name', 'Test User');
-```
-
-### 2. Mask Dynamic Content
-```typescript
-// Mask timestamps, user-specific data, ads
-await visual.compareFullPage({
-  mask: [
-    page.locator('.timestamp'),
-    page.locator('.ad-banner'),
-    page.locator('[data-user-id]')
-  ]
-});
-```
-
-### 3. Wait for Stability
-```typescript
-// Wait for animations/loading
-await page.waitForLoadState('networkidle');
-await page.waitForTimeout(500);  // Allow CSS transitions
-
-await visual.compareFullPage();
-```
-
-### 4. Descriptive Names
-```typescript
-// ❌ Bad
-await visual.compareFullPage({ name: 'test1' });
-
-// ✅ Good
-await visual.compareFullPage({ name: 'checkout-page-logged-in' });
-```
-
-### 5. Cross-Browser Baselines
-```bash
-# Generate baselines per browser
-npx playwright test --update-snapshots --project=chromium
-npx playwright test --update-snapshots --project=firefox
-```
-
-Snapshots are stored separately: `homepage-chromium.png`, `homepage-firefox.png`
-
----
-
-## CI/CD Integration
-
-### GitHub Actions
-```yaml
-- name: Run Visual Tests
-  run: npx playwright test
-
-- name: Upload Visual Diffs
-  if: failure()
-  uses: actions/upload-artifact@v3
-  with:
-    name: visual-diffs
-    path: test-results/
-```
-
-### Baseline Management
-**Option 1**: Commit baselines to Git
-```bash
-git add **/__snapshots__/
-git commit -m "Update visual baselines"
-```
-
-**Option 2**: Store in artifact repository (S3, Artifactory)
-
----
-
-## Troubleshooting
-
-### Issue: Flaky Visual Tests
-**Causes:**
-- Animations not disabled
-- Fonts not loaded
-- Network requests pending
-
-**Solution:**
-```typescript
-await page.waitForLoadState('networkidle');
-await page.evaluate(() => document.fonts.ready);
-await page.waitForTimeout(500);
-```
-
-### Issue: Cross-Platform Differences
-**Cause**: Font rendering differs between OS
-
-**Solution**: Run tests in Docker with consistent environment
-```dockerfile
-FROM mcr.microsoft.com/playwright:v1.42.0-focal
-```
-
-### Issue: Large Snapshot Files
-**Solution**: Use viewport comparison instead of full page
-```typescript
-await visual.compareViewport({ name: 'above-fold' });
-```
-
----
-
-## Example Test Suite
-
-```typescript
-import { test } from '@healthedge/common';
-import { VisualTesting } from '@healthedge/common';
-
-test.describe('Visual Regression Suite', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/');
-    await page.waitForLoadState('networkidle');
-  });
-
-  test('Homepage - Desktop', async ({ page }) => {
-    const visual = new VisualTesting(page);
-    await visual.compareFullPage({ name: 'homepage-desktop' });
-  });
-
-  test('Homepage - Mobile', async ({ page }) => {
-    await page.setViewportSize({ width: 375, height: 667 });
-    const visual = new VisualTesting(page);
-    await visual.compareFullPage({ name: 'homepage-mobile' });
-  });
-
-  test('Login Modal', async ({ page }) => {
-    const visual = new VisualTesting(page);
-    await page.click('#login-btn');
-    
-    const modal = page.locator('.login-modal');
-    await visual.compareElement(modal, { name: 'login-modal' });
-  });
-
-  test('Dashboard - Mask Dynamic', async ({ page }) => {
-    const visual = new VisualTesting(page);
-    await page.goto('/dashboard');
-    
-    await visual.compareFullPage({
-      name: 'dashboard',
-      mask: [
-        page.locator('.last-login-time'),
-        page.locator('.notification-badge')
-      ]
-    });
-  });
-});
-```
-
----
-
-## Allure Integration
-
-Visual test results automatically appear in Allure reports:
-- ✅ **Passed**: Green checkmark
-- ❌ **Failed**: Diff image attached
-- 📸 **Baseline**: Attached for reference
-
-```bash
-npm run report  # View in Allure
-```