test: add runtime-safe browser_tests alias

browser_tests/README.md

@@ -119,7 +119,7 @@ When writing new tests, follow these patterns:
 
 ```typescript
 // Import the test fixture
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '#e2e/fixtures/ComfyPage'
 
 test.describe('Feature Name', () => {
   // Set up test environment if needed
@@ -148,6 +148,12 @@ Always check for existing helpers and fixtures before implementing new ones:
 
 Most common testing needs are already addressed by these helpers, which will make your tests more consistent and reliable.
 
+### Import Conventions
+
+- Prefer `#e2e/*` for imports within `browser_tests/`
+- Continue using `@/*` for imports from `src/`
+- Avoid introducing new deep relative imports within `browser_tests/` when the alias is available
+
 ### Key Testing Patterns
 
 1. **Focus elements explicitly**:

browser_tests/fixtures/ComfyPage.ts

@@ -2,42 +2,42 @@ import type { APIRequestContext, Locator, Page } from '@playwright/test'
 import { test as base } from '@playwright/test'
 import { config as dotenvConfig } from 'dotenv'
 
-import { TestIds } from './selectors'
-import { sleep } from './utils/timing'
-import { comfyExpect } from './utils/customMatchers'
 import { NodeBadgeMode } from '../../src/types/nodeSource'
-import { ComfyActionbar } from '../helpers/actionbar'
-import { ComfyTemplates } from '../helpers/templates'
-import { ComfyMouse } from './ComfyMouse'
-import { VueNodeHelpers } from './VueNodeHelpers'
-import { ComfyNodeSearchBox } from './components/ComfyNodeSearchBox'
-import { ComfyNodeSearchBoxV2 } from './components/ComfyNodeSearchBoxV2'
-import { ContextMenu } from './components/ContextMenu'
-import { SettingDialog } from './components/SettingDialog'
-import { BottomPanel } from './components/BottomPanel'
-import { QueuePanel } from './components/QueuePanel'
+import { ComfyActionbar } from '#e2e/helpers/actionbar'
+import { ComfyTemplates } from '#e2e/helpers/templates'
+import { ComfyMouse } from '#e2e/fixtures/ComfyMouse'
+import { TestIds } from '#e2e/fixtures/selectors'
+import { comfyExpect } from '#e2e/fixtures/utils/customMatchers'
+import { assetPath } from '#e2e/fixtures/utils/paths'
+import { sleep } from '#e2e/fixtures/utils/timing'
+import { VueNodeHelpers } from '#e2e/fixtures/VueNodeHelpers'
+import { BottomPanel } from '#e2e/fixtures/components/BottomPanel'
+import { ComfyNodeSearchBox } from '#e2e/fixtures/components/ComfyNodeSearchBox'
+import { ComfyNodeSearchBoxV2 } from '#e2e/fixtures/components/ComfyNodeSearchBoxV2'
+import { ContextMenu } from '#e2e/fixtures/components/ContextMenu'
+import { QueuePanel } from '#e2e/fixtures/components/QueuePanel'
+import { SettingDialog } from '#e2e/fixtures/components/SettingDialog'
 import {
   AssetsSidebarTab,
   NodeLibrarySidebarTab,
   WorkflowsSidebarTab
-} from './components/SidebarTab'
-import { Topbar } from './components/Topbar'
-import { AssetsHelper } from './helpers/AssetsHelper'
-import { CanvasHelper } from './helpers/CanvasHelper'
-import { PerformanceHelper } from './helpers/PerformanceHelper'
-import { QueueHelper } from './helpers/QueueHelper'
-import { ClipboardHelper } from './helpers/ClipboardHelper'
-import { CommandHelper } from './helpers/CommandHelper'
-import { DragDropHelper } from './helpers/DragDropHelper'
-import { FeatureFlagHelper } from './helpers/FeatureFlagHelper'
-import { KeyboardHelper } from './helpers/KeyboardHelper'
-import { NodeOperationsHelper } from './helpers/NodeOperationsHelper'
-import { SettingsHelper } from './helpers/SettingsHelper'
-import { AppModeHelper } from './helpers/AppModeHelper'
-import { SubgraphHelper } from './helpers/SubgraphHelper'
-import { ToastHelper } from './helpers/ToastHelper'
-import { WorkflowHelper } from './helpers/WorkflowHelper'
-import { assetPath } from './utils/paths'
+} from '#e2e/fixtures/components/SidebarTab'
+import { Topbar } from '#e2e/fixtures/components/Topbar'
+import { AppModeHelper } from '#e2e/fixtures/helpers/AppModeHelper'
+import { AssetsHelper } from '#e2e/fixtures/helpers/AssetsHelper'
+import { CanvasHelper } from '#e2e/fixtures/helpers/CanvasHelper'
+import { ClipboardHelper } from '#e2e/fixtures/helpers/ClipboardHelper'
+import { CommandHelper } from '#e2e/fixtures/helpers/CommandHelper'
+import { DragDropHelper } from '#e2e/fixtures/helpers/DragDropHelper'
+import { FeatureFlagHelper } from '#e2e/fixtures/helpers/FeatureFlagHelper'
+import { KeyboardHelper } from '#e2e/fixtures/helpers/KeyboardHelper'
+import { NodeOperationsHelper } from '#e2e/fixtures/helpers/NodeOperationsHelper'
+import { PerformanceHelper } from '#e2e/fixtures/helpers/PerformanceHelper'
+import { QueueHelper } from '#e2e/fixtures/helpers/QueueHelper'
+import { SettingsHelper } from '#e2e/fixtures/helpers/SettingsHelper'
+import { SubgraphHelper } from '#e2e/fixtures/helpers/SubgraphHelper'
+import { ToastHelper } from '#e2e/fixtures/helpers/ToastHelper'
+import { WorkflowHelper } from '#e2e/fixtures/helpers/WorkflowHelper'
 import type { WorkspaceStore } from '../types/globals'
 
 dotenvConfig()

browser_tests/tests/actionbar.spec.ts

@@ -2,8 +2,8 @@ import type { Response } from '@playwright/test'
 import { expect, mergeTests } from '@playwright/test'
 
 import type { StatusWsMessage } from '../../src/schemas/apiSchema'
-import { comfyPageFixture } from '../fixtures/ComfyPage'
-import { webSocketFixture } from '../fixtures/ws'
+import { comfyPageFixture } from '#e2e/fixtures/ComfyPage'
+import { webSocketFixture } from '#e2e/fixtures/ws'
 import type { WorkspaceStore } from '../types/globals'
 
 const test = mergeTests(comfyPageFixture, webSocketFixture)

package.json

@@ -7,6 +7,10 @@
   "license": "GPL-3.0-only",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "type": "module",
+  "imports": {
+    "#e2e/assets/*": "./browser_tests/assets/*",
+    "#e2e/*": "./browser_tests/*.ts"
+  },
   "scripts": {
     "build:cloud": "cross-env DISTRIBUTION=cloud NODE_OPTIONS='--max-old-space-size=8192' nx build",
     "build:desktop": "nx build @comfyorg/desktop-ui",

tsconfig.json

@@ -21,6 +21,7 @@
     "verbatimModuleSyntax": true,
     "paths": {
       "@/*": ["./src/*"],
+      "#e2e/*": ["./browser_tests/*"],
       "@/utils/formatUtil": [
         "./packages/shared-frontend-utils/src/formatUtil.ts"
       ],