59 lines
2.3 KiB
TypeScript
59 lines
2.3 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
|
|
test.describe('Scenario 02: Theme Engine & UI Persistence', () => {
|
|
test('switches themes via real UI clicks and persists across page reloads', async ({ page }) => {
|
|
await page.goto('/', { waitUntil: 'domcontentloaded' });
|
|
|
|
const isMobile = await page.locator('[data-testid="mobile-menu-btn"]').isVisible();
|
|
|
|
const openThemeControls = async () => {
|
|
if (isMobile) {
|
|
const drawer = page.locator('[data-testid="mobile-menu-drawer"]');
|
|
if (!(await drawer.isVisible())) {
|
|
await page.locator('[data-testid="mobile-menu-btn"]').click();
|
|
await expect(drawer).toBeVisible();
|
|
}
|
|
}
|
|
};
|
|
|
|
await openThemeControls();
|
|
|
|
const darkToggle = isMobile
|
|
? page.locator('[data-testid="mobile-menu-drawer"]').locator('[data-testid="theme-toggle-dark"]')
|
|
: page.locator('[data-testid="theme-toggle-dark"]');
|
|
const lightToggle = isMobile
|
|
? page.locator('[data-testid="mobile-menu-drawer"]').locator('[data-testid="theme-toggle-light"]')
|
|
: page.locator('[data-testid="theme-toggle-light"]');
|
|
const softToggle = isMobile
|
|
? page.locator('[data-testid="mobile-menu-drawer"]').locator('[data-testid="theme-toggle-soft"]')
|
|
: page.locator('[data-testid="theme-toggle-soft"]');
|
|
|
|
await expect(darkToggle).toBeVisible({ timeout: 15000 });
|
|
await expect(lightToggle).toBeVisible();
|
|
await expect(softToggle).toBeVisible();
|
|
|
|
// 1. Switch to Dark Theme
|
|
await darkToggle.click();
|
|
await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
|
|
|
|
// 2. Reload and verify Dark Theme persistence
|
|
await page.reload();
|
|
await page.waitForLoadState('domcontentloaded');
|
|
await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
|
|
|
|
await openThemeControls();
|
|
|
|
// 3. Switch to Light Theme
|
|
await lightToggle.click();
|
|
await expect(page.locator('html')).toHaveAttribute('data-theme', 'light');
|
|
|
|
// 4. Switch to Soft Light Theme
|
|
await softToggle.click();
|
|
await expect(page.locator('html')).toHaveAttribute('data-theme', 'soft-light');
|
|
|
|
// 5. Reload and verify Soft Light Theme persistence
|
|
await page.reload();
|
|
await page.waitForLoadState('domcontentloaded');
|
|
await expect(page.locator('html')).toHaveAttribute('data-theme', 'soft-light');
|
|
});
|
|
});
|