fix: address CodeRabbit review — remove .or(body) fallback, use TestIds, stricter assertions

Author: christian-byrne

browser_tests/fixtures/selectors.ts

@@ -5,70 +5,71 @@
 
 export const TestIds = {
   sidebar: {
-    toolbar: 'side-toolbar',
-    nodeLibrary: 'node-library-tree',
-    nodeLibrarySearch: 'node-library-search',
-    workflows: 'workflows-sidebar',
-    modeToggle: 'mode-toggle'
+    toolbar: "side-toolbar",
+    nodeLibrary: "node-library-tree",
+    nodeLibrarySearch: "node-library-search",
+    workflows: "workflows-sidebar",
+    modeToggle: "mode-toggle",
   },
   tree: {
-    folder: 'tree-folder',
-    leaf: 'tree-leaf',
-    node: 'tree-node'
+    folder: "tree-folder",
+    leaf: "tree-leaf",
+    node: "tree-node",
   },
   canvas: {
-    main: 'graph-canvas',
-    contextMenu: 'canvas-context-menu',
-    toggleMinimapButton: 'toggle-minimap-button',
-    toggleLinkVisibilityButton: 'toggle-link-visibility-button'
+    main: "graph-canvas",
+    contextMenu: "canvas-context-menu",
+    toggleMinimapButton: "toggle-minimap-button",
+    toggleLinkVisibilityButton: "toggle-link-visibility-button",
   },
   dialogs: {
-    settings: 'settings-dialog',
-    settingsContainer: 'settings-container',
-    settingsTabAbout: 'settings-tab-about',
-    confirm: 'confirm-dialog',
-    errorOverlay: 'error-overlay',
-    missingNodeCard: 'missing-node-card',
-    about: 'about-panel',
-    whatsNewSection: 'whats-new-section'
+    settings: "settings-dialog",
+    settingsContainer: "settings-container",
+    settingsTabAbout: "settings-tab-about",
+    confirm: "confirm-dialog",
+    errorOverlay: "error-overlay",
+    missingNodeCard: "missing-node-card",
+    about: "about-panel",
+    whatsNewSection: "whats-new-section",
   },
   topbar: {
-    queueButton: 'queue-button',
-    queueModeMenuTrigger: 'queue-mode-menu-trigger',
-    saveButton: 'save-workflow-button'
+    queueButton: "queue-button",
+    queueModeMenuTrigger: "queue-mode-menu-trigger",
+    saveButton: "save-workflow-button",
+    subscribeButton: "topbar-subscribe-button",
   },
   nodeLibrary: {
-    bookmarksSection: 'node-library-bookmarks-section'
+    bookmarksSection: "node-library-bookmarks-section",
   },
   propertiesPanel: {
-    root: 'properties-panel'
+    root: "properties-panel",
   },
   node: {
-    titleInput: 'node-title-input'
+    titleInput: "node-title-input",
   },
   selectionToolbox: {
-    colorPickerButton: 'color-picker-button',
-    colorPickerCurrentColor: 'color-picker-current-color',
-    colorBlue: 'blue',
-    colorRed: 'red'
+    colorPickerButton: "color-picker-button",
+    colorPickerCurrentColor: "color-picker-current-color",
+    colorBlue: "blue",
+    colorRed: "red",
   },
   widgets: {
-    decrement: 'decrement',
-    increment: 'increment',
-    domWidgetTextarea: 'dom-widget-textarea',
-    subgraphEnterButton: 'subgraph-enter-button'
+    decrement: "decrement",
+    increment: "increment",
+    domWidgetTextarea: "dom-widget-textarea",
+    subgraphEnterButton: "subgraph-enter-button",
   },
   breadcrumb: {
-    subgraph: 'subgraph-breadcrumb'
+    subgraph: "subgraph-breadcrumb",
   },
   templates: {
-    content: 'template-workflows-content',
-    workflowCard: (id: string) => `template-workflow-${id}`
+    content: "template-workflows-content",
+    workflowCard: (id: string) => `template-workflow-${id}`,
   },
   user: {
-    currentUserIndicator: 'current-user-indicator'
-  }
-} as const
+    currentUserIndicator: "current-user-indicator",
+  },
+} as const;
 
 /**
  * Helper type for accessing nested TestIds (excludes function values)
@@ -89,4 +90,4 @@ export type TestIdValue =
       (typeof TestIds.templates)[keyof typeof TestIds.templates],
       (id: string) => string
     >
-  | (typeof TestIds.user)[keyof typeof TestIds.user]
+  | (typeof TestIds.user)[keyof typeof TestIds.user];

browser_tests/tests/cloud.spec.ts

@@ -1,32 +1,28 @@
-import { expect } from '@playwright/test'
+import { expect } from "@playwright/test";
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from "../fixtures/ComfyPage";
+import { TestIds } from "../fixtures/selectors";
 
-test.describe('Cloud distribution UI @cloud', () => {
-  test('subscribe button is visible for free-tier users @cloud', async ({
-    comfyPage
+test.describe("Cloud distribution UI @cloud", () => {
+  test("subscribe button is visible for free-tier users @cloud", async ({
+    comfyPage,
   }) => {
     const subscribeButton = comfyPage.page.getByTestId(
-      'topbar-subscribe-button'
-    )
-    // In cloud mode with a free-tier user, the subscribe button should render.
-    // It may not be visible if the user is not free-tier, so we check the DOM.
-    // Full visibility depends on subscription state which requires auth mocking.
-    await expect(
-      subscribeButton.or(comfyPage.page.locator('body'))
-    ).toBeVisible()
-  })
+      TestIds.topbar.subscribeButton,
+    );
+    await expect(subscribeButton).toBeAttached();
+  });
 
-  test('bottom panel toggle is hidden in cloud mode @cloud', async ({
-    comfyPage
+  test("bottom panel toggle is hidden in cloud mode @cloud", async ({
+    comfyPage,
   }) => {
-    const sideToolbar = comfyPage.page.getByTestId('side-toolbar')
-    await expect(sideToolbar).toBeVisible()
+    const sideToolbar = comfyPage.page.getByTestId(TestIds.sidebar.toolbar);
+    await expect(sideToolbar).toBeVisible();
 
     // In cloud mode, the bottom panel toggle button should not be rendered
-    const bottomPanelToggle = sideToolbar.getByRole('button', {
-      name: /bottom panel|terminal/i
-    })
-    await expect(bottomPanelToggle).toBeHidden()
-  })
-})
+    const bottomPanelToggle = sideToolbar.getByRole("button", {
+      name: /bottom panel|terminal/i,
+    });
+    await expect(bottomPanelToggle).toHaveCount(0);
+  });
+});