fix: browser test fixes and typecheck script

- Fix widgetTextBox locator in ComfyPage
- Add exact match for 'Add' button in search filter panel
- Fix ClipboardHelper to properly handle undefined vs null locators
- Use canvasOps.dragAndDrop in NodeOperationsHelper
- Use nodeOps.waitForGraphNodes in link interaction tests
- Add typecheck:browser script for browser tests

Amp-Thread-ID: https://ampcode.com/threads/T-019c1696-c595-7724-8dca-64f73f19f478
Co-authored-by: Amp <amp@ampcode.com>

browser_tests/fixtures/ComfyPage.ts

@@ -195,10 +195,7 @@ export class ComfyPage {
     this.url = process.env.PLAYWRIGHT_TEST_URL || 'http://localhost:8188'
     this.canvas = page.locator('#graph-canvas')
     this.selectionToolbox = page.locator('.selection-toolbox')
-    this.widgetTextBox = page
-      .locator('[data-node-id]')
-      .first()
-      .getByPlaceholder('text')
+    this.widgetTextBox = page.getByPlaceholder('text').nth(1)
     this.resetViewButton = page.getByRole('button', { name: 'Reset View' })
     this.queueButton = page.getByRole('button', { name: 'Queue Prompt' })
     this.runButton = page

browser_tests/fixtures/components/ComfyNodeSearchBox.ts

@@ -30,7 +30,7 @@ export class ComfyNodeSearchFilterSelectionPanel {
   async addFilter(filterValue: string, filterType: string) {
     await this.selectFilterType(filterType)
     await this.selectFilterValue(filterValue)
-    await this.page.getByRole('button', { name: 'Add' }).click()
+    await this.page.getByRole('button', { name: 'Add', exact: true }).click()
   }
 }
 

browser_tests/fixtures/helpers/ClipboardHelper.ts

@@ -9,10 +9,10 @@ export class ClipboardHelper {
   ) {}
 
   async copy(locator?: Locator | null): Promise<void> {
-    await this.keyboard.ctrlSend('KeyC', locator ?? this.canvas)
+    await this.keyboard.ctrlSend('KeyC', locator === undefined ? null : locator)
   }
 
   async paste(locator?: Locator | null): Promise<void> {
-    await this.keyboard.ctrlSend('KeyV', locator ?? this.canvas)
+    await this.keyboard.ctrlSend('KeyV', locator === undefined ? null : locator)
   }
 }

browser_tests/fixtures/helpers/NodeOperationsHelper.ts

@@ -119,13 +119,13 @@ export class NodeOperationsHelper {
       y: nodePos.y + nodeSize.height * ratioY
     }
     // -1 to be inside the node.  -2 because nodes currently get an arbitrary +1 to width.
-    await this.comfyPage.dragAndDrop(
+    await this.comfyPage.canvasOps.dragAndDrop(
       { x: bottomRight.x - 2, y: bottomRight.y - 1 },
       target
     )
     await this.comfyPage.nextFrame()
     if (revertAfter) {
-      await this.comfyPage.dragAndDrop(
+      await this.comfyPage.canvasOps.dragAndDrop(
         { x: target.x - 2, y: target.y - 1 },
         bottomRight
       )

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts

@@ -1050,11 +1050,11 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
   }) => {
     // Setup workflow with a KSampler node
     await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
-    await comfyPage.waitForGraphNodes(0)
+    await comfyPage.nodeOps.waitForGraphNodes(0)
     await comfyPage.command.executeCommand('Workspace.SearchBox.Toggle')
     await comfyPage.nextFrame()
     await comfyPage.searchBox.fillAndSelectFirstNode('KSampler')
-    await comfyPage.waitForGraphNodes(1)
+    await comfyPage.nodeOps.waitForGraphNodes(1)
 
     // Convert the KSampler node to a subgraph
     let ksamplerNode = (

package.json

@@ -47,6 +47,7 @@
     "test:browser:local": "cross-env PLAYWRIGHT_LOCAL=1 pnpm test:browser",
     "test:unit": "nx run test",
     "typecheck": "vue-tsc --noEmit",
+    "typecheck:browser": "tsc --project browser_tests/tsconfig.json",
     "typecheck:desktop": "nx run @comfyorg/desktop-ui:typecheck",
     "zipdist": "node scripts/zipdist.js",
     "clean": "nx reset"