feat(e2e): streamline e2e test development with improved infrastructure

Add comprehensive improvements to make e2e test development faster and easier:

1. **New Page Objects** - Reduce code duplication and improve maintainability:
   - task.page.ts: Task operations (get, mark done, edit, subtasks, etc.)
   - settings.page.ts: Settings navigation and plugin management
   - dialog.page.ts: Dialog interactions (save, close, date editing, etc.)
   - All page objects integrated into test.fixture.ts for easy access

2. **Centralized Selectors** - Single source of truth:
   - Expanded constants/selectors.ts with 50+ selectors
   - Organized by category (Navigation, Tasks, Dialogs, Settings, etc.)
   - Makes selector updates easier when UI changes

3. **Comprehensive Documentation** - Complete e2e/README.md guide:
   - Page object usage examples
   - Common test patterns
   - Best practices and anti-patterns
   - Troubleshooting guide
   - Step-by-step instructions for writing new tests

These improvements provide a better foundation for AI-assisted test development
and make it faster to add new e2e tests.

e2e/README.md

@@ -0,0 +1,642 @@
+# E2E Testing Guide for Super Productivity
+
+This guide provides comprehensive information for writing and maintaining end-to-end tests for Super Productivity using Playwright.
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Running Tests](#running-tests)
+- [Test Structure](#test-structure)
+- [Page Objects](#page-objects)
+- [Common Patterns](#common-patterns)
+- [Selectors](#selectors)
+- [Wait Utilities](#wait-utilities)
+- [Writing New Tests](#writing-new-tests)
+- [Best Practices](#best-practices)
+- [Troubleshooting](#troubleshooting)
+
+---
+
+## Overview
+
+Our E2E tests are built with Playwright and follow the Page Object Model (POM) pattern for maintainability and reusability. Tests are organized by feature and use shared fixtures for common setup.
+
+### Key Technologies
+
+- **Playwright**: Modern E2E testing framework
+- **TypeScript**: Type-safe test code
+- **Page Object Model**: Encapsulates page interactions
+- **Fixtures**: Shared setup and utilities
+
+---
+
+## Running Tests
+
+### Basic Commands
+
+```bash
+# Run all tests
+npm run e2e
+
+# Run tests in UI mode (interactive)
+npm run e2e:ui
+
+# Run a single test file with detailed output
+npm run e2e:file tests/task-basic/task-crud.spec.ts
+
+# Run tests in headed mode (see browser)
+npm run e2e:headed
+
+# Run tests in debug mode
+npm run e2e:debug
+
+# Show test report
+npm run e2e:show-report
+```
+
+### WebDAV Sync Tests
+
+```bash
+# Run WebDAV tests (starts Docker container)
+npm run e2e:webdav
+```
+
+---
+
+## Test Structure
+
+### Directory Layout
+
+```
+e2e/
+├── constants/          # Shared selectors and constants
+│   └── selectors.ts    # Centralized CSS selectors
+├── fixtures/           # Test fixtures and setup
+│   └── test.fixture.ts # Custom test fixtures with page objects
+├── helpers/            # Test helper functions
+│   └── plugin-test.helpers.ts
+├── pages/              # Page Object Models
+│   ├── base.page.ts    # Base page with common methods
+│   ├── work-view.page.ts
+│   ├── project.page.ts
+│   ├── task.page.ts
+│   ├── settings.page.ts
+│   ├── dialog.page.ts
+│   ├── planner.page.ts
+│   ├── schedule.page.ts
+│   ├── side-nav.page.ts
+│   ├── sync.page.ts
+│   ├── tag.page.ts
+│   └── note.page.ts
+├── tests/              # Test specifications
+│   ├── task-basic/
+│   ├── project/
+│   ├── planner/
+│   └── ...
+├── utils/              # Utility functions
+│   ├── waits.ts        # Wait helpers
+│   └── sync-helpers.ts
+├── playwright.config.ts
+└── global-setup.ts
+```
+
+---
+
+## Page Objects
+
+Page Objects encapsulate interactions with specific pages or components. All page objects extend `BasePage` and receive a `page` and optional `testPrefix`.
+
+### Available Page Objects
+
+#### 1. **BasePage** (`base.page.ts`)
+
+Base class for all page objects. Provides common functionality:
+
+```typescript
+class BasePage {
+  async addTask(taskName: string): Promise<void>;
+  // Adds a task with automatic test prefix
+}
+```
+
+**Example:**
+
+```typescript
+await workViewPage.addTask('My Task');
+// Creates task with name "W0-P0-My Task" (prefixed for isolation)
+```
+
+#### 2. **WorkViewPage** (`work-view.page.ts`)
+
+Interactions with the main work view:
+
+```typescript
+class WorkViewPage extends BasePage {
+  async waitForTaskList(): Promise<void>;
+  async addSubTask(task: Locator, subTaskName: string): Promise<void>;
+}
+```
+
+**Example:**
+
+```typescript
+await workViewPage.waitForTaskList();
+await workViewPage.addTask('Parent Task');
+const task = page.locator('task').first();
+await workViewPage.addSubTask(task, 'Child Task');
+```
+
+#### 3. **TaskPage** (`task.page.ts`)
+
+Task-specific operations:
+
+```typescript
+class TaskPage extends BasePage {
+  getTask(index: number): Locator;
+  getTaskByText(text: string): Locator;
+  async markTaskAsDone(task: Locator): Promise<void>;
+  async editTaskTitle(task: Locator, newTitle: string): Promise<void>;
+  async openTaskDetail(task: Locator): Promise<void>;
+  async getTaskCount(): Promise<number>;
+  async isTaskDone(task: Locator): Promise<boolean>;
+  getDoneTasks(): Locator;
+  getUndoneTasks(): Locator;
+  async waitForTaskWithText(text: string): Promise<Locator>;
+  async taskHasTag(task: Locator, tagName: string): Promise<boolean>;
+}
+```
+
+**Example:**
+
+```typescript
+const task = taskPage.getTask(1); // First task
+await taskPage.markTaskAsDone(task);
+await expect(taskPage.getDoneTasks()).toHaveCount(1);
+```
+
+#### 4. **ProjectPage** (`project.page.ts`)
+
+Project management:
+
+```typescript
+class ProjectPage extends BasePage {
+  async createProject(projectName: string): Promise<void>;
+  async navigateToProjectByName(projectName: string): Promise<void>;
+  async createAndGoToTestProject(): Promise<void>;
+  async addNote(noteContent: string): Promise<void>;
+  async archiveDoneTasks(): Promise<void>;
+}
+```
+
+**Example:**
+
+```typescript
+await projectPage.createProject('My Project');
+await projectPage.navigateToProjectByName('My Project');
+await projectPage.addNote('Project notes here');
+```
+
+#### 5. **SettingsPage** (`settings.page.ts`)
+
+Settings and configuration:
+
+```typescript
+class SettingsPage extends BasePage {
+  async navigateToSettings(): Promise<void>;
+  async expandSection(sectionSelector: string): Promise<void>;
+  async expandPluginSection(): Promise<void>;
+  async navigateToPluginSettings(): Promise<void>;
+  async enablePlugin(pluginName: string): Promise<boolean>;
+  async disablePlugin(pluginName: string): Promise<boolean>;
+  async isPluginEnabled(pluginName: string): Promise<boolean>;
+  async uploadPlugin(pluginPath: string): Promise<void>;
+}
+```
+
+**Example:**
+
+```typescript
+await settingsPage.navigateToPluginSettings();
+await settingsPage.enablePlugin('Test Plugin');
+expect(await settingsPage.isPluginEnabled('Test Plugin')).toBeTruthy();
+```
+
+#### 6. **DialogPage** (`dialog.page.ts`)
+
+Dialog and modal interactions:
+
+```typescript
+class DialogPage extends BasePage {
+  async waitForDialog(): Promise<Locator>;
+  async waitForDialogToClose(): Promise<void>;
+  async clickDialogButton(buttonText: string): Promise<void>;
+  async clickSaveButton(): Promise<void>;
+  async fillDialogInput(selector: string, value: string): Promise<void>;
+  async fillMarkdownDialog(content: string): Promise<void>;
+  async saveMarkdownDialog(): Promise<void>;
+  async editDateTime(dateValue?: string, timeValue?: string): Promise<void>;
+}
+```
+
+**Example:**
+
+```typescript
+await dialogPage.waitForDialog();
+await dialogPage.fillDialogInput('input[name="title"]', 'New Title');
+await dialogPage.clickSaveButton();
+await dialogPage.waitForDialogToClose();
+```
+
+---
+
+## Common Patterns
+
+### Pattern 1: Basic Task CRUD
+
+```typescript
+test('should create and edit task', async ({ page, workViewPage, taskPage }) => {
+  await workViewPage.waitForTaskList();
+
+  // Create
+  await workViewPage.addTask('Test Task');
+  await expect(taskPage.getAllTasks()).toHaveCount(1);
+
+  // Edit
+  const task = taskPage.getTask(1);
+  await taskPage.editTaskTitle(task, 'Updated Task');
+  await expect(taskPage.getTaskTitle(task)).toContainText('Updated Task');
+
+  // Mark as done
+  await taskPage.markTaskAsDone(task);
+  await expect(taskPage.getDoneTasks()).toHaveCount(1);
+});
+```
+
+### Pattern 2: Project Workflow
+
+```typescript
+test('should create project and add tasks', async ({ projectPage, workViewPage }) => {
+  await projectPage.createAndGoToTestProject();
+  await workViewPage.addTask('Project Task 1');
+  await workViewPage.addTask('Project Task 2');
+  await expect(page.locator('task')).toHaveCount(2);
+});
+```
+
+### Pattern 3: Settings Configuration
+
+```typescript
+test('should enable plugin', async ({ settingsPage, waitForNav }) => {
+  await settingsPage.navigateToPluginSettings();
+  await settingsPage.enablePlugin('My Plugin');
+  await waitForNav();
+  expect(await settingsPage.isPluginEnabled('My Plugin')).toBeTruthy();
+});
+```
+
+### Pattern 4: Dialog Interactions
+
+```typescript
+test('should edit date in dialog', async ({ taskPage, dialogPage }) => {
+  const task = taskPage.getTask(1);
+  await taskPage.openTaskDetail(task);
+
+  const dateInfo = dialogPage.getDateInfo('Created');
+  await dateInfo.click();
+  await dialogPage.editDateTime('12/25/2025', undefined);
+  await dialogPage.clickSaveButton();
+});
+```
+
+---
+
+## Selectors
+
+All selectors are centralized in `constants/selectors.ts`. Always use these constants instead of hardcoding selectors in tests.
+
+### Using Selectors
+
+```typescript
+import { cssSelectors } from '../constants/selectors';
+
+const { TASK, TASK_TITLE, TASK_DONE_BTN } = cssSelectors;
+
+// In test:
+const task = page.locator(TASK).first();
+const title = task.locator(TASK_TITLE);
+```
+
+### Selector Categories
+
+- **Navigation**: `SIDENAV`, `NAV_ITEM`, `SETTINGS_BTN`
+- **Layout**: `ROUTE_WRAPPER`, `BACKDROP`, `PAGE_TITLE`
+- **Tasks**: `TASK`, `TASK_TITLE`, `TASK_DONE_BTN`, `SUB_TASK`
+- **Add Task**: `ADD_TASK_INPUT`, `ADD_TASK_SUBMIT`
+- **Dialogs**: `MAT_DIALOG`, `DIALOG_FULLSCREEN_MARKDOWN`
+- **Settings**: `PAGE_SETTINGS`, `PLUGIN_SECTION`, `PLUGIN_MANAGEMENT`
+- **Projects**: `PAGE_PROJECT`, `CREATE_PROJECT_BTN`, `WORK_CONTEXT_MENU`
+
+---
+
+## Wait Utilities
+
+Located in `utils/waits.ts`, these utilities help handle Angular's async nature.
+
+### Available Wait Functions
+
+#### `waitForAngularStability(page, timeout?)`
+
+Waits for Angular to finish all async operations.
+
+```typescript
+await waitForAngularStability(page);
+```
+
+#### `waitForAppReady(page, options?)`
+
+Comprehensive wait for app initialization.
+
+```typescript
+await waitForAppReady(page, {
+  selector: 'task-list',
+  ensureRoute: true,
+  routeRegex: /#\/project\/\w+/,
+});
+```
+
+#### `waitForStatePersistence(page)`
+
+Waits for IndexedDB persistence to complete (important before sync operations).
+
+```typescript
+await workViewPage.addTask('Task');
+await waitForStatePersistence(page); // Ensure saved to IndexedDB
+// Now safe to trigger sync
+```
+
+---
+
+## Writing New Tests
+
+### Step 1: Create Test File
+
+```typescript
+// e2e/tests/my-feature/my-feature.spec.ts
+import { test, expect } from '../../fixtures/test.fixture';
+
+test.describe('My Feature', () => {
+  test('should do something', async ({ page, workViewPage, taskPage }) => {
+    // Test code here
+  });
+});
+```
+
+### Step 2: Use Page Objects
+
+```typescript
+test('my test', async ({ workViewPage, taskPage, dialogPage }) => {
+  // Wait for page ready
+  await workViewPage.waitForTaskList();
+
+  // Use page objects for interactions
+  await workViewPage.addTask('Task 1');
+  const task = taskPage.getTask(1);
+  await taskPage.markTaskAsDone(task);
+
+  // Assertions
+  await expect(taskPage.getDoneTasks()).toHaveCount(1);
+});
+```
+
+### Step 3: Handle Waits Properly
+
+```typescript
+// GOOD: Use Angular stability waits
+await workViewPage.addTask('Task');
+await waitForAngularStability(page);
+await expect(page.locator('task')).toBeVisible();
+
+// BAD: Arbitrary timeouts
+await page.waitForTimeout(5000); // Avoid unless necessary
+```
+
+### Step 4: Use Selectors from Constants
+
+```typescript
+import { cssSelectors } from '../../constants/selectors';
+
+const { TASK, TASK_TITLE } = cssSelectors;
+const title = page.locator(TASK).first().locator(TASK_TITLE);
+```
+
+---
+
+## Best Practices
+
+### ✅ DO
+
+1. **Use page objects** for all interactions
+2. **Use centralized selectors** from `constants/selectors.ts`
+3. **Wait for Angular stability** after state changes
+4. **Use test prefixes** (automatic via fixtures) for isolation
+5. **Test one thing per test** - keep tests focused
+6. **Use descriptive test names** - "should create task and mark as done"
+7. **Clean up state** - tests should be independent
+8. **Use role-based selectors** when possible (accessibility)
+
+```typescript
+// GOOD
+await page.getByRole('button', { name: 'Save' }).click();
+
+// LESS GOOD
+await page.locator('.save-btn').click();
+```
+
+### ❌ DON'T
+
+1. **Don't hardcode selectors** - use `cssSelectors`
+2. **Don't use arbitrary waits** - use `waitForAngularStability`
+3. **Don't share state between tests** - each test should be independent
+4. **Don't access DOM directly** - use page objects
+5. **Don't skip error handling** - tests should fail clearly
+6. **Don't use `any` types** - maintain type safety
+
+### Test Isolation
+
+Each test gets:
+
+- Isolated browser context (clean storage)
+- Unique test prefix (`W0-P0-`, `W1-P0-`, etc.)
+- Fresh page instance
+
+This ensures tests don't interfere with each other.
+
+### Handling Flakiness
+
+```typescript
+// Use waitFor with explicit conditions
+await page.waitForFunction(() => document.querySelectorAll('task').length === 3, {
+  timeout: 10000,
+});
+
+// Use locator assertions (auto-retry)
+await expect(page.locator('task')).toHaveCount(3);
+
+// Avoid fixed timeouts
+await page.waitForTimeout(1000); // BAD
+await waitForAngularStability(page); // GOOD
+```
+
+---
+
+## Troubleshooting
+
+### Test Fails with "Element not found"
+
+1. Check if selector is correct in `constants/selectors.ts`
+2. Add wait before interaction: `await waitForAngularStability(page)`
+3. Use `await element.waitFor({ state: 'visible' })`
+4. Check if element is in a different context (iframe, shadow DOM)
+
+### Test Timeout
+
+1. Increase timeout in specific waitFor calls
+2. Check if Angular is stuck - look for pending HTTP requests
+3. Use `page.pause()` to debug interactively
+4. Check network tab for failed requests
+
+### Flaky Tests
+
+1. Add proper waits: `waitForAngularStability`, `waitForAppReady`
+2. Avoid `page.waitForTimeout()` - use condition-based waits
+3. Check for race conditions - ensure state is persisted
+4. Use `waitForStatePersistence` before operations that depend on saved state
+
+### Debugging
+
+```typescript
+// Pause execution and open Playwright Inspector
+await page.pause();
+
+// Take screenshot
+await page.screenshot({ path: 'debug.png' });
+
+// Console log page content
+console.log(await page.content());
+
+// Get element text for debugging
+const text = await page.locator('task').first().textContent();
+console.log('Task text:', text);
+```
+
+### Running Single Test
+
+```bash
+# Run specific file
+npm run e2e:file tests/task-basic/task-crud.spec.ts
+
+# Run in debug mode
+npm run e2e:debug
+
+# Run in headed mode to see browser
+npm run e2e:headed
+```
+
+---
+
+## Examples
+
+### Example 1: Full Task CRUD Test
+
+```typescript
+import { test, expect } from '../../fixtures/test.fixture';
+
+test.describe('Task CRUD', () => {
+  test('should create, edit, and delete tasks', async ({
+    page,
+    workViewPage,
+    taskPage,
+  }) => {
+    await workViewPage.waitForTaskList();
+
+    // Create
+    await workViewPage.addTask('Task 1');
+    await workViewPage.addTask('Task 2');
+    await expect(taskPage.getAllTasks()).toHaveCount(2);
+
+    // Edit
+    const firstTask = taskPage.getTask(1);
+    await taskPage.editTaskTitle(firstTask, 'Updated Task');
+    await expect(taskPage.getTaskTitle(firstTask)).toContainText('Updated Task');
+
+    // Mark as done
+    await taskPage.markTaskAsDone(firstTask);
+    await expect(taskPage.getDoneTasks()).toHaveCount(1);
+    await expect(taskPage.getUndoneTasks()).toHaveCount(1);
+  });
+});
+```
+
+### Example 2: Project Workflow
+
+```typescript
+test('should create project with tasks', async ({
+  projectPage,
+  workViewPage,
+  taskPage,
+}) => {
+  await projectPage.createAndGoToTestProject();
+
+  await workViewPage.addTask('Project Task');
+  await projectPage.addNote('Important notes');
+
+  const task = taskPage.getTask(1);
+  await taskPage.markTaskAsDone(task);
+
+  await projectPage.archiveDoneTasks();
+  await expect(taskPage.getUndoneTasks()).toHaveCount(0);
+});
+```
+
+### Example 3: Settings Test
+
+```typescript
+test('should configure plugin', async ({ settingsPage, page }) => {
+  await settingsPage.navigateToPluginSettings();
+
+  const pluginExists = await settingsPage.pluginExists('Test Plugin');
+  expect(pluginExists).toBeTruthy();
+
+  await settingsPage.enablePlugin('Test Plugin');
+  expect(await settingsPage.isPluginEnabled('Test Plugin')).toBeTruthy();
+
+  await settingsPage.navigateBackToWorkView();
+  await expect(page).toHaveURL(/tag\/TODAY/);
+});
+```
+
+---
+
+## Getting Help
+
+- Check existing tests in `e2e/tests/` for examples
+- Review page objects in `e2e/pages/` for available methods
+- Look at `constants/selectors.ts` for available selectors
+- Use Playwright Inspector (`npm run e2e:debug`) for debugging
+- Check Playwright docs: https://playwright.dev/
+
+---
+
+## Summary Checklist
+
+When writing a new test:
+
+- [ ] Create test file in appropriate `tests/` subdirectory
+- [ ] Import `test` and `expect` from `fixtures/test.fixture.ts`
+- [ ] Use page objects for all interactions
+- [ ] Use selectors from `constants/selectors.ts`
+- [ ] Add proper waits (`waitForAngularStability`, etc.)
+- [ ] Use descriptive test names
+- [ ] Ensure test is isolated (no shared state)
+- [ ] Run test locally before committing
+- [ ] Test passes consistently (run 3+ times)

e2e/constants/selectors.ts

@@ -1,5 +1,7 @@
 export const cssSelectors = {
-  // Navigation selectors - Updated for correct structure
+  // ============================================================================
+  // NAVIGATION SELECTORS
+  // ============================================================================
   SIDENAV: 'magic-side-nav',
   NAV_LIST: 'magic-side-nav .nav-list',
   NAV_ITEM: 'magic-side-nav nav-item',
@@ -21,4 +23,89 @@ export const cssSelectors = {
   // Legacy selectors for backward compatibility
   OLD_SIDENAV: 'side-nav',
   OLD_NAV_ITEM: 'side-nav-item',
+
+  // ============================================================================
+  // LAYOUT & ROUTING SELECTORS
+  // ============================================================================
+  ROUTE_WRAPPER: '.route-wrapper',
+  BACKDROP: '.backdrop',
+  MAIN: 'main',
+  PAGE_TITLE: 'main .page-title, .route-wrapper .page-title',
+
+  // ============================================================================
+  // TASK SELECTORS
+  // ============================================================================
+  TASK: 'task',
+  FIRST_TASK: 'task:first-child',
+  SECOND_TASK: 'task:nth-child(2)',
+  TASK_TITLE: 'task task-title',
+  TASK_DONE_BTN: '.task-done-btn',
+  TASK_LIST: 'task-list',
+  TASK_TEXTAREA: 'task textarea',
+  SUB_TASKS_CONTAINER: '.sub-tasks',
+  SUB_TASK: '.sub-tasks task',
+
+  // ============================================================================
+  // ADD TASK BAR SELECTORS
+  // ============================================================================
+  ADD_TASK_INPUT: 'add-task-bar.global input',
+  ADD_TASK_SUBMIT: '.e2e-add-task-submit',
+  ADD_BTN: '.tour-addBtn',
+  SWITCH_ADD_TO_BTN: '.switch-add-to-btn',
+
+  // ============================================================================
+  // DIALOG SELECTORS
+  // ============================================================================
+  MAT_DIALOG: 'mat-dialog-container',
+  DIALOG_FULLSCREEN_MARKDOWN: 'dialog-fullscreen-markdown',
+  DIALOG_CREATE_PROJECT: 'dialog-create-project',
+
+  // ============================================================================
+  // SETTINGS PAGE SELECTORS
+  // ============================================================================
+  PAGE_SETTINGS: '.page-settings',
+  PLUGIN_SECTION: '.plugin-section',
+  PLUGIN_MANAGEMENT: 'plugin-management',
+  COLLAPSIBLE: 'collapsible',
+  COLLAPSIBLE_HEADER: '.collapsible-header',
+
+  // Plugin selectors
+  PLUGIN_CARD: 'plugin-management mat-card',
+  PLUGIN_TOGGLE: 'mat-slide-toggle button[role="switch"]',
+  PLUGIN_FILE_INPUT: 'input[type="file"][accept=".zip"]',
+
+  // ============================================================================
+  // PROJECT SELECTORS
+  // ============================================================================
+  PAGE_PROJECT: '.page-project',
+  CREATE_PROJECT_BTN:
+    'button[aria-label="Create New Project"], button:has-text("Create Project")',
+  PROJECT_NAME_INPUT: '[name="projectName"]',
+  WORK_CONTEXT_MENU: 'work-context-menu',
+  MOVE_TO_ARCHIVE_BTN: '.e2e-move-done-to-archive',
+
+  // ============================================================================
+  // NOTES SELECTORS
+  // ============================================================================
+  NOTES: 'notes',
+  TOGGLE_NOTES_BTN: '.e2e-toggle-notes-btn',
+  ADD_NOTE_BTN: '#add-note-btn',
+  SAVE_NOTE_BTN: '#T-save-note',
+
+  // ============================================================================
+  // PLANNER SELECTORS
+  // ============================================================================
+  PLANNER_VIEW: 'planner',
+
+  // ============================================================================
+  // COMMON UI ELEMENTS
+  // ============================================================================
+  GLOBAL_ERROR_ALERT: '.global-error-alert',
+  MAT_CARD: 'mat-card',
+  MAT_CARD_TITLE: 'mat-card-title',
+
+  // ============================================================================
+  // DATE/TIME SELECTORS
+  // ============================================================================
+  EDIT_DATE_INFO: '.edit-date-info',
 };

e2e/fixtures/test.fixture.ts

@@ -1,11 +1,17 @@
 import { BrowserContext, test as base } from '@playwright/test';
 import { WorkViewPage } from '../pages/work-view.page';
 import { ProjectPage } from '../pages/project.page';
+import { TaskPage } from '../pages/task.page';
+import { SettingsPage } from '../pages/settings.page';
+import { DialogPage } from '../pages/dialog.page';
 import { waitForAppReady } from '../utils/waits';
 
 type TestFixtures = {
   workViewPage: WorkViewPage;
   projectPage: ProjectPage;
+  taskPage: TaskPage;
+  settingsPage: SettingsPage;
+  dialogPage: DialogPage;
   isolatedContext: BrowserContext;
   waitForNav: (selector?: string) => Promise<void>;
   testPrefix: string;
@@ -99,6 +105,18 @@ export const test = base.extend<TestFixtures>({
     await use(new ProjectPage(page, testPrefix));
   },
 
+  taskPage: async ({ page, testPrefix }, use) => {
+    await use(new TaskPage(page, testPrefix));
+  },
+
+  settingsPage: async ({ page, testPrefix }, use) => {
+    await use(new SettingsPage(page, testPrefix));
+  },
+
+  dialogPage: async ({ page, testPrefix }, use) => {
+    await use(new DialogPage(page, testPrefix));
+  },
+
   waitForNav: async ({ page }, use) => {
     const waitForNav = async (selector?: string): Promise<void> => {
       await waitForAppReady(page, {

e2e/pages/dialog.page.ts

@@ -0,0 +1,214 @@
+import { Locator, Page } from '@playwright/test';
+import { BasePage } from './base.page';
+import { cssSelectors } from '../constants/selectors';
+import { waitForAngularStability } from '../utils/waits';
+
+const { MAT_DIALOG, DIALOG_FULLSCREEN_MARKDOWN, SAVE_NOTE_BTN } = cssSelectors;
+
+export class DialogPage extends BasePage {
+  constructor(page: Page, testPrefix: string = '') {
+    super(page, testPrefix);
+  }
+
+  /**
+   * Wait for any dialog to appear
+   */
+  async waitForDialog(timeout: number = 10000): Promise<Locator> {
+    const dialog = this.page.locator(MAT_DIALOG).first();
+    await dialog.waitFor({ state: 'visible', timeout });
+    return dialog;
+  }
+
+  /**
+   * Wait for dialog to close
+   */
+  async waitForDialogToClose(timeout: number = 10000): Promise<void> {
+    await this.page.locator(MAT_DIALOG).waitFor({ state: 'hidden', timeout });
+    await waitForAngularStability(this.page);
+  }
+
+  /**
+   * Check if any dialog is open
+   */
+  async isDialogOpen(): Promise<boolean> {
+    return await this.page.locator(MAT_DIALOG).isVisible();
+  }
+
+  /**
+   * Get dialog by aria-label
+   */
+  getDialogByLabel(label: string): Locator {
+    return this.page.locator(`[role="dialog"][aria-label="${label}"]`);
+  }
+
+  /**
+   * Click dialog button by text
+   */
+  async clickDialogButton(buttonText: string): Promise<void> {
+    const dialog = this.page.locator(MAT_DIALOG);
+    const button = dialog.getByRole('button', { name: buttonText });
+    await button.waitFor({ state: 'visible', timeout: 5000 });
+    await button.click();
+    await this.page.waitForTimeout(300);
+  }
+
+  /**
+   * Click Save button in dialog
+   */
+  async clickSaveButton(): Promise<void> {
+    await this.clickDialogButton('Save');
+  }
+
+  /**
+   * Click Cancel button in dialog
+   */
+  async clickCancelButton(): Promise<void> {
+    await this.clickDialogButton('Cancel');
+  }
+
+  /**
+   * Fill input field in dialog
+   */
+  async fillDialogInput(
+    inputSelector: string,
+    value: string,
+    clearFirst: boolean = true,
+  ): Promise<void> {
+    const dialog = this.page.locator(MAT_DIALOG);
+    const input = dialog.locator(inputSelector);
+    await input.waitFor({ state: 'visible', timeout: 5000 });
+
+    if (clearFirst) {
+      await input.clear();
+      await this.page.waitForTimeout(50);
+    }
+
+    await input.fill(value);
+    await this.page.waitForTimeout(100);
+  }
+
+  /**
+   * Get dialog title
+   */
+  async getDialogTitle(): Promise<string> {
+    const dialog = this.page.locator(MAT_DIALOG);
+    const title = dialog.locator('h2, mat-dialog-title, .mat-dialog-title').first();
+    return (await title.textContent()) || '';
+  }
+
+  /**
+   * Wait for fullscreen markdown dialog (for notes)
+   */
+  async waitForMarkdownDialog(timeout: number = 10000): Promise<Locator> {
+    const dialog = this.page.locator(DIALOG_FULLSCREEN_MARKDOWN);
+    await dialog.waitFor({ state: 'visible', timeout });
+    return dialog;
+  }
+
+  /**
+   * Fill markdown textarea in fullscreen dialog
+   */
+  async fillMarkdownDialog(content: string): Promise<void> {
+    const dialog = this.page.locator(DIALOG_FULLSCREEN_MARKDOWN);
+    const textarea = dialog.locator('textarea').first();
+    await textarea.waitFor({ state: 'visible', timeout: 5000 });
+    await textarea.fill(content);
+  }
+
+  /**
+   * Save markdown dialog
+   */
+  async saveMarkdownDialog(): Promise<void> {
+    const saveBtn = this.page.locator(SAVE_NOTE_BTN);
+    const saveBtnVisible = await saveBtn.isVisible({ timeout: 2000 }).catch(() => false);
+
+    if (saveBtnVisible) {
+      await saveBtn.click();
+    } else {
+      // Fallback: try button with save icon
+      const saveBtnFallback = this.page.locator('button:has(mat-icon:has-text("save"))');
+      const fallbackVisible = await saveBtnFallback
+        .isVisible({ timeout: 2000 })
+        .catch(() => false);
+
+      if (fallbackVisible) {
+        await saveBtnFallback.click();
+      } else {
+        // Last resort: keyboard shortcut
+        await this.page.keyboard.press('Control+Enter');
+      }
+    }
+
+    await this.waitForDialogToClose();
+  }
+
+  /**
+   * Close markdown dialog without saving
+   */
+  async closeMarkdownDialog(): Promise<void> {
+    await this.page.keyboard.press('Escape');
+    await this.waitForDialogToClose();
+  }
+
+  /**
+   * Edit date/time in task detail
+   */
+  async editDateTime(dateValue?: string, timeValue?: string): Promise<void> {
+    if (dateValue !== undefined) {
+      const dateInput = this.page.getByRole('textbox', { name: 'Date' });
+      await dateInput.waitFor({ state: 'visible', timeout: 3000 });
+      await dateInput.fill(dateValue);
+    }
+
+    if (timeValue !== undefined) {
+      const timeInput = this.page.getByRole('combobox', { name: 'Time' });
+      await timeInput.waitFor({ state: 'visible', timeout: 3000 });
+      await timeInput.fill(timeValue);
+    }
+
+    await this.page.waitForTimeout(200);
+  }
+
+  /**
+   * Open calendar picker
+   */
+  async openCalendarPicker(): Promise<void> {
+    const openCalendarBtn = this.page.getByRole('button', { name: 'Open calendar' });
+    await openCalendarBtn.waitFor({ state: 'visible', timeout: 3000 });
+    await openCalendarBtn.click();
+    await this.page.waitForTimeout(300);
+  }
+
+  /**
+   * Select first day of next month in calendar
+   */
+  async selectFirstDayOfNextMonth(): Promise<void> {
+    await this.openCalendarPicker();
+    await this.page.getByRole('button', { name: 'Next month' }).click();
+    await this.page.locator('mat-month-view button').first().click();
+  }
+
+  /**
+   * Check if Save button is enabled
+   */
+  async isSaveButtonEnabled(): Promise<boolean> {
+    const saveBtn = this.page.getByRole('button', { name: 'Save' });
+    return !(await saveBtn.isDisabled());
+  }
+
+  /**
+   * Close dialog by clicking backdrop
+   */
+  async closeDialogByBackdrop(): Promise<void> {
+    await this.backdrop.click();
+    await this.waitForDialogToClose();
+  }
+
+  /**
+   * Close dialog by pressing Escape
+   */
+  async closeDialogByEscape(): Promise<void> {
+    await this.page.keyboard.press('Escape');
+    await this.waitForDialogToClose();
+  }
+}

e2e/pages/settings.page.ts

@@ -0,0 +1,231 @@
+import { Locator, Page } from '@playwright/test';
+import { BasePage } from './base.page';
+import { cssSelectors } from '../constants/selectors';
+import { waitForAngularStability } from '../utils/waits';
+
+const {
+  SETTINGS_BTN,
+  PAGE_SETTINGS,
+  PLUGIN_SECTION,
+  PLUGIN_MANAGEMENT,
+  PLUGIN_CARD,
+  PLUGIN_TOGGLE,
+  PLUGIN_FILE_INPUT,
+} = cssSelectors;
+
+export class SettingsPage extends BasePage {
+  readonly settingsBtn: Locator;
+  readonly pageSettings: Locator;
+  readonly pluginSection: Locator;
+  readonly pluginManagement: Locator;
+
+  constructor(page: Page, testPrefix: string = '') {
+    super(page, testPrefix);
+
+    this.settingsBtn = page.locator(SETTINGS_BTN);
+    this.pageSettings = page.locator(PAGE_SETTINGS);
+    this.pluginSection = page.locator(PLUGIN_SECTION);
+    this.pluginManagement = page.locator(PLUGIN_MANAGEMENT);
+  }
+
+  /**
+   * Navigate to settings page
+   */
+  async navigateToSettings(): Promise<void> {
+    await this.settingsBtn.waitFor({ state: 'visible', timeout: 10000 });
+    await this.settingsBtn.click();
+    await this.pageSettings.waitFor({ state: 'visible', timeout: 10000 });
+    await waitForAngularStability(this.page);
+  }
+
+  /**
+   * Expand a collapsible section by scrolling to it and clicking header
+   */
+  async expandSection(sectionSelector: string): Promise<void> {
+    await this.page.evaluate((selector) => {
+      const section = document.querySelector(selector);
+      if (section) {
+        section.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      }
+
+      const collapsible = section?.querySelector('collapsible');
+      if (collapsible) {
+        const isExpanded = collapsible.classList.contains('isExpanded');
+        if (!isExpanded) {
+          const header = collapsible.querySelector('.collapsible-header');
+          if (header) {
+            (header as HTMLElement).click();
+          }
+        }
+      }
+    }, sectionSelector);
+
+    await this.page.waitForTimeout(500); // Wait for expansion animation
+    await waitForAngularStability(this.page);
+  }
+
+  /**
+   * Expand plugin section
+   */
+  async expandPluginSection(): Promise<void> {
+    await this.expandSection(PLUGIN_SECTION);
+    await this.pluginManagement.waitFor({ state: 'visible', timeout: 5000 });
+  }
+
+  /**
+   * Navigate to plugin settings (settings page + expand plugin section)
+   */
+  async navigateToPluginSettings(): Promise<void> {
+    const currentUrl = this.page.url();
+    if (!currentUrl.includes('#/config')) {
+      await this.navigateToSettings();
+    }
+    await this.expandPluginSection();
+  }
+
+  /**
+   * Get a plugin card by plugin name or ID
+   */
+  async getPluginCard(pluginName: string): Promise<Locator | null> {
+    const cards = await this.page.locator(PLUGIN_CARD).all();
+
+    for (const card of cards) {
+      const text = await card.textContent();
+      if (text?.includes(pluginName)) {
+        return card;
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Check if a plugin exists
+   */
+  async pluginExists(pluginName: string): Promise<boolean> {
+    const card = await this.getPluginCard(pluginName);
+    return card !== null;
+  }
+
+  /**
+   * Enable a plugin by name
+   */
+  async enablePlugin(pluginName: string): Promise<boolean> {
+    const card = await this.getPluginCard(pluginName);
+    if (!card) {
+      return false;
+    }
+
+    const toggle = card.locator(PLUGIN_TOGGLE);
+    const isEnabled = (await toggle.getAttribute('aria-checked')) === 'true';
+
+    if (!isEnabled) {
+      await toggle.click();
+      await this.page.waitForTimeout(500);
+      await waitForAngularStability(this.page);
+    }
+
+    return true;
+  }
+
+  /**
+   * Disable a plugin by name
+   */
+  async disablePlugin(pluginName: string): Promise<boolean> {
+    const card = await this.getPluginCard(pluginName);
+    if (!card) {
+      return false;
+    }
+
+    const toggle = card.locator(PLUGIN_TOGGLE);
+    const isEnabled = (await toggle.getAttribute('aria-checked')) === 'true';
+
+    if (isEnabled) {
+      await toggle.click();
+      await this.page.waitForTimeout(500);
+      await waitForAngularStability(this.page);
+    }
+
+    return true;
+  }
+
+  /**
+   * Check if a plugin is enabled
+   */
+  async isPluginEnabled(pluginName: string): Promise<boolean> {
+    const card = await this.getPluginCard(pluginName);
+    if (!card) {
+      return false;
+    }
+
+    const toggle = card.locator(PLUGIN_TOGGLE);
+    return (await toggle.getAttribute('aria-checked')) === 'true';
+  }
+
+  /**
+   * Upload a plugin ZIP file
+   */
+  async uploadPlugin(pluginPath: string): Promise<void> {
+    // Make file input visible
+    await this.page.evaluate(() => {
+      const input = document.querySelector(
+        'input[type="file"][accept=".zip"]',
+      ) as HTMLElement;
+      if (input) {
+        input.style.display = 'block';
+        input.style.position = 'relative';
+        input.style.opacity = '1';
+      }
+    });
+
+    await this.page.locator(PLUGIN_FILE_INPUT).setInputFiles(pluginPath);
+    await this.page.waitForTimeout(1000);
+    await waitForAngularStability(this.page);
+  }
+
+  /**
+   * Get all plugin names
+   */
+  async getAllPluginNames(): Promise<string[]> {
+    const cards = await this.page.locator(PLUGIN_CARD).all();
+    const names: string[] = [];
+
+    for (const card of cards) {
+      const titleEl = card.locator('mat-card-title');
+      const title = await titleEl.textContent();
+      if (title) {
+        names.push(title.trim());
+      }
+    }
+
+    return names;
+  }
+
+  /**
+   * Scroll to a specific section
+   */
+  async scrollToSection(sectionSelector: string): Promise<void> {
+    await this.page.evaluate((selector) => {
+      const section = document.querySelector(selector);
+      if (section) {
+        section.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      }
+    }, sectionSelector);
+    await this.page.waitForTimeout(500);
+  }
+
+  /**
+   * Check if on settings page
+   */
+  async isOnSettingsPage(): Promise<boolean> {
+    return await this.pageSettings.isVisible();
+  }
+
+  /**
+   * Navigate back to work view
+   */
+  async navigateBackToWorkView(): Promise<void> {
+    await this.page.goto('/#/tag/TODAY');
+    await this.page.waitForLoadState('networkidle');
+    await waitForAngularStability(this.page);
+  }
+}

e2e/pages/task.page.ts

@@ -0,0 +1,238 @@
+import { Locator, Page } from '@playwright/test';
+import { BasePage } from './base.page';
+import { cssSelectors } from '../constants/selectors';
+import { waitForAngularStability } from '../utils/waits';
+
+const { TASK, FIRST_TASK, TASK_DONE_BTN, TASK_TEXTAREA, SUB_TASK } = cssSelectors;
+
+export class TaskPage extends BasePage {
+  constructor(page: Page, testPrefix: string = '') {
+    super(page, testPrefix);
+  }
+
+  /**
+   * Get a task by index (1-based)
+   */
+  getTask(index: number = 1): Locator {
+    if (index === 1) {
+      return this.page.locator(FIRST_TASK);
+    }
+    return this.page.locator(TASK).nth(index - 1);
+  }
+
+  /**
+   * Get a task by text content
+   */
+  getTaskByText(text: string): Locator {
+    return this.page.locator(TASK).filter({ hasText: text });
+  }
+
+  /**
+   * Get all tasks
+   */
+  getAllTasks(): Locator {
+    return this.page.locator(TASK);
+  }
+
+  /**
+   * Get task count
+   */
+  async getTaskCount(): Promise<number> {
+    return await this.page.locator(TASK).count();
+  }
+
+  /**
+   * Get task title element for a specific task
+   */
+  getTaskTitle(task: Locator): Locator {
+    return task.locator('task-title');
+  }
+
+  /**
+   * Mark a task as done
+   */
+  async markTaskAsDone(task: Locator): Promise<void> {
+    await task.waitFor({ state: 'visible' });
+    await task.hover();
+    const doneBtn = task.locator(TASK_DONE_BTN);
+    await doneBtn.waitFor({ state: 'visible', timeout: 5000 });
+    await doneBtn.click();
+    await waitForAngularStability(this.page);
+  }
+
+  /**
+   * Mark the first task as done
+   */
+  async markFirstTaskAsDone(): Promise<void> {
+    const firstTask = this.getTask(1);
+    await this.markTaskAsDone(firstTask);
+  }
+
+  /**
+   * Edit task title
+   */
+  async editTaskTitle(task: Locator, newTitle: string): Promise<void> {
+    const titleElement = this.getTaskTitle(task);
+    await titleElement.waitFor({ state: 'visible' });
+    await titleElement.click();
+
+    const textarea = task.locator(TASK_TEXTAREA);
+    await textarea.waitFor({ state: 'visible', timeout: 3000 });
+    await textarea.clear();
+    await this.page.waitForTimeout(50);
+    await textarea.fill(newTitle);
+    await this.page.keyboard.press('Tab'); // Blur to save
+    await waitForAngularStability(this.page);
+  }
+
+  /**
+   * Open task detail panel (additional info)
+   */
+  async openTaskDetail(task: Locator): Promise<void> {
+    await task.waitFor({ state: 'visible' });
+    await task.hover();
+    const showDetailBtn = this.page.getByRole('button', {
+      name: 'Show/Hide additional info',
+    });
+    await showDetailBtn.waitFor({ state: 'visible', timeout: 3000 });
+    await showDetailBtn.click();
+    await this.page.waitForTimeout(300);
+  }
+
+  /**
+   * Open detail panel for the first task
+   */
+  async openFirstTaskDetail(): Promise<void> {
+    const firstTask = this.getTask(1);
+    await this.openTaskDetail(firstTask);
+  }
+
+  /**
+   * Get subtasks for a task
+   */
+  getSubTasks(task: Locator): Locator {
+    return task.locator(SUB_TASK);
+  }
+
+  /**
+   * Get subtask count for a task
+   */
+  async getSubTaskCount(task: Locator): Promise<number> {
+    return await this.getSubTasks(task).count();
+  }
+
+  /**
+   * Check if a task is marked as done
+   */
+  async isTaskDone(task: Locator): Promise<boolean> {
+    const classes = await task.getAttribute('class');
+    return classes?.includes('isDone') || false;
+  }
+
+  /**
+   * Get done tasks
+   */
+  getDoneTasks(): Locator {
+    return this.page.locator(`${TASK}.isDone`);
+  }
+
+  /**
+   * Get undone tasks
+   */
+  getUndoneTasks(): Locator {
+    return this.page.locator(`${TASK}:not(.isDone)`);
+  }
+
+  /**
+   * Get done task count
+   */
+  async getDoneTaskCount(): Promise<number> {
+    return await this.getDoneTasks().count();
+  }
+
+  /**
+   * Get undone task count
+   */
+  async getUndoneTaskCount(): Promise<number> {
+    return await this.getUndoneTasks().count();
+  }
+
+  /**
+   * Wait for a task to appear with specific text
+   */
+  async waitForTaskWithText(text: string, timeout: number = 10000): Promise<Locator> {
+    const task = this.getTaskByText(text);
+    await task.waitFor({ state: 'visible', timeout });
+    return task;
+  }
+
+  /**
+   * Wait for task count to match expected count
+   */
+  async waitForTaskCount(expectedCount: number, timeout: number = 10000): Promise<void> {
+    await this.page.waitForFunction(
+      (args) => {
+        const currentCount = document.querySelectorAll('task').length;
+        return currentCount === args.expectedCount;
+      },
+      { expectedCount },
+      { timeout },
+    );
+  }
+
+  /**
+   * Get task tags
+   */
+  getTaskTags(task: Locator): Locator {
+    return task.locator('tag');
+  }
+
+  /**
+   * Check if task has a specific tag
+   */
+  async taskHasTag(task: Locator, tagName: string): Promise<boolean> {
+    const tags = this.getTaskTags(task);
+    const tagCount = await tags.count();
+
+    for (let i = 0; i < tagCount; i++) {
+      const tagText = await tags.nth(i).textContent();
+      if (tagText?.includes(tagName)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Toggle task detail panel
+   */
+  async toggleTaskDetail(task: Locator): Promise<void> {
+    await task.hover();
+    const toggleBtn = this.page.getByRole('button', {
+      name: 'Show/Hide additional info',
+    });
+    await toggleBtn.click();
+    await this.page.waitForTimeout(300);
+  }
+
+  /**
+   * Start/Stop task time tracking
+   */
+  async toggleTaskTimeTracking(task: Locator): Promise<void> {
+    await task.waitFor({ state: 'visible' });
+    await task.hover();
+    const playBtn = task.locator('.play-btn, .pause-btn').first();
+    await playBtn.waitFor({ state: 'visible', timeout: 3000 });
+    await playBtn.click();
+    await waitForAngularStability(this.page);
+  }
+
+  /**
+   * Get the date info element (created/completed) in task detail
+   */
+  getDateInfo(infoPrefix: string): Locator {
+    return this.page
+      .locator('.edit-date-info')
+      .filter({ hasText: new RegExp(infoPrefix) });
+  }
+}