Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-29 02:32:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: browser_tests Phase 1 - mechanical fixes

Browse Source 
- Rename dragAndDrop to dragDrop (7 occurrences)

- Add override modifiers in SidebarTab.ts (4 fixes)

- Remove .ts import extensions in actionbar.spec.ts

- Prefix unused variables with underscore (9 files)

- Fix ESLint import() type annotation in globals.d.ts

Reduces typecheck:browser errors from 229 to 215

Amp-Thread-ID: https://ampcode.com/threads/T-019c1787-c781-761d-b95a-4844e909e64c
Co-authored-by: Amp <amp@ampcode.com>
This commit is contained in:
Alexander Brown
2026-01-31 21:05:08 -08:00
parent 6cd105fdf0
commit b56045c462
34 changed files with 181 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
browser_tests/fixtures/ComfyPage.ts
View File

@@ -96,7 +96,7 @@ class ComfyMenu {
async getThemeId() {
return await this.page.evaluate(async () => {
return await window.app.ui.settings.getSettingValue('Comfy.ColorPalette')
return await window.app!.ui.settings.getSettingValue('Comfy.ColorPalette')
})
}
}
@@ -382,7 +382,7 @@ export class ComfyPage {
async setFocusMode(focusMode: boolean) {
await this.page.evaluate((focusMode) => {
window.app.extensionManager.focusMode = focusMode
window.app!.extensionManager.focusMode = focusMode
}, focusMode)
await this.nextFrame()
}

8
browser_tests/fixtures/components/SidebarTab.ts
View File

@@ -33,7 +33,7 @@ class SidebarTab {
}
export class NodeLibrarySidebarTab extends SidebarTab {
constructor(public readonly page: Page) {
constructor(public override readonly page: Page) {
super(page, 'node-library')
}
@@ -59,12 +59,12 @@ export class NodeLibrarySidebarTab extends SidebarTab {
return this.tabContainer.locator('.new-folder-button')
}
async open() {
override async open() {
await super.open()
await this.nodeLibraryTree.waitFor({ state: 'visible' })
}
async close() {
override async close() {
if (!this.tabButton.isVisible()) {
return
}
@@ -101,7 +101,7 @@ export class NodeLibrarySidebarTab extends SidebarTab {
}
export class WorkflowsSidebarTab extends SidebarTab {
constructor(public readonly page: Page) {
constructor(public override readonly page: Page) {
super(page, 'workflows')
}

2
browser_tests/fixtures/components/Topbar.ts
View File

@@ -85,7 +85,7 @@ export class Topbar {
// Wait for workflow service to finish saving
await this.page.waitForFunction(
() => !window.app.extensionManager.workflow.isBusy,
() => !window.app!.extensionManager.workflow.isBusy,
undefined,
{ timeout: 3000 }
)

12
browser_tests/fixtures/helpers/CanvasHelper.ts
View File

@@ -93,13 +93,13 @@ export class CanvasHelper {
async getScale(): Promise<number> {
return this.page.evaluate(() => {
return window.app.canvas.ds.scale
return window.app!.canvas.ds.scale
})
}
async setScale(scale: number): Promise<void> {
await this.page.evaluate((s) => {
window.app.canvas.ds.scale = s
window.app!.canvas.ds.scale = s
}, scale)
await this.nextFrame()
}
@@ -108,13 +108,13 @@ export class CanvasHelper {
pos: [number, number]
): Promise<[number, number]> {
return this.page.evaluate((pos) => {
return window.app.canvas.ds.convertOffsetToCanvas(pos)
return window.app!.canvas.ds.convertOffsetToCanvas(pos)
}, pos)
}
async getNodeCenterByTitle(title: string): Promise<Position | null> {
return this.page.evaluate((title) => {
const app = window.app
const app = window.app!
const node = app.graph.nodes.find(
(n: { title: string }) => n.title === title
)
@@ -129,7 +129,7 @@ export class CanvasHelper {
async getGroupPosition(title: string): Promise<Position> {
const pos = await this.page.evaluate((title) => {
const groups = window.app.graph.groups
const groups = window.app!.graph.groups
const group = groups.find((g: { title: string }) => g.title === title)
if (!group) return null
return { x: group.pos[0], y: group.pos[1] }
@@ -145,7 +145,7 @@ export class CanvasHelper {
}): Promise<void> {
const { name, deltaX, deltaY } = options
const screenPos = await this.page.evaluate((title) => {
const app = window.app
const app = window.app!
const groups = app.graph.groups
const group = groups.find((g: { title: string }) => g.title === title)
if (!group) return null

2
browser_tests/fixtures/helpers/ClipboardHelper.ts
View File

@@ -5,7 +5,7 @@ import type { KeyboardHelper } from './KeyboardHelper'
export class ClipboardHelper {
constructor(
private readonly keyboard: KeyboardHelper,
private readonly canvas: Locator
private readonly _canvas: Locator
) {}
async copy(locator?: Locator | null): Promise<void> {

6
browser_tests/fixtures/helpers/CommandHelper.ts
View File

@@ -7,7 +7,7 @@ export class CommandHelper {
async executeCommand(commandId: string): Promise<void> {
await this.page.evaluate((id: string) => {
return window.app.extensionManager.command.execute(id)
return window.app!.extensionManager.command.execute(id)
}, commandId)
}
@@ -17,7 +17,7 @@ export class CommandHelper {
): Promise<void> {
await this.page.evaluate(
({ commandId, commandStr }) => {
const app = window.app
const app = window.app!
const randomSuffix = Math.random().toString(36).substring(2, 8)
const extensionName = `TestExtension_${randomSuffix}`
@@ -41,7 +41,7 @@ export class CommandHelper {
): Promise<void> {
await this.page.evaluate(
({ keyCombo, commandStr }) => {
const app = window.app
const app = window.app!
const randomSuffix = Math.random().toString(36).substring(2, 8)
const extensionName = `TestExtension_${randomSuffix}`
const commandId = `TestCommand_${randomSuffix}`

10
browser_tests/fixtures/helpers/NodeOperationsHelper.ts
View File

@@ -35,7 +35,7 @@ export class NodeOperationsHelper {
async getNodes(): Promise<LGraphNode[]> {
return await this.page.evaluate(() => {
return window.app.graph.nodes
return window.app!.graph.nodes
})
}
@@ -47,7 +47,7 @@ export class NodeOperationsHelper {
async getFirstNodeRef(): Promise<NodeReference | null> {
const id = await this.page.evaluate(() => {
return window.app.graph.nodes[0]?.id
return window.app!.graph.nodes[0]?.id
})
if (!id) return null
return this.getNodeRefById(id)
@@ -66,7 +66,7 @@ export class NodeOperationsHelper {
await this.page.evaluate(
({ type, includeSubgraph }) => {
const graph = (
includeSubgraph ? window.app.canvas.graph : window.app.graph
includeSubgraph ? window.app!.canvas.graph : window.app!.graph
) as LGraph
const nodes = graph.nodes
return nodes
@@ -83,8 +83,8 @@ export class NodeOperationsHelper {
return Promise.all(
(
await this.page.evaluate((title) => {
return window.app.graph.nodes
.filter((n: LGraphNode) => n.title === title)
return window
.app!.graph.nodes.filter((n: LGraphNode) => n.title === title)
.map((n: LGraphNode) => n.id)
}, title)
).map((id: NodeId) => this.getNodeRefById(id))

4
browser_tests/fixtures/helpers/SettingsHelper.ts
View File

@@ -6,7 +6,7 @@ export class SettingsHelper {
async setSetting(settingId: string, settingValue: unknown): Promise<void> {
await this.page.evaluate(
async ({ id, value }) => {
await window.app.extensionManager.setting.set(id, value)
await window.app!.extensionManager.setting.set(id, value)
},
{ id: settingId, value: settingValue }
)
@@ -14,7 +14,7 @@ export class SettingsHelper {
async getSetting<T = unknown>(settingId: string): Promise<T> {
return await this.page.evaluate(async (id) => {
return await window.app.extensionManager.setting.get(id)
return await window.app!.extensionManager.setting.get(id)
}, settingId)
}
}

10
browser_tests/fixtures/helpers/SubgraphHelper.ts
View File

@@ -27,7 +27,7 @@ export class SubgraphHelper {
const foundSlot = await this.page.evaluate(
async (params) => {
const { slotType, action, targetSlotName } = params
const app = window.app
const app = window.app!
const currentGraph = app.canvas.graph
// Check if we're in a subgraph
@@ -242,7 +242,7 @@ export class SubgraphHelper {
? await targetSlot.getPosition() // Connect to existing slot
: await targetSlot.getOpenSlotPosition() // Create new slot
await this.comfyPage.dragAndDrop(
await this.comfyPage.dragDrop(
await sourceSlot.getPosition(),
targetPosition
)
@@ -267,7 +267,7 @@ export class SubgraphHelper {
const targetPosition = await targetSlot.getPosition()
await this.comfyPage.dragAndDrop(sourcePosition, targetPosition)
await this.comfyPage.dragDrop(sourcePosition, targetPosition)
await this.comfyPage.nextFrame()
}
@@ -287,7 +287,7 @@ export class SubgraphHelper {
? await targetSlot.getPosition() // Connect to existing slot
: await targetSlot.getOpenSlotPosition() // Create new slot
await this.comfyPage.dragAndDrop(
await this.comfyPage.dragDrop(
await sourceSlot.getPosition(),
targetPosition
)
@@ -310,7 +310,7 @@ export class SubgraphHelper {
? await sourceSlot.getPosition() // Connect from existing slot
: await sourceSlot.getOpenSlotPosition() // Create new slot
await this.comfyPage.dragAndDrop(
await this.comfyPage.dragDrop(
sourcePosition,
await targetSlot.getPosition()
)

10
browser_tests/fixtures/helpers/WorkflowHelper.ts
View File

@@ -45,7 +45,7 @@ export class WorkflowHelper {
}
await this.comfyPage.page.evaluate(async () => {
await window.app.extensionManager.workflow.syncWorkflows()
await window.app!.extensionManager.workflow.syncWorkflows()
})
// Wait for Vue to re-render the workflow list
@@ -86,7 +86,7 @@ export class WorkflowHelper {
async getUndoQueueSize(): Promise<number | undefined> {
return this.comfyPage.page.evaluate(() => {
const workflow = (window.app.extensionManager as WorkspaceStore).workflow
const workflow = (window.app!.extensionManager as WorkspaceStore).workflow
.activeWorkflow
return workflow?.changeTracker.undoQueue.length
})
@@ -94,7 +94,7 @@ export class WorkflowHelper {
async getRedoQueueSize(): Promise<number | undefined> {
return this.comfyPage.page.evaluate(() => {
const workflow = (window.app.extensionManager as WorkspaceStore).workflow
const workflow = (window.app!.extensionManager as WorkspaceStore).workflow
.activeWorkflow
return workflow?.changeTracker.redoQueue.length
})
@@ -102,7 +102,7 @@ export class WorkflowHelper {
async isCurrentWorkflowModified(): Promise<boolean | undefined> {
return this.comfyPage.page.evaluate(() => {
return (window.app.extensionManager as WorkspaceStore).workflow
return (window.app!.extensionManager as WorkspaceStore).workflow
.activeWorkflow?.isModified
})
}
@@ -110,7 +110,7 @@ export class WorkflowHelper {
async getExportedWorkflow(options?: { api?: boolean }): Promise<any> {
const api = options?.api ?? false
return this.comfyPage.page.evaluate(async (api) => {
return (await window.app.graphToPrompt())[api ? 'output' : 'workflow']
return (await window.app!.graphToPrompt())[api ? 'output' : 'workflow']
}, api)
}
}

50
browser_tests/fixtures/utils/litegraphUtils.ts
View File

@@ -23,7 +23,7 @@ export class SubgraphSlotReference {
async getPosition(): Promise<Position> {
const pos: [number, number] = await this.comfyPage.page.evaluate(
([type, slotName]) => {
const currentGraph = window.app.canvas.graph
const currentGraph = window.app!.canvas.graph
// Check if we're in a subgraph
if (currentGraph.constructor.name !== 'Subgraph') {
@@ -52,7 +52,7 @@ export class SubgraphSlotReference {
}
// Convert from offset to canvas coordinates
const canvasPos = window.app.canvas.ds.convertOffsetToCanvas([
const canvasPos = window.app!.canvas.ds.convertOffsetToCanvas([
slot.pos[0],
slot.pos[1]
])
@@ -70,7 +70,7 @@ export class SubgraphSlotReference {
async getOpenSlotPosition(): Promise<Position> {
const pos: [number, number] = await this.comfyPage.page.evaluate(
([type]) => {
const currentGraph = window.app.canvas.graph
const currentGraph = window.app!.canvas.graph
if (currentGraph.constructor.name !== 'Subgraph') {
throw new Error(
@@ -86,7 +86,7 @@ export class SubgraphSlotReference {
}
// Convert from offset to canvas coordinates
const canvasPos = window.app.canvas.ds.convertOffsetToCanvas([
const canvasPos = window.app!.canvas.ds.convertOffsetToCanvas([
node.emptySlot.pos[0],
node.emptySlot.pos[1]
])
@@ -112,11 +112,11 @@ class NodeSlotReference {
const pos: [number, number] = await this.node.comfyPage.page.evaluate(
([type, id, index]) => {
// Use canvas.graph to get the current graph (works in both main graph and subgraphs)
const node = window.app.canvas.graph.getNodeById(id)
const node = window.app!.canvas.graph.getNodeById(id)
if (!node) throw new Error(`Node ${id} not found.`)
const rawPos = node.getConnectionPos(type === 'input', index)
const convertedPos = window.app.canvas.ds.convertOffsetToCanvas(rawPos)
const convertedPos = window.app!.canvas.ds.convertOffsetToCanvas(rawPos)
// Debug logging - convert Float64Arrays to regular arrays for visibility
console.warn(
@@ -126,7 +126,7 @@ class NodeSlotReference {
nodeSize: [node.size[0], node.size[1]],
rawConnectionPos: [rawPos[0], rawPos[1]],
convertedPos: [convertedPos[0], convertedPos[1]],
currentGraphType: window.app.canvas.graph.constructor.name
currentGraphType: window.app!.canvas.graph.constructor.name
}
)
@@ -142,7 +142,7 @@ class NodeSlotReference {
async getLinkCount() {
return await this.node.comfyPage.page.evaluate(
([type, id, index]) => {
const node = window.app.canvas.graph.getNodeById(id)
const node = window.app!.canvas.graph.getNodeById(id)
if (!node) throw new Error(`Node ${id} not found.`)
if (type === 'input') {
return node.inputs[index].link == null ? 0 : 1
@@ -155,7 +155,7 @@ class NodeSlotReference {
async removeLinks() {
await this.node.comfyPage.page.evaluate(
([type, id, index]) => {
const node = window.app.canvas.graph.getNodeById(id)
const node = window.app!.canvas.graph.getNodeById(id)
if (!node) throw new Error(`Node ${id} not found.`)
if (type === 'input') {
node.disconnectInput(index)
@@ -180,15 +180,15 @@ class NodeWidgetReference {
async getPosition(): Promise<Position> {
const pos: [number, number] = await this.node.comfyPage.page.evaluate(
([id, index]) => {
const node = window.app.canvas.graph.getNodeById(id)
const node = window.app!.canvas.graph.getNodeById(id)
if (!node) throw new Error(`Node ${id} not found.`)
const widget = node.widgets[index]
if (!widget) throw new Error(`Widget ${index} not found.`)
const [x, y, w, h] = node.getBounding()
return window.app.canvasPosToClientPos([
const [x, y, w, _h] = node.getBounding()
return window.app!.canvasPosToClientPos([
x + w / 2,
y + window.LiteGraph['NODE_TITLE_HEIGHT'] + widget.last_y + 1
y + window.LiteGraph!['NODE_TITLE_HEIGHT'] + widget.last_y + 1
])
},
[this.node.id, this.index] as const
@@ -205,7 +205,7 @@ class NodeWidgetReference {
async getSocketPosition(): Promise<Position> {
const pos: [number, number] = await this.node.comfyPage.page.evaluate(
([id, index]) => {
const node = window.app.graph.getNodeById(id)
const node = window.app!.graph.getNodeById(id)
if (!node) throw new Error(`Node ${id} not found.`)
const widget = node.widgets[index]
if (!widget) throw new Error(`Widget ${index} not found.`)
@@ -216,9 +216,9 @@ class NodeWidgetReference {
if (!slot) throw new Error(`Socket ${widget.name} not found.`)
const [x, y] = node.getBounding()
return window.app.canvasPosToClientPos([
return window.app!.canvasPosToClientPos([
x + slot.pos[0],
y + slot.pos[1] + window.LiteGraph['NODE_TITLE_HEIGHT']
y + slot.pos[1] + window.LiteGraph!['NODE_TITLE_HEIGHT']
])
},
[this.node.id, this.index] as const
@@ -239,7 +239,7 @@ class NodeWidgetReference {
const pos = await this.getPosition()
const canvas = this.node.comfyPage.canvas
const canvasPos = (await canvas.boundingBox())!
await this.node.comfyPage.dragAndDrop(
await this.node.comfyPage.dragDrop(
{
x: canvasPos.x + pos.x,
y: canvasPos.y + pos.y
@@ -254,7 +254,7 @@ class NodeWidgetReference {
async getValue() {
return await this.node.comfyPage.page.evaluate(
([id, index]) => {
const node = window.app.graph.getNodeById(id)
const node = window.app!.graph.getNodeById(id)
if (!node) throw new Error(`Node ${id} not found.`)
const widget = node.widgets[index]
if (!widget) throw new Error(`Widget ${index} not found.`)
@@ -271,7 +271,7 @@ export class NodeReference {
) {}
async exists(): Promise<boolean> {
return await this.comfyPage.page.evaluate((id) => {
const node = window.app.canvas.graph.getNodeById(id)
const node = window.app!.canvas.graph.getNodeById(id)
return !!node
}, this.id)
}
@@ -290,7 +290,7 @@ export class NodeReference {
async getBounding(): Promise<Position & Size> {
const [x, y, width, height]: [number, number, number, number] =
await this.comfyPage.page.evaluate((id) => {
const node = window.app.canvas.graph.getNodeById(id)
const node = window.app!.canvas.graph.getNodeById(id)
if (!node) throw new Error('Node not found')
return node.getBounding()
}, this.id)
@@ -328,7 +328,7 @@ export class NodeReference {
async getProperty<T>(prop: string): Promise<T> {
return await this.comfyPage.page.evaluate(
([id, prop]) => {
const node = window.app.canvas.graph.getNodeById(id)
const node = window.app!.canvas.graph.getNodeById(id)
if (!node) throw new Error('Node not found')
return node[prop]
},
@@ -389,7 +389,7 @@ export class NodeReference {
) {
const originSlot = await this.getOutput(originSlotIndex)
const targetWidget = await targetNode.getWidget(targetWidgetIndex)
await this.comfyPage.dragAndDrop(
await this.comfyPage.dragDrop(
await originSlot.getPosition(),
await targetWidget.getSocketPosition()
)
@@ -402,7 +402,7 @@ export class NodeReference {
) {
const originSlot = await this.getOutput(originSlotIndex)
const targetSlot = await targetNode.getInput(targetSlotIndex)
await this.comfyPage.dragAndDrop(
await this.comfyPage.dragDrop(
await originSlot.getPosition(),
await targetSlot.getPosition()
)
@@ -452,7 +452,7 @@ export class NodeReference {
}
async navigateIntoSubgraph() {
const titleHeight = await this.comfyPage.page.evaluate(() => {
return window.LiteGraph['NODE_TITLE_HEIGHT']
return window.LiteGraph!['NODE_TITLE_HEIGHT']
})
const nodePos = await this.getPosition()
const nodeSize = await this.getSize()
@@ -466,7 +466,7 @@ export class NodeReference {
const checkIsInSubgraph = async () => {
return this.comfyPage.page.evaluate(() => {
const graph = window.app.canvas.graph
const graph = window.app!.canvas.graph
return graph?.constructor?.name === 'Subgraph'
})
}