@fdm-monster/client-next 2.2.2 → 2.2.3

package/screenshots/playwright.screenshots.config.ts

@@ -0,0 +1,70 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Playwright configuration for automated documentation screenshots
+ * Chrome-only, desktop-focused configuration for screenshot automation
+ * See https://playwright.dev/docs/test-configuration
+ */
+export default defineConfig({
+  testDir: './suites',
+
+  // Screenshot tests can take longer due to waiting for animations
+  timeout: 90 * 1000,
+
+  // Run tests sequentially for predictable screenshot generation
+  fullyParallel: false,
+
+  // Fail the build on CI if you accidentally left test.only in the source code
+  forbidOnly: !!process.env.CI,
+
+  // Retry on CI only
+  retries: process.env.CI ? 2 : 0,
+
+  // Reporters
+  reporter: [
+    ['html', { outputFolder: 'playwright-report' }],
+    ['list']
+  ],
+
+  // Shared settings for all projects
+  use: {
+    // Base URL to use in actions like `await page.goto('/')`
+    baseURL: process.env.BASE_URL || 'http://localhost:3000',
+
+    // Collect trace when retrying failed tests
+    trace: 'retain-on-failure',
+
+    // Screenshot configuration
+    screenshot: 'only-on-failure',
+
+    // Video configuration - only on failure to help debug
+    video: 'retain-on-failure',
+
+    // Consistent viewport for all desktop screenshots
+    viewport: { width: 1920, height: 1080 },
+
+    // Allow more time for screenshot operations
+    actionTimeout: 10 * 1000,
+  },
+
+  // CHROME ONLY - Desktop focus, no mobile/tablet matrix (for now)
+  projects: [
+    {
+      name: 'chrome-screenshots',
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: { width: 1920, height: 1080 },
+        // Enable headed mode via HEADED=1 environment variable for debugging
+        headless: !process.env.HEADED,
+      },
+    },
+  ],
+
+  // Conditional webServer - skip if SKIP_DEV_SERVER=1 (for CI where server runs separately)
+  webServer: process.env.SKIP_DEV_SERVER ? undefined : {
+    command: 'yarn dev',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120 * 1000,
+  },
+});

package/screenshots/suites/00-example.screenshots.spec.ts

@@ -0,0 +1,29 @@
+import { test, expect } from '../fixtures/test-fixtures';
+import { captureFullPage } from '../utils';
+import { createNavigationHelper } from '../helpers/navigation.helper';
+
+/**
+ * Example Screenshot Test
+ * A single, complete example showing the full workflow
+ */
+test('example-dashboard-screenshot', async ({ authenticatedPage, apiMock }) => {
+  // 1. Mock all API endpoints with default data
+  await apiMock.mockAllEndpoints({ loginRequired: false });
+
+  // 2. Navigate to the page you want to capture
+  const nav = createNavigationHelper(authenticatedPage);
+  await nav.goToDashboard();
+
+  // 3. Wait for content to load
+  await authenticatedPage.waitForSelector('main, [data-testid="dashboard"]', {
+    timeout: 5000,
+  }).catch(() => {});
+
+  // 4. Optional: wait a bit more for animations/dynamic content
+  await authenticatedPage.waitForTimeout(1000);
+
+  // 5. Capture the screenshot
+  await captureFullPage(authenticatedPage, 'example-dashboard.png', 'examples');
+
+  // Done! Screenshot saved to screenshots/output/examples/example-dashboard.png
+});

package/screenshots/suites/01-auth.screenshots.spec.ts

@@ -0,0 +1,130 @@
+import { test, expect } from '../fixtures/test-fixtures';
+import { captureFullPage, captureElement } from '../utils';
+import { createFormHelper } from '../helpers/form.helper';
+import { createNavigationHelper } from '../helpers/navigation.helper';
+
+/**
+ * Authentication Screenshots
+ * Captures: First Time Setup, Login, Registration pages
+ */
+test.describe('Authentication Screenshots', () => {
+  test('01-first-time-setup-wizard', async ({ page, apiMock }) => {
+    // Mock all endpoints with wizard incomplete
+    await apiMock.mockAllEndpoints({
+      loginRequired: false,
+      emptyData: false,
+    });
+
+    // Override auth endpoints to show wizard incomplete
+    await apiMock.mockAuthEndpoints({
+      loginRequired: false,
+      wizardIncomplete: true,
+    });
+
+    // Navigate to first time setup
+    const nav = createNavigationHelper(page);
+    await nav.goToFirstTimeSetup();
+
+    // Wait for page to render
+    await page.waitForSelector('[data-testid="wizard-container"], .first-time-setup, .wizard', {
+      timeout: 5000,
+    }).catch(() => {});
+
+    // Capture the wizard page
+    await captureFullPage(page, 'first-time-setup-wizard.png', 'auth');
+  });
+
+  test('02-login-page', async ({ page, apiMock }) => {
+    // Mock all endpoints with login required
+    await apiMock.mockAllEndpoints({ loginRequired: true });
+
+    // Navigate to login page
+    const nav = createNavigationHelper(page);
+    await nav.goToLogin();
+
+    // Wait for login form
+    await page.waitForSelector('[name="username"], input[type="text"]', {
+      timeout: 5000,
+    }).catch(() => {});
+
+    // Capture empty login page
+    await captureFullPage(page, 'login-page-empty.png', 'auth');
+  });
+
+  test('03-login-page-filled', async ({ page, apiMock }) => {
+    // Mock all endpoints with login required
+    await apiMock.mockAllEndpoints({ loginRequired: true });
+
+    // Navigate to login page
+    const nav = createNavigationHelper(page);
+    await nav.goToLogin();
+
+    // Wait for login form - try multiple selectors
+    await page.waitForSelector('input[type="text"], input[type="email"], .v-text-field input', {
+      timeout: 5000,
+    }).catch(() => {});
+
+    await page.waitForTimeout(1000);
+
+    // Fill login form directly without helper (more reliable)
+    const usernameInput = page.locator('input').first();
+    const passwordInput = page.locator('input[type="password"]').first();
+
+    await usernameInput.fill('admin');
+    await passwordInput.fill('password123');
+
+    // Capture filled login page
+    await captureFullPage(page, 'login-page-filled.png', 'auth');
+  });
+
+  test('04-registration-page', async ({ page, apiMock }) => {
+    // Mock all endpoints first
+    await apiMock.mockAllEndpoints({ loginRequired: false });
+
+    // Override auth with registration enabled
+    await apiMock.mockAuthEndpoints({ registrationEnabled: true });
+
+    // Navigate to registration page
+    const nav = createNavigationHelper(page);
+    await nav.goToRegister();
+
+    // Wait for registration form
+    await page.waitForSelector('[name="username"], input[type="text"]', {
+      timeout: 5000,
+    }).catch(() => {});
+
+    // Capture empty registration page
+    await captureFullPage(page, 'registration-page-empty.png', 'auth');
+  });
+
+  test('05-registration-page-filled', async ({ page, apiMock }) => {
+    // Mock all endpoints first
+    await apiMock.mockAllEndpoints({ loginRequired: false });
+
+    // Override auth with registration enabled
+    await apiMock.mockAuthEndpoints({ registrationEnabled: true });
+
+    // Navigate to registration page
+    const nav = createNavigationHelper(page);
+    await nav.goToRegister();
+
+    // Wait for registration form
+    await page.waitForSelector('input[type="text"], input[type="email"], .v-text-field input', {
+      timeout: 5000,
+    }).catch(() => {});
+
+    await page.waitForTimeout(1000);
+
+    // Fill registration form directly (more reliable)
+    const inputs = page.locator('input');
+    const usernameInput = inputs.first();
+    const passwordInputs = page.locator('input[type="password"]');
+
+    await usernameInput.fill('newuser');
+    await passwordInputs.first().fill('securePassword123');
+    await passwordInputs.nth(1).fill('securePassword123');
+
+    // Capture filled registration page
+    await captureFullPage(page, 'registration-page-filled.png', 'auth');
+  });
+});

package/screenshots/suites/02-dashboard.screenshots.spec.ts

@@ -0,0 +1,106 @@
+import { test, expect } from '../fixtures/test-fixtures';
+import { captureFullPage, captureViewport } from '../utils';
+import { createNavigationHelper } from '../helpers/navigation.helper';
+
+/**
+ * Dashboard Screenshots
+ * Captures: Dashboard overview, stats widgets, recent activity
+ */
+test.describe('Dashboard Screenshots', () => {
+  test.beforeEach(async ({ apiMock }) => {
+    // Mock all endpoints for authenticated dashboard
+    await apiMock.mockAllEndpoints({ loginRequired: false });
+  });
+
+  test('01-dashboard-overview', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+
+    // Navigate to dashboard
+    await nav.goToDashboard();
+
+    // Wait for dashboard content to load
+    await authenticatedPage.waitForSelector(
+      '[data-testid="dashboard"], .dashboard, main',
+      { timeout: 5000 }
+    ).catch(() => {});
+
+    // Additional wait for stats to populate
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Capture full dashboard page
+    await captureFullPage(authenticatedPage, 'dashboard-overview.png', 'dashboard');
+  });
+
+  test('02-dashboard-viewport', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+
+    // Navigate to dashboard
+    await nav.goToDashboard();
+
+    // Wait for dashboard content
+    await authenticatedPage.waitForSelector(
+      '[data-testid="dashboard"], .dashboard, main',
+      { timeout: 5000 }
+    ).catch(() => {});
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Capture viewport (above the fold)
+    await captureViewport(authenticatedPage, 'dashboard-viewport.png', 'dashboard');
+  });
+
+  test('03-dashboard-stats-widgets', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+
+    // Navigate to dashboard
+    await nav.goToDashboard();
+
+    // Wait for stats widgets
+    await authenticatedPage.waitForSelector(
+      '[data-testid="stats-widget"], .stats-card, .statistics',
+      { timeout: 5000 }
+    ).catch(() => {});
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Try to capture stats section if it exists
+    const statsSection = authenticatedPage.locator(
+      '[data-testid="stats-section"], .stats-container, .dashboard-stats'
+    ).first();
+
+    if (await statsSection.isVisible().catch(() => false)) {
+      await statsSection.screenshot({
+        path: 'screenshots/output/dashboard/stats-widgets.png',
+      });
+    } else {
+      // Fallback to full page if specific stats section not found
+      await captureFullPage(authenticatedPage, 'stats-widgets.png', 'dashboard');
+    }
+  });
+
+  test('04-dashboard-empty-state', async ({ page, apiMock }) => {
+    // Mock with empty data
+    await apiMock.mockAllEndpoints({ loginRequired: false, emptyData: true });
+
+    // Setup authenticated page
+    await page.goto('/');
+    await page.evaluate(() => {
+      localStorage.setItem('auth-token', 'mock-jwt-token');
+      localStorage.setItem('refresh-token', 'mock-refresh-token');
+    });
+
+    const nav = createNavigationHelper(page);
+    await nav.goToDashboard();
+
+    // Wait for empty state
+    await page.waitForSelector(
+      '[data-testid="empty-state"], .empty-state, main',
+      { timeout: 5000 }
+    ).catch(() => {});
+
+    await page.waitForTimeout(1000);
+
+    // Capture empty dashboard
+    await captureFullPage(page, 'dashboard-empty-state.png', 'dashboard');
+  });
+});

package/screenshots/suites/03-printer-grid.screenshots.spec.ts

@@ -0,0 +1,160 @@
+import { test, expect } from '../fixtures/test-fixtures';
+import { captureFullPage, captureElement } from '../utils';
+import { createNavigationHelper } from '../helpers/navigation.helper';
+import { createDialogHelper } from '../helpers/dialog.helper';
+
+/**
+ * Printer Grid Screenshots
+ * Captures: Empty grid, grid with printers, creating floor/printer, drag operations, batch bar, upload progress
+ */
+test.describe('Printer Grid Screenshots', () => {
+  test.beforeEach(async ({ apiMock }) => {
+    await apiMock.mockAllEndpoints({ loginRequired: false });
+  });
+
+  test('01-printer-grid-empty', async ({ authenticatedPage, apiMock }) => {
+    // Mock with empty data
+    await apiMock.mockAllEndpoints({ loginRequired: false, emptyData: true });
+
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToPrinterGrid();
+
+    // Wait for grid to load
+    await authenticatedPage.waitForSelector(
+      '[data-testid="printer-grid"], .printer-grid, main',
+      { timeout: 5000 }
+    ).catch(() => {});
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    await captureFullPage(authenticatedPage, 'printer-grid-empty.png', 'printer-grid');
+  });
+
+  test('02-printer-grid-with-printers', async ({ authenticatedPage, apiMock }) => {
+    // Explicitly mock with data (not empty)
+    await apiMock.mockAllEndpoints({ loginRequired: false, emptyData: false });
+
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToPrinterGrid();
+
+    // Wait for toolbar with floor tabs to appear (indicates floors are loaded)
+    await authenticatedPage.waitForSelector(
+      'v-btn-toggle:has(button:has-text("Main Workshop")), .v-btn-group:has(button:has-text("Main")), button:has-text("Main")',
+      { timeout: 5000 }
+    ).catch(() => {});
+
+    // Also wait for printer tiles to appear
+    await authenticatedPage.waitForSelector(
+      '.printer-card, [data-testid="printer-card"], .printer-tile',
+      { timeout: 5000 }
+    ).catch(() => {});
+
+    await authenticatedPage.waitForTimeout(1500);
+
+    await captureFullPage(authenticatedPage, 'printer-grid-with-printers.png', 'printer-grid');
+  });
+
+  test('03-create-floor-dialog', async ({ authenticatedPage, apiMock }) => {
+    // Use empty floors so "Create First Floor" button appears
+    await apiMock.mockAllEndpoints({ loginRequired: false, emptyData: true });
+
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToPrinterGrid();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Click "Create First Floor" button (only appears when no floors exist)
+    const createFloorBtn = authenticatedPage.locator('button').filter({ hasText: /create.*first.*floor/i }).first();
+    await createFloorBtn.click();
+
+    // Wait for dialog
+    const dialog = createDialogHelper(authenticatedPage);
+    await dialog.waitForDialog();
+
+    await authenticatedPage.waitForTimeout(500);
+
+    await captureFullPage(authenticatedPage, 'create-floor-dialog.png', 'printer-grid');
+  });
+
+  test('04-create-printer-dialog', async ({ authenticatedPage, apiMock }) => {
+    // Mock with data so printers list page shows normally
+    await apiMock.mockAllEndpoints({ loginRequired: false, emptyData: false });
+
+    // Navigate to Printer List page (not grid) where "Create Printer" button exists
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToPrinterList();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Click "Create Printer" button
+    const createPrinterBtn = authenticatedPage.locator('button').filter({ hasText: /create.*printer/i }).first();
+    await createPrinterBtn.click();
+
+    // Wait for dialog
+    const dialog = createDialogHelper(authenticatedPage);
+    await dialog.waitForDialog();
+
+    await authenticatedPage.waitForTimeout(500);
+
+    await captureFullPage(authenticatedPage, 'create-printer-dialog.png', 'printer-grid');
+  });
+
+  test('05-printer-grid-drag-hint', async ({ authenticatedPage, apiMock }) => {
+    await apiMock.mockAllEndpoints({ loginRequired: false, emptyData: false });
+
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToPrinterGrid();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Try to trigger drag state by hovering over a printer card
+    const printerCard = authenticatedPage.locator('.printer-card, [data-testid="printer-card"]').first();
+    if (await printerCard.isVisible().catch(() => false)) {
+      await printerCard.hover();
+      await authenticatedPage.waitForTimeout(500);
+    }
+
+    await captureFullPage(authenticatedPage, 'printer-grid-drag-hint.png', 'printer-grid');
+  });
+
+  test('06-batch-operations-bar', async ({ authenticatedPage, apiMock }) => {
+    await apiMock.mockAllEndpoints({ loginRequired: false, emptyData: false });
+
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToPrinterGrid();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Try to select multiple printers
+    const printerCards = authenticatedPage.locator('.printer-card, [data-testid="printer-card"]');
+    const count = await printerCards.count().catch(() => 0);
+
+    if (count >= 2) {
+      // Click first printer with shift/ctrl
+      await printerCards.nth(0).click({ modifiers: ['Shift'] });
+      await authenticatedPage.waitForTimeout(300);
+      await printerCards.nth(1).click({ modifiers: ['Shift'] });
+      await authenticatedPage.waitForTimeout(500);
+    }
+
+    await captureFullPage(authenticatedPage, 'batch-operations-bar.png', 'printer-grid');
+  });
+
+  test('07-printer-grid-context-menu', async ({ authenticatedPage, apiMock }) => {
+    await apiMock.mockAllEndpoints({ loginRequired: false, emptyData: false });
+
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToPrinterGrid();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Right-click on a printer card
+    const printerCard = authenticatedPage.locator('.printer-card, [data-testid="printer-card"]').first();
+    if (await printerCard.isVisible().catch(() => false)) {
+      await printerCard.click({ button: 'right' });
+      await authenticatedPage.waitForTimeout(500);
+    }
+
+    await captureFullPage(authenticatedPage, 'printer-grid-context-menu.png', 'printer-grid');
+  });
+});

package/screenshots/suites/04-printer-list.screenshots.spec.ts

@@ -0,0 +1,184 @@
+import { test, expect } from '../fixtures/test-fixtures';
+import { captureFullPage } from '../utils';
+import { createNavigationHelper } from '../helpers/navigation.helper';
+import { createDialogHelper } from '../helpers/dialog.helper';
+import { createFormHelper } from '../helpers/form.helper';
+
+/**
+ * Printer List Screenshots
+ * Captures: List view, creating printer, attaching floor/camera/tag
+ */
+test.describe('Printer List Screenshots', () => {
+  test.beforeEach(async ({ apiMock }) => {
+    await apiMock.mockAllEndpoints({ loginRequired: false });
+  });
+
+  test('01-printer-list-view', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToPrinterList();
+
+    // Wait for list to load
+    await authenticatedPage.waitForSelector(
+      '[data-testid="printer-list"], .printer-list, table, .v-data-table',
+      { timeout: 5000 }
+    ).catch(() => {});
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    await captureFullPage(authenticatedPage, 'printer-list-view.png', 'printer-list');
+  });
+
+  test('02-printer-list-empty', async ({ authenticatedPage, apiMock }) => {
+    // Mock with empty data
+    await apiMock.mockAllEndpoints({ loginRequired: false, emptyData: true });
+
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToPrinterList();
+
+    await authenticatedPage.waitForSelector(
+      '[data-testid="empty-state"], .empty-state, main',
+      { timeout: 5000 }
+    ).catch(() => {});
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    await captureFullPage(authenticatedPage, 'printer-list-empty.png', 'printer-list');
+  });
+
+  test('03-create-printer-dialog', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToPrinterList();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Click add/create printer button
+    const addBtn = authenticatedPage.locator('button').filter({ hasText: /add|create|new/i }).first();
+    await addBtn.click().catch(() => {});
+
+    // Wait for dialog
+    const dialog = createDialogHelper(authenticatedPage);
+    await dialog.waitForDialog();
+
+    await authenticatedPage.waitForTimeout(500);
+
+    await captureFullPage(authenticatedPage, 'create-printer-dialog.png', 'printer-list');
+  });
+
+  test('04-create-printer-dialog-filled', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToPrinterList();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Click add printer button
+    const addBtn = authenticatedPage.locator('button').filter({ hasText: /add|create|new/i }).first();
+    await addBtn.click().catch(() => {});
+
+    // Wait for dialog
+    const dialog = createDialogHelper(authenticatedPage);
+    await dialog.waitForDialog();
+
+    await authenticatedPage.waitForTimeout(500);
+
+    // Fill form fields
+    const inputs = authenticatedPage.locator('.v-dialog input[type="text"]');
+    if (await inputs.count() > 0) {
+      await inputs.nth(0).fill('Prusa i3 MK4');
+      if (await inputs.count() > 1) {
+        await inputs.nth(1).fill('http://192.168.1.100');
+      }
+      if (await inputs.count() > 2) {
+        await inputs.nth(2).fill('1234567890ABCDEF');
+      }
+    }
+
+    await authenticatedPage.waitForTimeout(500);
+
+    await captureFullPage(authenticatedPage, 'create-printer-dialog-filled.png', 'printer-list');
+  });
+
+  test('05-printer-details-panel', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToPrinterList();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Click on first printer row
+    const printerRow = authenticatedPage.locator('tr, .v-list-item, .printer-item').filter({ hasText: /prusa|ender|artillery/i }).first();
+    if (await printerRow.isVisible().catch(() => false)) {
+      await printerRow.click();
+      await authenticatedPage.waitForTimeout(1000);
+    }
+
+    await captureFullPage(authenticatedPage, 'printer-details-panel.png', 'printer-list');
+  });
+
+  test('06-attach-floor-to-printer', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToPrinterList();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Click on first printer to open details
+    const printerRow = authenticatedPage.locator('tr, .v-list-item').first();
+    if (await printerRow.isVisible().catch(() => false)) {
+      await printerRow.click();
+      await authenticatedPage.waitForTimeout(500);
+    }
+
+    // Look for floor dropdown or attach button
+    const floorSelect = authenticatedPage.locator('select, .v-select, [data-testid="floor-select"]').filter({ hasText: /floor/i }).first();
+    if (await floorSelect.isVisible().catch(() => false)) {
+      await floorSelect.click();
+      await authenticatedPage.waitForTimeout(500);
+    }
+
+    await captureFullPage(authenticatedPage, 'attach-floor-to-printer.png', 'printer-list');
+  });
+
+  test('07-attach-camera-to-printer', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToPrinterList();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Click on first printer
+    const printerRow = authenticatedPage.locator('tr, .v-list-item').first();
+    if (await printerRow.isVisible().catch(() => false)) {
+      await printerRow.click();
+      await authenticatedPage.waitForTimeout(500);
+    }
+
+    // Look for camera dropdown or attach button
+    const cameraBtn = authenticatedPage.locator('button, .v-select').filter({ hasText: /camera/i }).first();
+    if (await cameraBtn.isVisible().catch(() => false)) {
+      await cameraBtn.click();
+      await authenticatedPage.waitForTimeout(500);
+    }
+
+    await captureFullPage(authenticatedPage, 'attach-camera-to-printer.png', 'printer-list');
+  });
+
+  test('08-attach-tag-to-printer', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToPrinterList();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Click on first printer
+    const printerRow = authenticatedPage.locator('tr, .v-list-item').first();
+    if (await printerRow.isVisible().catch(() => false)) {
+      await printerRow.click();
+      await authenticatedPage.waitForTimeout(500);
+    }
+
+    // Look for tag dropdown or attach button
+    const tagSelect = authenticatedPage.locator('button, .v-select, [data-testid="tag-select"]').filter({ hasText: /tag/i }).first();
+    if (await tagSelect.isVisible().catch(() => false)) {
+      await tagSelect.click();
+      await authenticatedPage.waitForTimeout(500);
+    }
+
+    await captureFullPage(authenticatedPage, 'attach-tag-to-printer.png', 'printer-list');
+  });
+});