@zap-wunschlachen/wl-shared-components 1.0.3 → 1.0.5

package/tests/e2e/visual-regression.spec.ts

@@ -1,351 +1,351 @@
-import { test, expect, Frame } from '@playwright/test';
-import { navigateToStory, getComponentButton, getComponentInput, getComponentElement } from './storybook-utils';
-
-test.describe('Visual Regression Tests', () => {
-  let frame: Frame;
-  
-  test.describe('Core Components Visual Tests', () => {
-    const coreComponents = [
-      { name: 'Button Default', path: '/?path=/story/wl-button--default' },
-      { name: 'Button Outlined', path: '/?path=/story/wl-button--outlined-variant' },
-      { name: 'Button Loading', path: '/?path=/story/wl-button--loading-state' },
-      { name: 'Button Disabled', path: '/?path=/story/wl-button--disabled-state' },
-      { name: 'Input Default', path: '/?path=/story/wl-input--default' },
-      { name: 'Input Success', path: '/?path=/story/wl-input--success' },
-      { name: 'Input Error', path: '/?path=/story/wl-input--error' },
-      { name: 'Input Warning', path: '/?path=/story/wl-input--warning' },
-      { name: 'Select Default', path: '/?path=/story/wl-select--default' },
-      { name: 'Checkbox Default', path: '/?path=/story/wl-checkbox--default' },
-    ];
-
-    coreComponents.forEach(({ name, path }) => {
-      test(`${name} visual regression`, async ({ page }) => {
-        await page.goto(path);
-        await page.waitForSelector('#storybook-preview-iframe', { timeout: 10000 });
-        
-        const frame = page.frame({ url: /iframe\.html/ });
-        if (!frame) throw new Error('Frame not found');
-        
-        await frame.waitForSelector('[data-testid="root"]', { timeout: 10000 });
-        
-        // Wait for any animations to complete
-        await page.waitForTimeout(1000);
-        
-        // Hide dynamic content that might cause flakiness
-        await frame.addStyleTag({
-          content: `
-            /* Hide potentially dynamic content */
-            .v-tooltip { display: none !important; }
-            .v-overlay { display: none !important; }
-            [role="tooltip"] { display: none !important; }
-            .loading-spinner { animation: none !important; }
-          `
-        });
-
-        await expect(frame.locator('[data-testid="root"]').first()).toHaveScreenshot(`${name.toLowerCase().replace(/\s+/g, '-')}.png`, {
-          animations: 'disabled',
-          caret: 'hide'
-        });
-      });
-    });
-  });
-
-  test.describe('Form Components Visual Tests', () => {
-    const formComponents = [
-      { name: 'DateInput Default', path: '/?path=/story/wl-dateinput--default' },
-      { name: 'OtpInput Default', path: '/?path=/story/wl-otpinput--default' },
-      { name: 'PhoneInput Default', path: '/?path=/story/wl-phoneinput--default' },
-      { name: 'TextArea Default', path: '/?path=/story/wl-textarea--default' },
-      { name: 'EditField Default', path: '/?path=/story/wl-editfield--text-field' },
-    ];
-
-    formComponents.forEach(({ name, path }) => {
-      test(`${name} visual regression`, async ({ page }) => {
-        await page.goto(path);
-        await page.waitForSelector('#storybook-preview-iframe', { timeout: 10000 });
-        
-        const frame = page.frame({ url: /iframe\.html/ });
-        if (!frame) throw new Error('Frame not found');
-        
-        await frame.waitForSelector('[data-testid="root"]', { timeout: 10000 });
-        
-        await page.waitForTimeout(1000);
-        
-        await frame.addStyleTag({
-          content: `
-            .v-tooltip { display: none !important; }
-            .v-overlay { display: none !important; }
-            [role="tooltip"] { display: none !important; }
-          `
-        });
-
-        await expect(frame.locator('[data-testid="root"]').first()).toHaveScreenshot(`${name.toLowerCase().replace(/\s+/g, '-')}.png`, {
-          animations: 'disabled',
-          caret: 'hide'
-        });
-      });
-    });
-  });
-
-  test.describe('UI Components Visual Tests', () => {
-    const uiComponents = [
-      { name: 'Accordion Default', path: '/?path=/story/wl-accordion--outlined-inset' },
-      { name: 'Dialog Default', path: '/?path=/story/wl-dialog--default-dialog' },
-      // Modal component doesn't exist in stories - removing
-      // { name: 'Modal Default', path: '/?path=/story/wl-modal--default' },
-      { name: 'NotificationBubble Default', path: '/?path=/story/wl-notificationbubble--default' },
-      { name: 'TickBox Default', path: '/?path=/story/wl-tickbox--default' },
-    ];
-
-    uiComponents.forEach(({ name, path }) => {
-      test(`${name} visual regression`, async ({ page }) => {
-        await page.goto(path);
-        await page.waitForSelector('#storybook-preview-iframe', { timeout: 10000 });
-        
-        const frame = page.frame({ url: /iframe\.html/ });
-        if (!frame) throw new Error('Frame not found');
-        
-        await frame.waitForSelector('[data-testid="root"]', { timeout: 10000 });
-        
-        await page.waitForTimeout(1000);
-        
-        await expect(frame.locator('[data-testid="root"]').first()).toHaveScreenshot(`${name.toLowerCase().replace(/\s+/g, '-')}.png`, {
-          animations: 'disabled',
-          caret: 'hide'
-        });
-      });
-    });
-  });
-
-  test.describe('Laboratory Components Visual Tests', () => {
-    const labComponents = [
-      { name: 'AppointmentCard', path: '/?path=/story/wl-laboratory-cards-appointmentcard--draft-status' },
-      { name: 'DocumentCard', path: '/?path=/story/wl-laboratory-cards-documentcard-documentcard--default' },
-      { name: 'InfoCard', path: '/?path=/story/wl-laboratory-cards-infocard--draft-done' },
-      { name: 'TicketCard', path: '/?path=/story/wl-laboratory-cards-ticketcard--default' },
-      { name: 'ChatMessage', path: '/?path=/story/wl-laboratory-chat-chatmessage--income-message' },
-      { name: 'ChatNotification', path: '/?path=/story/wl-laboratory-chat-chatnotification--empty' },
-      { name: 'ProgressCircle', path: '/?path=/story/wl-laboratory-progresscircle--default' },
-      { name: 'TagLabel', path: '/?path=/story/wl-laboratory-taglabel--draft' },
-      // TagLabelGroup doesn't have its own stories - removing
-      // { name: 'TagLabelGroup', path: '/?path=/story/laboratory-taglabelgroup--default' },
-      // Timeline doesn't have its own stories - removing
-      // { name: 'Timeline', path: '/?path=/story/laboratory-timeline--default' },
-    ];
-
-    labComponents.forEach(({ name, path }) => {
-      test(`${name} visual regression`, async ({ page }) => {
-        await page.goto(path);
-        await page.waitForSelector('#storybook-preview-iframe', { timeout: 10000 });
-        
-        const frame = page.frame({ url: /iframe\.html/ });
-        if (!frame) throw new Error('Frame not found');
-        
-        await frame.waitForSelector('[data-testid="root"]', { timeout: 10000 });
-        
-        await page.waitForTimeout(1000);
-        
-        await frame.addStyleTag({
-          content: `
-            .v-tooltip { display: none !important; }
-            [role="tooltip"] { display: none !important; }
-            .loading-spinner { animation: none !important; }
-            .v-progress-circular { animation: none !important; }
-          `
-        });
-
-        await expect(frame.locator('[data-testid="root"]').first()).toHaveScreenshot(`lab-${name.toLowerCase()}.png`, {
-          animations: 'disabled',
-          caret: 'hide'
-        });
-      });
-    });
-  });
-
-  test.describe('Component States Visual Tests', () => {
-    test('button states comparison', async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-button--default');
-      
-      // Create a composite screenshot of different button states
-      await page.addStyleTag({
-        content: `
-          body { 
-            display: flex !important;
-            gap: 20px !important;
-            padding: 20px !important;
-            background: white !important;
-          }
-        `
-      });
-
-      await expect(page).toHaveScreenshot('button-states-composite.png', {
-        fullPage: false,
-        animations: 'disabled'
-      });
-    });
-
-    test('input validation states', async ({ page }) => {
-      const states = ['default', 'success', 'error', 'warning'];
-      
-      for (const state of states) {
-        try {
-          await page.goto(`/?path=/story/wl-input--${state}`);
-          await page.waitForSelector('#storybook-preview-iframe', { timeout: 5000 });
-          
-          const frame = page.frame({ url: /iframe\.html/ });
-          if (!frame) throw new Error('Frame not found');
-          
-          await frame.waitForSelector('[data-testid="root"]', { timeout: 5000 });
-          await page.waitForTimeout(500);
-          
-          await expect(frame.locator('[data-testid="root"]')).toHaveScreenshot(`input-state-${state}.png`, {
-            animations: 'disabled',
-            caret: 'hide'
-          });
-        } catch (error) {
-          console.log(`Input state ${state} test skipped`);
-        }
-      }
-    });
-  });
-
-  test.describe('Responsive Visual Tests', () => {
-    const viewports = [
-      { name: 'Mobile', width: 375, height: 667 },
-      { name: 'Tablet', width: 768, height: 1024 },
-      { name: 'Desktop', width: 1200, height: 800 }
-    ];
-
-    const responsiveComponents = [
-      '/?path=/story/wl-button--default',
-      '/?path=/story/wl-input--default',
-      '/?path=/story/wl-laboratory-cards-appointmentcard--draft-status'
-    ];
-
-    viewports.forEach(({ name, width, height }) => {
-      responsiveComponents.forEach((component, index) => {
-        test(`responsive ${name.toLowerCase()} - component ${index + 1}`, async ({ page }) => {
-          await page.setViewportSize({ width, height });
-          
-          try {
-            await page.goto(component);
-            await page.waitForSelector('#storybook-preview-iframe', { timeout: 5000 });
-            
-            const frame = page.frame({ url: /iframe\.html/ });
-            if (!frame) throw new Error('Frame not found');
-            
-            await frame.waitForSelector('[data-testid="root"]', { timeout: 5000 });
-            await page.waitForTimeout(1000);
-            
-            await expect(frame.locator('[data-testid="root"]')).toHaveScreenshot(`responsive-${name.toLowerCase()}-component-${index + 1}.png`, {
-              animations: 'disabled'
-            });
-          } catch (error) {
-            console.log(`Responsive test skipped for ${component} on ${name}`);
-            test.skip();
-          }
-        });
-      });
-    });
-  });
-
-  test.describe('Dark Mode Visual Tests', () => {
-    test.beforeEach(async ({ page }) => {
-      // Enable dark mode if supported
-      await page.addStyleTag({
-        content: `
-          :root { color-scheme: dark; }
-          body { background: #1a1a1a; color: white; }
-          .v-theme--light { 
-            background: #1a1a1a !important;
-            color: white !important;
-          }
-        `
-      });
-    });
-
-    const darkModeComponents = [
-      '/?path=/story/wl-button--default',
-      '/?path=/story/wl-input--default',
-      '/?path=/story/wl-select--default'
-    ];
-
-    darkModeComponents.forEach((component, index) => {
-      test(`dark mode component ${index + 1}`, async ({ page }) => {
-        try {
-          await page.goto(component);
-          await page.waitForSelector('#storybook-preview-iframe', { timeout: 5000 });
-          
-          const frame = page.frame({ url: /iframe\.html/ });
-          if (!frame) throw new Error('Frame not found');
-          
-          await frame.waitForSelector('[data-testid="root"]', { timeout: 5000 });
-          await page.waitForTimeout(1000);
-          
-          await expect(frame.locator('[data-testid="root"]')).toHaveScreenshot(`dark-mode-component-${index + 1}.png`, {
-            animations: 'disabled'
-          });
-        } catch (error) {
-          console.log(`Dark mode test skipped for ${component}`);
-          test.skip();
-        }
-      });
-    });
-  });
-
-  test.describe('Interactive States Visual Tests', () => {
-    test('button hover and focus states', async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-button--default');
-      
-      // Find the actual button component, not the "Set string" button
-      const button = frame.locator('button.v-btn').filter({ hasNotText: 'Set string' }).first();
-      
-      // Normal state
-      await expect(frame.locator('[data-testid="root"]').first()).toHaveScreenshot('button-normal-state.png', {
-        animations: 'disabled'
-      });
-      
-      // Hover state
-      await button.hover();
-      await page.waitForTimeout(300);
-      await expect(frame.locator('[data-testid="root"]').first()).toHaveScreenshot('button-hover-state.png', {
-        animations: 'disabled'
-      });
-      
-      // Focus state
-      await button.focus();
-      await page.waitForTimeout(300);
-      await expect(frame.locator('[data-testid="root"]').first()).toHaveScreenshot('button-focus-state.png', {
-        animations: 'disabled'
-      });
-    });
-
-    test('input focus and filled states', async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-input--default');
-      
-      const input = frame.locator('input, .v-field input').first();
-      
-      // Normal state
-      await expect(page).toHaveScreenshot('input-normal-state.png', {
-        animations: 'disabled',
-        caret: 'hide'
-      });
-      
-      // Focus state
-      await input.focus();
-      await page.waitForTimeout(300);
-      await expect(page).toHaveScreenshot('input-focus-state.png', {
-        animations: 'disabled',
-        caret: 'hide'
-      });
-      
-      // Filled state
-      await input.fill('Sample text');
-      await page.waitForTimeout(300);
-      await expect(page).toHaveScreenshot('input-filled-state.png', {
-        animations: 'disabled',
-        caret: 'hide'
-      });
-    });
-  });
+import { test, expect, Frame } from '@playwright/test';
+import { navigateToStory, getComponentButton, getComponentInput, getComponentElement } from './storybook-utils';
+
+test.describe('Visual Regression Tests', () => {
+  let frame: Frame;
+  
+  test.describe('Core Components Visual Tests', () => {
+    const coreComponents = [
+      { name: 'Button Default', path: '/?path=/story/wl-button--default' },
+      { name: 'Button Outlined', path: '/?path=/story/wl-button--outlined-variant' },
+      { name: 'Button Loading', path: '/?path=/story/wl-button--loading-state' },
+      { name: 'Button Disabled', path: '/?path=/story/wl-button--disabled-state' },
+      { name: 'Input Default', path: '/?path=/story/wl-input--default' },
+      { name: 'Input Success', path: '/?path=/story/wl-input--success' },
+      { name: 'Input Error', path: '/?path=/story/wl-input--error' },
+      { name: 'Input Warning', path: '/?path=/story/wl-input--warning' },
+      { name: 'Select Default', path: '/?path=/story/wl-select--default' },
+      { name: 'Checkbox Default', path: '/?path=/story/wl-checkbox--default' },
+    ];
+
+    coreComponents.forEach(({ name, path }) => {
+      test(`${name} visual regression`, async ({ page }) => {
+        await page.goto(path);
+        await page.waitForSelector('#storybook-preview-iframe', { timeout: 10000 });
+        
+        const frame = page.frame({ url: /iframe\.html/ });
+        if (!frame) throw new Error('Frame not found');
+        
+        await frame.waitForSelector('[data-testid="root"]', { timeout: 10000 });
+        
+        // Wait for any animations to complete
+        await page.waitForTimeout(1000);
+        
+        // Hide dynamic content that might cause flakiness
+        await frame.addStyleTag({
+          content: `
+            /* Hide potentially dynamic content */
+            .v-tooltip { display: none !important; }
+            .v-overlay { display: none !important; }
+            [role="tooltip"] { display: none !important; }
+            .loading-spinner { animation: none !important; }
+          `
+        });
+
+        await expect(frame.locator('[data-testid="root"]').first()).toHaveScreenshot(`${name.toLowerCase().replace(/\s+/g, '-')}.png`, {
+          animations: 'disabled',
+          caret: 'hide'
+        });
+      });
+    });
+  });
+
+  test.describe('Form Components Visual Tests', () => {
+    const formComponents = [
+      { name: 'DateInput Default', path: '/?path=/story/wl-dateinput--default' },
+      { name: 'OtpInput Default', path: '/?path=/story/wl-otpinput--default' },
+      { name: 'PhoneInput Default', path: '/?path=/story/wl-phoneinput--default' },
+      { name: 'TextArea Default', path: '/?path=/story/wl-textarea--default' },
+      { name: 'EditField Default', path: '/?path=/story/wl-editfield--text-field' },
+    ];
+
+    formComponents.forEach(({ name, path }) => {
+      test(`${name} visual regression`, async ({ page }) => {
+        await page.goto(path);
+        await page.waitForSelector('#storybook-preview-iframe', { timeout: 10000 });
+        
+        const frame = page.frame({ url: /iframe\.html/ });
+        if (!frame) throw new Error('Frame not found');
+        
+        await frame.waitForSelector('[data-testid="root"]', { timeout: 10000 });
+        
+        await page.waitForTimeout(1000);
+        
+        await frame.addStyleTag({
+          content: `
+            .v-tooltip { display: none !important; }
+            .v-overlay { display: none !important; }
+            [role="tooltip"] { display: none !important; }
+          `
+        });
+
+        await expect(frame.locator('[data-testid="root"]').first()).toHaveScreenshot(`${name.toLowerCase().replace(/\s+/g, '-')}.png`, {
+          animations: 'disabled',
+          caret: 'hide'
+        });
+      });
+    });
+  });
+
+  test.describe('UI Components Visual Tests', () => {
+    const uiComponents = [
+      { name: 'Accordion Default', path: '/?path=/story/wl-accordion--outlined-inset' },
+      { name: 'Dialog Default', path: '/?path=/story/wl-dialog--default-dialog' },
+      // Modal component doesn't exist in stories - removing
+      // { name: 'Modal Default', path: '/?path=/story/wl-modal--default' },
+      { name: 'NotificationBubble Default', path: '/?path=/story/wl-notificationbubble--default' },
+      { name: 'TickBox Default', path: '/?path=/story/wl-tickbox--default' },
+    ];
+
+    uiComponents.forEach(({ name, path }) => {
+      test(`${name} visual regression`, async ({ page }) => {
+        await page.goto(path);
+        await page.waitForSelector('#storybook-preview-iframe', { timeout: 10000 });
+        
+        const frame = page.frame({ url: /iframe\.html/ });
+        if (!frame) throw new Error('Frame not found');
+        
+        await frame.waitForSelector('[data-testid="root"]', { timeout: 10000 });
+        
+        await page.waitForTimeout(1000);
+        
+        await expect(frame.locator('[data-testid="root"]').first()).toHaveScreenshot(`${name.toLowerCase().replace(/\s+/g, '-')}.png`, {
+          animations: 'disabled',
+          caret: 'hide'
+        });
+      });
+    });
+  });
+
+  test.describe('Laboratory Components Visual Tests', () => {
+    const labComponents = [
+      { name: 'AppointmentCard', path: '/?path=/story/wl-laboratory-cards-appointmentcard--draft-status' },
+      { name: 'DocumentCard', path: '/?path=/story/wl-laboratory-cards-documentcard-documentcard--default' },
+      { name: 'InfoCard', path: '/?path=/story/wl-laboratory-cards-infocard--draft-done' },
+      { name: 'TicketCard', path: '/?path=/story/wl-laboratory-cards-ticketcard--default' },
+      { name: 'ChatMessage', path: '/?path=/story/wl-laboratory-chat-chatmessage--income-message' },
+      { name: 'ChatNotification', path: '/?path=/story/wl-laboratory-chat-chatnotification--empty' },
+      { name: 'ProgressCircle', path: '/?path=/story/wl-laboratory-progresscircle--default' },
+      { name: 'TagLabel', path: '/?path=/story/wl-laboratory-taglabel--draft' },
+      // TagLabelGroup doesn't have its own stories - removing
+      // { name: 'TagLabelGroup', path: '/?path=/story/laboratory-taglabelgroup--default' },
+      // Timeline doesn't have its own stories - removing
+      // { name: 'Timeline', path: '/?path=/story/laboratory-timeline--default' },
+    ];
+
+    labComponents.forEach(({ name, path }) => {
+      test(`${name} visual regression`, async ({ page }) => {
+        await page.goto(path);
+        await page.waitForSelector('#storybook-preview-iframe', { timeout: 10000 });
+        
+        const frame = page.frame({ url: /iframe\.html/ });
+        if (!frame) throw new Error('Frame not found');
+        
+        await frame.waitForSelector('[data-testid="root"]', { timeout: 10000 });
+        
+        await page.waitForTimeout(1000);
+        
+        await frame.addStyleTag({
+          content: `
+            .v-tooltip { display: none !important; }
+            [role="tooltip"] { display: none !important; }
+            .loading-spinner { animation: none !important; }
+            .v-progress-circular { animation: none !important; }
+          `
+        });
+
+        await expect(frame.locator('[data-testid="root"]').first()).toHaveScreenshot(`lab-${name.toLowerCase()}.png`, {
+          animations: 'disabled',
+          caret: 'hide'
+        });
+      });
+    });
+  });
+
+  test.describe('Component States Visual Tests', () => {
+    test('button states comparison', async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-button--default');
+      
+      // Create a composite screenshot of different button states
+      await page.addStyleTag({
+        content: `
+          body { 
+            display: flex !important;
+            gap: 20px !important;
+            padding: 20px !important;
+            background: white !important;
+          }
+        `
+      });
+
+      await expect(page).toHaveScreenshot('button-states-composite.png', {
+        fullPage: false,
+        animations: 'disabled'
+      });
+    });
+
+    test('input validation states', async ({ page }) => {
+      const states = ['default', 'success', 'error', 'warning'];
+      
+      for (const state of states) {
+        try {
+          await page.goto(`/?path=/story/wl-input--${state}`);
+          await page.waitForSelector('#storybook-preview-iframe', { timeout: 5000 });
+          
+          const frame = page.frame({ url: /iframe\.html/ });
+          if (!frame) throw new Error('Frame not found');
+          
+          await frame.waitForSelector('[data-testid="root"]', { timeout: 5000 });
+          await page.waitForTimeout(500);
+          
+          await expect(frame.locator('[data-testid="root"]')).toHaveScreenshot(`input-state-${state}.png`, {
+            animations: 'disabled',
+            caret: 'hide'
+          });
+        } catch (error) {
+          console.log(`Input state ${state} test skipped`);
+        }
+      }
+    });
+  });
+
+  test.describe('Responsive Visual Tests', () => {
+    const viewports = [
+      { name: 'Mobile', width: 375, height: 667 },
+      { name: 'Tablet', width: 768, height: 1024 },
+      { name: 'Desktop', width: 1200, height: 800 }
+    ];
+
+    const responsiveComponents = [
+      '/?path=/story/wl-button--default',
+      '/?path=/story/wl-input--default',
+      '/?path=/story/wl-laboratory-cards-appointmentcard--draft-status'
+    ];
+
+    viewports.forEach(({ name, width, height }) => {
+      responsiveComponents.forEach((component, index) => {
+        test(`responsive ${name.toLowerCase()} - component ${index + 1}`, async ({ page }) => {
+          await page.setViewportSize({ width, height });
+          
+          try {
+            await page.goto(component);
+            await page.waitForSelector('#storybook-preview-iframe', { timeout: 5000 });
+            
+            const frame = page.frame({ url: /iframe\.html/ });
+            if (!frame) throw new Error('Frame not found');
+            
+            await frame.waitForSelector('[data-testid="root"]', { timeout: 5000 });
+            await page.waitForTimeout(1000);
+            
+            await expect(frame.locator('[data-testid="root"]')).toHaveScreenshot(`responsive-${name.toLowerCase()}-component-${index + 1}.png`, {
+              animations: 'disabled'
+            });
+          } catch (error) {
+            console.log(`Responsive test skipped for ${component} on ${name}`);
+            test.skip();
+          }
+        });
+      });
+    });
+  });
+
+  test.describe('Dark Mode Visual Tests', () => {
+    test.beforeEach(async ({ page }) => {
+      // Enable dark mode if supported
+      await page.addStyleTag({
+        content: `
+          :root { color-scheme: dark; }
+          body { background: #1a1a1a; color: white; }
+          .v-theme--light { 
+            background: #1a1a1a !important;
+            color: white !important;
+          }
+        `
+      });
+    });
+
+    const darkModeComponents = [
+      '/?path=/story/wl-button--default',
+      '/?path=/story/wl-input--default',
+      '/?path=/story/wl-select--default'
+    ];
+
+    darkModeComponents.forEach((component, index) => {
+      test(`dark mode component ${index + 1}`, async ({ page }) => {
+        try {
+          await page.goto(component);
+          await page.waitForSelector('#storybook-preview-iframe', { timeout: 5000 });
+          
+          const frame = page.frame({ url: /iframe\.html/ });
+          if (!frame) throw new Error('Frame not found');
+          
+          await frame.waitForSelector('[data-testid="root"]', { timeout: 5000 });
+          await page.waitForTimeout(1000);
+          
+          await expect(frame.locator('[data-testid="root"]')).toHaveScreenshot(`dark-mode-component-${index + 1}.png`, {
+            animations: 'disabled'
+          });
+        } catch (error) {
+          console.log(`Dark mode test skipped for ${component}`);
+          test.skip();
+        }
+      });
+    });
+  });
+
+  test.describe('Interactive States Visual Tests', () => {
+    test('button hover and focus states', async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-button--default');
+      
+      // Find the actual button component, not the "Set string" button
+      const button = frame.locator('button.v-btn').filter({ hasNotText: 'Set string' }).first();
+      
+      // Normal state
+      await expect(frame.locator('[data-testid="root"]').first()).toHaveScreenshot('button-normal-state.png', {
+        animations: 'disabled'
+      });
+      
+      // Hover state
+      await button.hover();
+      await page.waitForTimeout(300);
+      await expect(frame.locator('[data-testid="root"]').first()).toHaveScreenshot('button-hover-state.png', {
+        animations: 'disabled'
+      });
+      
+      // Focus state
+      await button.focus();
+      await page.waitForTimeout(300);
+      await expect(frame.locator('[data-testid="root"]').first()).toHaveScreenshot('button-focus-state.png', {
+        animations: 'disabled'
+      });
+    });
+
+    test('input focus and filled states', async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-input--default');
+      
+      const input = frame.locator('input, .v-field input').first();
+      
+      // Normal state
+      await expect(page).toHaveScreenshot('input-normal-state.png', {
+        animations: 'disabled',
+        caret: 'hide'
+      });
+      
+      // Focus state
+      await input.focus();
+      await page.waitForTimeout(300);
+      await expect(page).toHaveScreenshot('input-focus-state.png', {
+        animations: 'disabled',
+        caret: 'hide'
+      });
+      
+      // Filled state
+      await input.fill('Sample text');
+      await page.waitForTimeout(300);
+      await expect(page).toHaveScreenshot('input-filled-state.png', {
+        animations: 'disabled',
+        caret: 'hide'
+      });
+    });
+  });
 });