Workflow templates (#938)

* Add template gallery

* Add simple test

* Add examples

* Enable floating menu in test

browser_tests/ComfyPage.ts

@@ -8,6 +8,7 @@ import * as fs from 'fs'
 import { NodeBadgeMode } from '../src/types/nodeSource'
 import { NodeId } from '../src/types/comfyWorkflow'
 import { ManageGroupNode } from './helpers/manageGroupNode'
+import { ComfyTemplates } from './helpers/templates'
 
 interface Position {
   x: number
@@ -182,6 +183,10 @@ class WorkflowsSidebarTab extends SidebarTab {
     super(page, 'workflows')
   }
 
+  get browseGalleryButton() {
+    return this.page.locator('.browse-templates-button')
+  }
+
   get newBlankWorkflowButton() {
     return this.page.locator('.new-blank-workflow-button')
   }
@@ -297,6 +302,7 @@ export class ComfyPage {
   public readonly searchBox: ComfyNodeSearchBox
   public readonly menu: ComfyMenu
   public readonly appMenu: ComfyAppMenu
+  public readonly templates: ComfyTemplates
 
   constructor(
     public readonly page: Page,
@@ -311,6 +317,7 @@ export class ComfyPage {
     this.searchBox = new ComfyNodeSearchBox(page)
     this.menu = new ComfyMenu(page)
     this.appMenu = new ComfyAppMenu(page)
+    this.templates = new ComfyTemplates(page)
   }
 
   convertLeafToContent(structure: FolderStructure): FolderStructure {

browser_tests/helpers/templates.ts

@@ -0,0 +1,12 @@
+import { Locator, Page } from '@playwright/test'
+export class ComfyTemplates {
+  readonly content: Locator
+
+  constructor(readonly page: Page) {
+    this.content = page.getByTestId('template-workflows-content')
+  }
+
+  async loadTemplate(id: string) {
+    await this.content.getByTestId(`template-workflow-${id}`).click()
+  }
+}

browser_tests/templates.spec.ts

@@ -0,0 +1,34 @@
+import { expect } from '@playwright/test'
+import { comfyPageFixture as test } from './ComfyPage'
+
+test.describe('Templates', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Floating')
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+  })
+
+  test('Can load template workflows', async ({ comfyPage }) => {
+    // This test will need expanding on once the templates are decided
+
+    // Clear the workflow
+    await comfyPage.menu.workflowsTab.open()
+    await comfyPage.menu.workflowsTab.newBlankWorkflowButton.click()
+    await expect(async () => {
+      expect(await comfyPage.getGraphNodesCount()).toBe(0)
+    }).toPass({ timeout: 250 })
+
+    // Load a template
+    await comfyPage.menu.workflowsTab.browseGalleryButton.click()
+    await expect(comfyPage.templates.content).toBeVisible()
+    await comfyPage.templates.loadTemplate('default')
+    await expect(comfyPage.templates.content).toBeHidden()
+
+    // Ensure we now have some nodes
+    await expect(async () => {
+      expect(await comfyPage.getGraphNodesCount()).toBeGreaterThan(0)
+    }).toPass({ timeout: 250 })
+  })
+})