E2E: Fix stale selectors in workflow/dialog specs

[ggfevans]

Parent Epic

Part of #1222 (E2E Testing Coverage & Stability Improvements)

Context

Several specs test UI workflows (new rack creation, rack configuration, export, keyboard shortcuts, view reset) using CSS class selectors and dialog patterns that no longer match the current bits-ui component structure.

Affected Specs

1. e2e/single-rack.spec.ts (6 tests failing)

Root causes: Dialog selectors, rack dual-view name, replace confirmation flow

Line	Stale Selector	Notes
15, 39, 65-70, 81, 97, 127	.rack-dual-view-name	Verify this class still exists in RackDualView.svelte
23-28	h2:has-text("Replace Current Rack?")	Verify replace confirmation dialog uses <h2> with this exact text
26-27	button:has-text("Save First"), button:has-text("Replace")	Verify button labels in replace dialog
56-57	#rack-name, h2:has-text("New Rack")	Verify NewRackForm field ID and dialog title
161-166	.dialog[role="dialog"] text matching	Verify dialog shows rack name and device count

Test flow: clickNewRack() → expects "Replace Current Rack?" dialog → clicks Replace/Cancel → expects New Rack form. This entire replace-confirmation flow needs verification.

2. e2e/rack-configuration.spec.ts (3 tests failing, 3 skipped)

Root causes: New Rack form selectors inside replace dialog

Line	Stale Selector	Notes
11	openNewRackForm() helper clicks Replace → expects .dialog	Verify dialog class
23	#rack-name	Verify form field ID in NewRackForm
24, 51, 83	.height-btn:has-text("24U"), "42U", "Custom"	Verify height preset button class name
27	.width-option:has-text("10")	Verify width radio button class
84	#custom-height	Verify custom height input ID
94	.u-label	Verify SVG unit label class in Rack.svelte

Approach: Read src/lib/components/NewRackForm.svelte to audit all form element IDs and class names.

3. e2e/export.spec.ts (1 test failing, 6 tests likely intermittent)

Root cause: Export dialog button selector is fragile

Line	Stale Selector	Notes
50, 67, 84, 105	button:has-text("Export"):not([aria-label])	Fragile — should use a more specific selector inside the dialog
31-37	#export-format, option[value="png"] etc.	Verify ExportDialog select element ID
95-98	label:has-text("Include legend") input[type="checkbox"]	Verify legend checkbox selector
23-24	.dialog, .dialog-title	Verify dialog class names (bits-ui Dialog?)

Approach: Read src/lib/components/ExportDialog.svelte for current form structure.

4. e2e/keyboard.spec.ts (4 tests failing)

Root causes: Dialog class names, drawer class names

Line	Stale Selector	Notes
28, 50, 77, 100, 106	.dialog	Verify dialog class (bits-ui uses different structure)
29, 51	[role="dialog"] button:has-text("Delete Rack")	Verify delete confirmation dialog button text
63, 69	.drawer-right.open	Verify edit panel drawer selector
78	.dialog-title with text "Help"	Verify HelpPanel dialog title selector

5. e2e/view-reset.spec.ts (1 test failing)

Root causes: Edit panel drawer and height preset selectors

Line	Stale Selector	Notes
67, 102	.drawer-right.open	Verify edit panel drawer class
83	.drawer-right .preset-btn:has-text("42U")	Verify height preset button class inside edit panel
118	.drawer-right #rack-height	Verify height input ID inside edit panel

Note: The view-reset spec's "view resets when creating a new rack" test (line 24) may fail because clickNewRack() → Replace → Create triggers the replace dialog first (same issue as single-rack.spec.ts).

Discovery Work Needed

Before fixing, audit these source files:

• src/lib/components/NewRackForm.svelte — form field IDs (#rack-name, #custom-height), height preset classes (.height-btn), width option classes (.width-option)
• src/lib/components/ExportDialog.svelte — format select ID (#export-format), legend checkbox, Export button
• src/lib/components/EditPanel.svelte — drawer classes (.drawer-right), height preset buttons (.preset-btn), height input ID
• src/lib/components/HelpPanel.svelte — dialog title class
• src/lib/components/ConfirmDialog.svelte — dialog and button classes for delete/replace confirmation
• src/lib/components/RackDualView.svelte — rack name class (.rack-dual-view-name)

Verification

npx playwright test e2e/single-rack.spec.ts e2e/rack-configuration.spec.ts e2e/export.spec.ts e2e/keyboard.spec.ts e2e/view-reset.spec.ts --project chromium

Estimate

Short-Medium — ~1-2 hours. Requires selector auditing across multiple components, but no test logic rewrites.