import { test, expect } from '@playwright/test' /** * Cookie Banner Overlay E2E Tests * * Tests the live cookie consent banner in the Compliance SDK: * - Auto-opens on first visit * - Consent choices (accept all, reject all, custom settings) * - FAB button to reopen after consent * - Persistence in localStorage * - Correct toggle behavior for categories */ const SDK_URL = '/sdk' const STORAGE_KEY = 'bp-sdk-cookie-consent' test.describe('Cookie Banner — First Visit', () => { test.beforeEach(async ({ page }) => { // Clear localStorage to simulate first visit await page.goto(SDK_URL) await page.evaluate(() => localStorage.removeItem('bp-sdk-cookie-consent')) await page.reload() await page.waitForLoadState('networkidle') }) test('should show banner on first visit', async ({ page }) => { // Banner should be visible await expect(page.getByText('Cookie-Einstellungen')).toBeVisible({ timeout: 10000 }) await expect(page.getByText('Wir verwenden Cookies')).toBeVisible() }) test('should show three buttons: accept all, reject, settings', async ({ page }) => { await page.waitForTimeout(500) await expect(page.getByRole('button', { name: 'Alle akzeptieren' })).toBeVisible() await expect(page.getByRole('button', { name: 'Nur notwendige' })).toBeVisible() await expect(page.getByRole('button', { name: 'Einstellungen' })).toBeVisible() }) test('should have Datenschutzerklaerung and Impressum links', async ({ page }) => { await page.waitForTimeout(500) await expect(page.getByText('Datenschutzerklaerung')).toBeVisible() await expect(page.getByText('Impressum')).toBeVisible() }) test('should show overlay backdrop', async ({ page }) => { await page.waitForTimeout(500) // Check for the dark overlay behind the banner const overlay = page.locator('.bg-black\\/40') await expect(overlay).toBeVisible() }) }) test.describe('Cookie Banner — Accept All', () => { test('should close banner and save consent on "Alle akzeptieren"', async ({ page }) => { await page.goto(SDK_URL) await page.evaluate(() => localStorage.removeItem('bp-sdk-cookie-consent')) await page.reload() await page.waitForLoadState('networkidle') // Click accept all await page.getByRole('button', { name: 'Alle akzeptieren' }).click() // Banner should close await expect(page.getByText('Cookie-Einstellungen').first()).not.toBeVisible({ timeout: 5000 }) // Verify localStorage const consent = await page.evaluate(() => { const raw = localStorage.getItem('bp-sdk-cookie-consent') return raw ? JSON.parse(raw) : null }) expect(consent).toBeTruthy() expect(consent.necessary).toBe(true) expect(consent.statistics).toBe(true) expect(consent.marketing).toBe(true) expect(consent.functional).toBe(true) expect(consent.timestamp).toBeTruthy() }) }) test.describe('Cookie Banner — Reject All', () => { test('should save only necessary on "Nur notwendige"', async ({ page }) => { await page.goto(SDK_URL) await page.evaluate(() => localStorage.removeItem('bp-sdk-cookie-consent')) await page.reload() await page.waitForLoadState('networkidle') // Click reject all await page.getByRole('button', { name: 'Nur notwendige' }).click() // Banner should close await expect(page.getByText('Cookie-Einstellungen').first()).not.toBeVisible({ timeout: 5000 }) // Verify localStorage — only necessary enabled const consent = await page.evaluate(() => { const raw = localStorage.getItem('bp-sdk-cookie-consent') return raw ? JSON.parse(raw) : null }) expect(consent).toBeTruthy() expect(consent.necessary).toBe(true) expect(consent.statistics).toBe(false) expect(consent.marketing).toBe(false) expect(consent.functional).toBe(false) }) }) test.describe('Cookie Banner — Custom Settings', () => { test('should expand category toggles on "Einstellungen"', async ({ page }) => { await page.goto(SDK_URL) await page.evaluate(() => localStorage.removeItem('bp-sdk-cookie-consent')) await page.reload() await page.waitForLoadState('networkidle') // Click settings await page.getByRole('button', { name: 'Einstellungen' }).click() // Category toggles should appear await expect(page.getByText('Notwendig')).toBeVisible() await expect(page.getByText('Statistik')).toBeVisible() await expect(page.getByText('Marketing')).toBeVisible() await expect(page.getByText('Funktional')).toBeVisible() }) test('should have "Auswahl speichern" button in settings view', async ({ page }) => { await page.goto(SDK_URL) await page.evaluate(() => localStorage.removeItem('bp-sdk-cookie-consent')) await page.reload() await page.waitForLoadState('networkidle') await page.getByRole('button', { name: 'Einstellungen' }).click() await expect(page.getByRole('button', { name: 'Auswahl speichern' })).toBeVisible() }) test('should save custom selection', async ({ page }) => { await page.goto(SDK_URL) await page.evaluate(() => localStorage.removeItem('bp-sdk-cookie-consent')) await page.reload() await page.waitForLoadState('networkidle') // Open settings await page.getByRole('button', { name: 'Einstellungen' }).click() await page.waitForTimeout(300) // Toggle statistics on (click the toggle next to "Statistik") const statistikRow = page.locator('text=Statistik').locator('..') const toggle = statistikRow.locator('button').last() await toggle.click() // Save await page.getByRole('button', { name: 'Auswahl speichern' }).click() // Verify const consent = await page.evaluate(() => { const raw = localStorage.getItem('bp-sdk-cookie-consent') return raw ? JSON.parse(raw) : null }) expect(consent).toBeTruthy() expect(consent.necessary).toBe(true) expect(consent.statistics).toBe(true) expect(consent.marketing).toBe(false) }) test('necessary toggle should be disabled', async ({ page }) => { await page.goto(SDK_URL) await page.evaluate(() => localStorage.removeItem('bp-sdk-cookie-consent')) await page.reload() await page.waitForLoadState('networkidle') await page.getByRole('button', { name: 'Einstellungen' }).click() await page.waitForTimeout(300) // The "Notwendig" toggle should be disabled (can't be turned off) const necessaryRow = page.locator('text=Notwendig').locator('..') const toggle = necessaryRow.locator('button[disabled]') await expect(toggle).toBeVisible() }) }) test.describe('Cookie Banner — Persistence', () => { test('should NOT show banner on subsequent visits', async ({ page }) => { await page.goto(SDK_URL) // Set consent in localStorage await page.evaluate(() => { localStorage.setItem('bp-sdk-cookie-consent', JSON.stringify({ necessary: true, statistics: true, marketing: false, functional: false, timestamp: new Date().toISOString(), })) }) await page.reload() await page.waitForLoadState('networkidle') await page.waitForTimeout(1000) // Banner should NOT appear const bannerVisible = await page.getByText('Wir verwenden Cookies').isVisible().catch(() => false) expect(bannerVisible).toBe(false) }) }) test.describe('Cookie Banner — FAB Reopen Button', () => { test('should show cookie FAB after consent is given', async ({ page }) => { await page.goto(SDK_URL) await page.evaluate(() => { localStorage.setItem('bp-sdk-cookie-consent', JSON.stringify({ necessary: true, statistics: true, marketing: false, functional: false, timestamp: new Date().toISOString(), })) }) await page.reload() await page.waitForLoadState('networkidle') await page.waitForTimeout(1000) // FAB button should be visible (shield icon) const fab = page.locator('button[aria-label="Cookie-Einstellungen oeffnen"]') await expect(fab).toBeVisible({ timeout: 5000 }) }) test('should reopen banner when FAB is clicked', async ({ page }) => { await page.goto(SDK_URL) await page.evaluate(() => { localStorage.setItem('bp-sdk-cookie-consent', JSON.stringify({ necessary: true, statistics: true, marketing: false, functional: false, timestamp: new Date().toISOString(), })) }) await page.reload() await page.waitForLoadState('networkidle') await page.waitForTimeout(1000) // Click FAB const fab = page.locator('button[aria-label="Cookie-Einstellungen oeffnen"]') await fab.click() // Banner should reopen with settings expanded await expect(page.getByText('Cookie-Einstellungen')).toBeVisible({ timeout: 5000 }) // Settings should be shown (since reopening goes straight to settings) await expect(page.getByText('Statistik')).toBeVisible() await expect(page.getByText('Marketing')).toBeVisible() }) test('should NOT show FAB before consent is given', async ({ page }) => { await page.goto(SDK_URL) await page.evaluate(() => localStorage.removeItem('bp-sdk-cookie-consent')) await page.reload() await page.waitForLoadState('networkidle') await page.waitForTimeout(1000) // FAB should NOT be visible (banner is showing instead) const fab = page.locator('button[aria-label="Cookie-Einstellungen oeffnen"]') const isVisible = await fab.isVisible().catch(() => false) expect(isVisible).toBe(false) }) })