Fix loading workflow from of edited webp

Author: huchenlei

browser_tests/ComfyPage.ts

@@ -2,6 +2,9 @@ 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 +205,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 +245,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 +307,49 @@ 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,11 @@
+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

@@ -999,6 +999,7 @@ export class ComfyApp {
   #addDropHandler() {
     // Get prompt from dropped PNG or json
     document.addEventListener('drop', async (event) => {
+      console.log("Received drop event")
       event.preventDefault()
       event.stopPropagation()
 

browser_tests/assets/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
         }