fix(e2e): dual-stack selector compatibility — 18/18 specs pass on Tauri

- selectors.ts: dual CSS selectors for all divergent class names
- actions.ts: fallback DOM queries (try primary, then alternatives)
- assertions.ts: waitUntil with dual selectors
- 12 spec files updated with graceful skip for stack-specific features
- 175 tests pass, 30 skip (expected: groups/diagnostics Tauri-absent)
This commit is contained in:
Hibryda 2026-03-22 05:56:01 +01:00
parent 77b9ce9f62
commit 3d74398fde
16 changed files with 482 additions and 236 deletions

View file

@ -1,10 +1,11 @@
/**
* Centralized CSS selectors for all E2E specs.
*
* Both Tauri (WebKit2GTK via tauri-driver) and Electrobun (WebKitGTK) render
* the same Svelte frontend. These selectors work across both stacks.
* Tauri (WebKit2GTK via tauri-driver) and Electrobun (WebKitGTK) render
* different Svelte frontends with different class names. These selectors
* use CSS comma syntax (selector1, selector2) to match both stacks.
*
* Convention: data-testid where available, CSS class fallback.
* Convention: data-testid where available, CSS class fallback with dual selectors.
*/
// ── App Shell ──
@ -13,14 +14,17 @@ export const WORKSPACE = '.workspace';
export const PROJECT_GRID = '.project-grid';
// ── Sidebar ──
export const SIDEBAR = '.sidebar';
export const SIDEBAR_RAIL = '[data-testid="sidebar-rail"]';
// Tauri: .sidebar-rail | Electrobun: .sidebar
export const SIDEBAR = '.sidebar-rail, .sidebar';
export const SIDEBAR_RAIL = '[data-testid="sidebar-rail"], .sidebar';
export const SIDEBAR_PANEL = '.sidebar-panel';
export const SIDEBAR_ICON = '.sidebar-icon';
export const SETTINGS_BTN = '[data-testid="settings-btn"]';
export const PANEL_CLOSE = '.panel-close';
export const SIDEBAR_ICON = '.sidebar-icon, .rail-btn';
export const SETTINGS_BTN = '[data-testid="settings-btn"], .sidebar-icon';
export const PANEL_CLOSE = '.panel-close, .settings-close';
// ── Groups ──
// Electrobun has numbered group circles; Tauri uses GlobalTabBar (no groups).
// Tests should gracefully skip if these don't exist.
export const GROUP_BTN = '.group-btn';
export const GROUP_CIRCLE = '.group-circle';
export const GROUP_BTN_ACTIVE = '.group-btn.active';
@ -28,38 +32,41 @@ export const ADD_GROUP_BTN = '.add-group-btn';
export const GROUP_BADGE = '.group-badge';
// ── Project Cards ──
export const PROJECT_CARD = '.project-card';
// Tauri: .project-box | Electrobun: .project-card
export const PROJECT_CARD = '.project-box, .project-card';
export const PROJECT_HEADER = '.project-header';
export const AGOR_TITLE = '.agor-title';
// ── Status Bar ──
export const STATUS_BAR = '[data-testid="status-bar"]';
// Both use [data-testid="status-bar"] and .status-bar
export const STATUS_BAR = '[data-testid="status-bar"], .status-bar';
export const STATUS_BAR_CLASS = '.status-bar';
export const STATUS_BAR_VERSION = '.status-bar .version';
export const BURN_RATE = '.burn-rate';
export const AGENT_COUNTS = '.agent-counts';
export const ATTENTION_QUEUE = '.attention-queue';
export const FLEET_TOKENS = '.fleet-tokens';
export const FLEET_COST = '.fleet-cost';
export const ATTENTION_QUEUE = '.attention-queue, .attention-btn';
export const FLEET_TOKENS = '.fleet-tokens, .tokens';
export const FLEET_COST = '.fleet-cost, .cost';
export const PROJECT_COUNT = '.project-count';
// ── Settings ──
export const SETTINGS_DRAWER = '.settings-drawer';
export const SETTINGS_TAB = '.settings-tab';
export const SETTINGS_TAB_ACTIVE = '.settings-tab.active';
export const SETTINGS_CLOSE = '.settings-close';
export const SETTINGS_CAT_BTN = '.cat-btn';
// Tauri: .settings-panel inside .sidebar-panel | Electrobun: .settings-drawer
export const SETTINGS_DRAWER = '.settings-panel, .settings-drawer, .sidebar-panel';
export const SETTINGS_TAB = '.settings-tab, .sidebar-item';
export const SETTINGS_TAB_ACTIVE = '.settings-tab.active, .sidebar-item.active';
export const SETTINGS_CLOSE = '.settings-close, .panel-close';
export const SETTINGS_CAT_BTN = '.cat-btn, .sidebar-item';
export const THEME_SECTION = '.theme-section';
export const FONT_STEPPER = '.font-stepper';
export const FONT_DROPDOWN = '.font-dropdown';
export const STEP_UP = '.font-stepper .step-up';
export const SIZE_VALUE = '.font-stepper .size-value';
export const FONT_STEPPER = '.font-stepper, .stepper, .size-stepper';
export const FONT_DROPDOWN = '.font-dropdown, .custom-dropdown';
export const STEP_UP = '.font-stepper .step-up, .stepper .step-up';
export const SIZE_VALUE = '.font-stepper .size-value, .stepper .size-value';
export const UPDATE_ROW = '.update-row';
export const VERSION_LABEL = '.version-label';
// ── Terminal ──
export const TERMINAL_SECTION = '.terminal-section';
export const TERMINAL_TABS = '.terminal-tabs';
export const TERMINAL_TABS = '.terminal-tabs, [data-testid="terminal-tabs"]';
export const TERMINAL_TAB = '.terminal-tab';
export const TERMINAL_TAB_ACTIVE = '.terminal-tab.active';
export const TAB_ADD_BTN = '.tab-add-btn';
@ -82,8 +89,9 @@ export const MODEL_LABEL = '.model-label';
export const STOP_BTN = '.stop-btn';
// ── Search Overlay ──
export const OVERLAY_BACKDROP = '.overlay-backdrop';
export const OVERLAY_PANEL = '.overlay-panel';
// Tauri: .search-backdrop, .search-overlay | Electrobun: .overlay-backdrop, .overlay-panel
export const OVERLAY_BACKDROP = '.overlay-backdrop, .search-backdrop';
export const OVERLAY_PANEL = '.overlay-panel, .search-overlay';
export const SEARCH_INPUT = '.search-input';
export const NO_RESULTS = '.no-results';
export const ESC_HINT = '.esc-hint';
@ -93,7 +101,8 @@ export const GROUP_LABEL = '.group-label';
// ── Command Palette ──
export const PALETTE_BACKDROP = '.palette-backdrop';
export const PALETTE_PANEL = '.palette-panel';
// Tauri: .palette [data-testid="command-palette"] | Electrobun: .palette-panel
export const PALETTE_PANEL = '.palette-panel, .palette, [data-testid="command-palette"]';
export const PALETTE_INPUT = '.palette-input';
export const PALETTE_ITEM = '.palette-item';
export const CMD_LABEL = '.cmd-label';
@ -134,22 +143,23 @@ export const TB_CREATE_FORM = '.tb-create-form';
export const TB_COUNT = '.tb-count';
// ── Theme ──
export const DD_BTN = '.dd-btn';
export const DD_LIST = '.dd-list';
export const DD_GROUP_LABEL = '.dd-group-label';
export const DD_ITEM = '.dd-item';
export const DD_ITEM_SELECTED = '.dd-item.selected';
export const SIZE_STEPPER = '.size-stepper';
export const DD_BTN = '.dd-btn, .dropdown-btn';
export const DD_LIST = '.dd-list, .dropdown-menu';
export const DD_GROUP_LABEL = '.dd-group-label, .dropdown-group-label';
export const DD_ITEM = '.dd-item, .dropdown-item';
export const DD_ITEM_SELECTED = '.dd-item.selected, .dropdown-item.active';
export const SIZE_STEPPER = '.size-stepper, .font-stepper, .stepper';
export const THEME_ACTION_BTN = '.theme-action-btn';
// ── Notifications ──
export const NOTIF_BTN = '.notif-btn';
export const NOTIF_DRAWER = '.notif-drawer';
export const DRAWER_TITLE = '.drawer-title';
export const CLEAR_BTN = '.clear-btn';
export const NOTIF_EMPTY = '.notif-empty';
export const NOTIF_ITEM = '.notif-item';
export const NOTIF_BACKDROP = '.notif-backdrop';
// Tauri: .bell-btn, .notification-center .panel | Electrobun: .notif-btn, .notif-drawer
export const NOTIF_BTN = '.notif-btn, .bell-btn, [data-testid="notification-bell"]';
export const NOTIF_DRAWER = '.notif-drawer, .notification-center .panel, [data-testid="notification-panel"]';
export const DRAWER_TITLE = '.drawer-title, .panel-title';
export const CLEAR_BTN = '.clear-btn, .action-btn';
export const NOTIF_EMPTY = '.notif-empty, .empty';
export const NOTIF_ITEM = '.notif-item, .notification-item';
export const NOTIF_BACKDROP = '.notif-backdrop, .notification-center .backdrop';
// ── Splash ──
export const SPLASH = '.splash';
@ -157,7 +167,7 @@ export const LOGO_TEXT = '.logo-text';
export const SPLASH_VERSION = '.splash .version';
export const SPLASH_DOT = '.splash .dot';
// ── Diagnostics ──
// ── Diagnostics (Electrobun-only) ──
export const DIAGNOSTICS = '.diagnostics';
export const DIAG_HEADING = '.diagnostics .sh';
export const DIAG_KEY = '.diag-key';
@ -165,7 +175,7 @@ export const DIAG_LABEL = '.diag-label';
export const DIAG_FOOTER = '.diag-footer';
export const REFRESH_BTN = '.refresh-btn';
// ── Right Bar (Electrobun) ──
// ── Right Bar (Electrobun-only) ──
export const RIGHT_BAR = '.right-bar';
export const CLOSE_BTN = '.close-btn';