Update tests with precise node positions / sizes (#1408)

* Update tests with precise node positions / sizes

* Fix test flakiness - missing await

* Fix test failures - async not awaited

* Update action

* Update test expectations [skip ci]

---------

Co-authored-by: huchenlei <huchenlei@proton.me>
Co-authored-by: github-actions <github-actions@github.com>

.github/workflows/test-browser-exp.yaml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event.label.name == 'New Browser Test Expectations'
     steps:
-    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v1
+    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v2.1
     - name: Install Playwright Browsers
       run: npx playwright install chromium --with-deps
       working-directory: ComfyUI_frontend

browser_tests/fixtures/ComfyPage.ts

@@ -650,10 +650,14 @@ export class ComfyPage {
       x: nodePos.x + nodeSize.width * ratioX,
       y: nodePos.y + nodeSize.height * ratioY
     }
-    await this.dragAndDrop(bottomRight, target)
+    // -1 to be inside the node.  -2 because nodes currently get an arbitrary +1 to width.
+    await this.dragAndDrop(
+      { x: bottomRight.x - 2, y: bottomRight.y - 1 },
+      target
+    )
     await this.nextFrame()
     if (revertAfter) {
-      await this.dragAndDrop(target, bottomRight)
+      await this.dragAndDrop({ x: target.x - 2, y: target.y - 1 }, bottomRight)
       await this.nextFrame()
     }
   }
@@ -664,14 +668,20 @@ export class ComfyPage {
     revertAfter: boolean = false
   ) {
     const ksamplerPos = {
-      x: 864,
+      x: 863,
-      y: 157
+      y: 156
     }
     const ksamplerSize = {
       width: 315,
       height: 292
     }
-    this.resizeNode(ksamplerPos, ksamplerSize, percentX, percentY, revertAfter)
+    return this.resizeNode(
+      ksamplerPos,
+      ksamplerSize,
+      percentX,
+      percentY,
+      revertAfter
+    )
   }
 
   async resizeLoadCheckpointNode(
@@ -680,14 +690,14 @@ export class ComfyPage {
     revertAfter: boolean = false
   ) {
     const loadCheckpointPos = {
-      x: 25,
+      x: 26,
-      y: 440
+      y: 444
     }
     const loadCheckpointSize = {
-      width: 320,
+      width: 315,
-      height: 120
+      height: 127
     }
-    this.resizeNode(
+    return this.resizeNode(
       loadCheckpointPos,
       loadCheckpointSize,
       percentX,
@@ -702,14 +712,14 @@ export class ComfyPage {
     revertAfter: boolean = false
   ) {
     const emptyLatentPos = {
-      x: 475,
+      x: 473,
-      y: 580
+      y: 579
     }
     const emptyLatentSize = {
-      width: 303,
+      width: 315,
-      height: 132
+      height: 136
     }
-    this.resizeNode(
+    return this.resizeNode(
       emptyLatentPos,
       emptyLatentSize,
       percentX,

browser_tests/groupNode.spec.ts

@@ -139,7 +139,9 @@ test.describe('Group Node', () => {
   }) => {
     await comfyPage.loadWorkflow('legacy_group_node')
     expect(await comfyPage.getGraphNodesCount()).toBe(1)
-    expect(comfyPage.page.locator('.comfy-missing-nodes')).not.toBeVisible()
+    await expect(
+      comfyPage.page.locator('.comfy-missing-nodes')
+    ).not.toBeVisible()
   })
 
   test.describe('Copy and paste', () => {

browser_tests/nodeDisplay.spec.ts

@@ -27,10 +27,14 @@ test.describe('Optional input', () => {
   test('Only optional inputs', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('only_optional_inputs')
     expect(await comfyPage.getGraphNodesCount()).toBe(1)
-    expect(comfyPage.page.locator('.comfy-missing-nodes')).not.toBeVisible()
+    await expect(
+      comfyPage.page.locator('.comfy-missing-nodes')
+    ).not.toBeVisible()
 
     // If the node's multiline text widget is visible, then it was loaded successfully
-    expect(comfyPage.page.locator('.comfy-multiline-input')).toHaveCount(1)
+    await expect(comfyPage.page.locator('.comfy-multiline-input')).toHaveCount(
+      1
+    )
   })
   test('Old workflow with converted input', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('old_workflow_converted_input')

browser_tests/nodeSearchBox.spec.ts

@@ -138,6 +138,8 @@ test.describe('Release context menu', () => {
 
   test('Can trigger on link release', async ({ comfyPage }) => {
     await comfyPage.disconnectEdge()
+    await comfyPage.page.mouse.move(10, 10)
+    await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(
       'link-release-context-menu.png'
     )