Fix loading workflow from of edited webp (#764)

* Fix loading workflow from of edited webp

* Update test expectations [skip ci]

---------

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

Author: huchenlei

browser_tests/ComfyPage.ts

@@ -2,6 +2,8 @@ import type { Page, Locator } from '@playwright/test'
 import { test as base } from '@playwright/test'
 import dotenv from 'dotenv'
 dotenv.config()
+import * as fs from 'fs'
+import * as path from 'path'
 
 interface Position {
   x: number
@@ -202,6 +204,10 @@ export class ComfyPage {
     await this.resetView()
   }
 
+  public assetPath(fileName: string) {
+    return `./browser_tests/assets/${fileName}`
+  }
+
   async setSetting(settingId: string, settingValue: any) {
     return await this.page.evaluate(
       async ({ id, value }) => {
@@ -238,7 +244,7 @@ export class ComfyPage {
 
   async loadWorkflow(workflowName: string) {
     await this.workflowUploadInput.setInputFiles(
-      `./browser_tests/assets/${workflowName}.json`
+      this.assetPath(`${workflowName}.json`)
     )
     await this.nextFrame()
   }
@@ -300,6 +306,54 @@ export class ComfyPage {
     await this.nextFrame()
   }
 
+  async dragAndDropFile(fileName: string) {
+    const filePath = this.assetPath(fileName)
+
+    // Read the file content
+    const buffer = fs.readFileSync(filePath)
+
+    // Get file type
+    const getFileType = (fileName: string) => {
+      if (fileName.endsWith('.png')) return 'image/png'
+      if (fileName.endsWith('.webp')) return 'image/webp'
+      if (fileName.endsWith('.json')) return 'application/json'
+      return 'application/octet-stream'
+    }
+
+    const fileType = getFileType(fileName)
+
+    await this.page.evaluate(
+      async ({ buffer, fileName, fileType }) => {
+        const file = new File([new Uint8Array(buffer)], fileName, {
+          type: fileType
+        })
+        const dataTransfer = new DataTransfer()
+        dataTransfer.items.add(file)
+
+        const dropEvent = new DragEvent('drop', {
+          bubbles: true,
+          cancelable: true,
+          dataTransfer
+        })
+
+        Object.defineProperty(dropEvent, 'preventDefault', {
+          value: () => {},
+          writable: false
+        })
+
+        Object.defineProperty(dropEvent, 'stopPropagation', {
+          value: () => {},
+          writable: false
+        })
+
+        document.dispatchEvent(dropEvent)
+      },
+      { buffer: [...new Uint8Array(buffer)], fileName, fileType }
+    )
+
+    await this.nextFrame()
+  }
+
   async dragNode2() {
     await this.dragAndDrop({ x: 622, y: 400 }, { x: 622, y: 300 })
     await this.nextFrame()

browser_tests/assets/edited_workflow.webp

@@ -0,0 +1,13 @@
+import { expect } from '@playwright/test'
+import { comfyPageFixture as test } from './ComfyPage'
+
+test.describe('Load Workflow in Media', () => {
+  ;['workflow.webp', 'edited_workflow.webp', 'no_workflow.webp'].forEach(
+    async (fileName) => {
+      test(`Load workflow in ${fileName}`, async ({ comfyPage }) => {
+        await comfyPage.dragAndDropFile(fileName)
+        await expect(comfyPage.canvas).toHaveScreenshot(`${fileName}.png`)
+      })
+    }
+  )
+})

browser_tests/assets/no_workflow.webp

@@ -113,9 +113,11 @@ export function getWebpMetadata(file) {
             webp.slice(offset + 8, offset + 8 + chunk_length)
           )
           for (var key in data) {
-            var value = data[key] as string
-            let index = value.indexOf(':')
-            txt_chunks[value.slice(0, index)] = value.slice(index + 1)
+            const value = data[key] as string
+            if (typeof value === 'string') {
+              const index = value.indexOf(':')
+              txt_chunks[value.slice(0, index)] = value.slice(index + 1)
+            }
           }
           break
         }