Add playwright test

browser_tests/ComfyPage.ts

@@ -229,6 +229,32 @@ class Topbar {
  .locator('.workflow-tabs .workflow-label')
  .allInnerTexts()
  }
+
+ async triggerTopbarCommand(path: string[]) {
+ if (path.length < 2) {
+ throw new Error('Path is too short')
+ }
+
+ const tabName = path[0]
+ const topLevelMenu = this.page.locator(
+ `.top-menubar .p-menubar-item:has-text("${tabName}")`
+ )
+ await topLevelMenu.waitFor({ state: 'visible' })
+ await topLevelMenu.click()
+
+ for (let i = 1; i < path.length; i++) {
+ const commandName = path[i]
+ const menuItem = this.page.locator(
+ `.top-menubar .p-menubar-submenu .p-menubar-item:has-text("${commandName}")`
+ )
+ await menuItem.waitFor({ state: 'visible' })
+ await menuItem.hover()
+
+ if (i === path.length - 1) {
+ await menuItem.click()
+ }
+ }
+ }
 }
 
 class ComfyMenu {

browser_tests/extensionAPI.spec.ts

@@ -0,0 +1,32 @@
+import { expect } from '@playwright/test'
+import { comfyPageFixture as test } from './ComfyPage'
+
+test.describe('Topbar commands', () => {
+ test.beforeEach(async ({ comfyPage }) => {
+ await comfyPage.setSetting('Comfy.UseNewMenu', 'Floating')
+ })
+
+ test.afterEach(async ({ comfyPage }) => {
+ await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+ })
+
+ test('Should allow registering topbar commands', async ({ comfyPage }) => {
+ await comfyPage.page.evaluate(() => {
+ window['app'].extensionManager.menu.registerTopbarCommands(
+ ['ext'],
+ [
+ {
+ id: 'foo',
+ label: 'foo',
+ function: () => {
+ window['foo'] = true
+ }
+ }
+ ]
+ )
+ })
+
+ await comfyPage.menu.topbar.triggerTopbarCommand(['ext', 'foo'])
+ expect(await comfyPage.page.evaluate(() => window['foo'])).toBe(true)
+ })
+})

src/components/topbar/TopMenubar.vue

@@ -1,13 +1,10 @@
 <template>
  <teleport to=".comfyui-body-top">
- <div
- class="top-menubar comfyui-menu flex items-center"
- v-show="betaMenuEnabled"
- >
+ <div class="comfyui-menu flex items-center" v-show="betaMenuEnabled">
  <h1 class="comfyui-logo mx-2">ComfyUI</h1>
  <Menubar
  :model="items"
- class="border-none p-0 bg-transparent"
+ class="top-menubar border-none p-0 bg-transparent"
  :pt="{
  rootList: 'gap-0 flex-nowrap'
  }"