test: add E2E test for subgraph duplicate independent widget values (#10949)

## Summary
- Add E2E test verifying duplicated subgraphs maintain independent
widget values (convert CLIP node to subgraph, duplicate, set different
text in each, assert no bleed)
- Extract `clickMenuItemExact` and `openForVueNode` into `ContextMenu`
fixture for reuse across Vue node tests
- Refactor `contextMenu.spec.ts` to delegate to the new fixture methods

## Test plan
- [x] `pnpm typecheck:browser` passes
- [x] `pnpm lint` passes
- [x] New test passes locally (`pnpm test:browser:local --
browser_tests/tests/subgraph/subgraphDuplicateIndependentValues.spec.ts`)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-10949-test-add-E2E-test-for-subgraph-duplicate-independent-widget-values-33b6d73d3650818191c1f78ef8db4455)
by [Unito](https://www.unito.io)

browser_tests/fixtures/components/ContextMenu.ts

@@ -20,6 +20,10 @@ export class ContextMenu {
     await this.page.getByRole('menuitem', { name }).click()
   }
 
+  async clickMenuItemExact(name: string): Promise<void> {
+    await this.page.getByRole('menuitem', { name, exact: true }).click()
+  }
+
   async clickLitegraphMenuItem(name: string): Promise<void> {
     await this.page.locator(`.litemenu-entry:has-text("${name}")`).click()
   }
@@ -48,6 +52,18 @@ export class ContextMenu {
     return this
   }
 
+  /**
+   * Select a Vue node by clicking its header, then right-click to open
+   * the context menu. Vue nodes require a selection click before the
+   * right-click so the correct per-node menu items appear.
+   */
+  async openForVueNode(header: Locator): Promise<this> {
+    await header.click()
+    await header.click({ button: 'right' })
+    await this.primeVueMenu.waitFor({ state: 'visible' })
+    return this
+  }
+
   async waitForHidden(): Promise<void> {
     const waitIfExists = async (locator: Locator, menuName: string) => {
       const count = await locator.count()

browser_tests/tests/subgraph/subgraphDuplicateIndependentValues.spec.ts

@@ -0,0 +1,94 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../fixtures/ComfyPage'
+import type { ComfyPage } from '../../fixtures/ComfyPage'
+
+async function openVueNodeContextMenu(comfyPage: ComfyPage, nodeTitle: string) {
+  const fixture = await comfyPage.vueNodes.getFixtureByTitle(nodeTitle)
+  await comfyPage.contextMenu.openForVueNode(fixture.header)
+}
+
+test.describe(
+  'Subgraph Duplicate Independent Values',
+  { tag: ['@slow', '@subgraph'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+      await comfyPage.vueNodes.waitForNodes()
+    })
+
+    test('Duplicated subgraphs maintain independent widget values', async ({
+      comfyPage
+    }) => {
+      const clipNodeTitle = 'CLIP Text Encode (Prompt)'
+
+      // Convert first CLIP Text Encode node to subgraph
+      await openVueNodeContextMenu(comfyPage, clipNodeTitle)
+      await comfyPage.contextMenu.clickMenuItemExact('Convert to Subgraph')
+      await comfyPage.nextFrame()
+      const subgraphNode = comfyPage.vueNodes.getNodeByTitle('New Subgraph')
+      await expect(subgraphNode).toBeVisible()
+
+      // Duplicate the subgraph
+      await openVueNodeContextMenu(comfyPage, 'New Subgraph')
+      await comfyPage.contextMenu.clickMenuItemExact('Duplicate')
+      await comfyPage.nextFrame()
+
+      // Capture both subgraph node IDs
+      const subgraphNodes = comfyPage.vueNodes.getNodeByTitle('New Subgraph')
+      await expect(subgraphNodes).toHaveCount(2)
+      const nodeIds = await subgraphNodes.evaluateAll((nodes) =>
+        nodes
+          .map((n) => n.getAttribute('data-node-id'))
+          .filter((id): id is string => id !== null)
+      )
+      const [nodeId1, nodeId2] = nodeIds
+
+      // Enter first subgraph, set text widget value
+      await comfyPage.vueNodes.enterSubgraph(nodeId1)
+      await comfyPage.vueNodes.waitForNodes()
+      const textarea1 = comfyPage.vueNodes
+        .getNodeByTitle(clipNodeTitle)
+        .first()
+        .getByRole('textbox', { name: 'text' })
+      await textarea1.fill('subgraph1_value')
+      await expect(textarea1).toHaveValue('subgraph1_value')
+      await comfyPage.subgraph.exitViaBreadcrumb()
+
+      // Enter second subgraph, set text widget value
+      await comfyPage.vueNodes.waitForNodes()
+      await comfyPage.vueNodes.enterSubgraph(nodeId2)
+      await comfyPage.vueNodes.waitForNodes()
+      const textarea2 = comfyPage.vueNodes
+        .getNodeByTitle(clipNodeTitle)
+        .first()
+        .getByRole('textbox', { name: 'text' })
+      await textarea2.fill('subgraph2_value')
+      await expect(textarea2).toHaveValue('subgraph2_value')
+      await comfyPage.subgraph.exitViaBreadcrumb()
+
+      // Re-enter first subgraph, assert value preserved
+      await comfyPage.vueNodes.waitForNodes()
+      await comfyPage.vueNodes.enterSubgraph(nodeId1)
+      await comfyPage.vueNodes.waitForNodes()
+      const textarea1Again = comfyPage.vueNodes
+        .getNodeByTitle(clipNodeTitle)
+        .first()
+        .getByRole('textbox', { name: 'text' })
+      await expect(textarea1Again).toHaveValue('subgraph1_value')
+      await comfyPage.subgraph.exitViaBreadcrumb()
+
+      // Re-enter second subgraph, assert value preserved
+      await comfyPage.vueNodes.waitForNodes()
+      await comfyPage.vueNodes.enterSubgraph(nodeId2)
+      await comfyPage.vueNodes.waitForNodes()
+      const textarea2Again = comfyPage.vueNodes
+        .getNodeByTitle(clipNodeTitle)
+        .first()
+        .getByRole('textbox', { name: 'text' })
+      await expect(textarea2Again).toHaveValue('subgraph2_value')
+    })
+  }
+)

browser_tests/tests/vueNodes/interactions/node/contextMenu.spec.ts

@@ -10,17 +10,14 @@ import { TestIds } from '../../../../fixtures/selectors'
 const BYPASS_CLASS = /before:bg-bypass\/60/
 
 async function clickExactMenuItem(comfyPage: ComfyPage, name: string) {
-  await comfyPage.page.getByRole('menuitem', { name, exact: true }).click()
+  await comfyPage.contextMenu.clickMenuItemExact(name)
   await comfyPage.nextFrame()
 }
 
 async function openContextMenu(comfyPage: ComfyPage, nodeTitle: string) {
   const fixture = await comfyPage.vueNodes.getFixtureByTitle(nodeTitle)
-  await fixture.header.click()
-  await fixture.header.click({ button: 'right' })
-  const menu = comfyPage.contextMenu.primeVueMenu
-  await menu.waitFor({ state: 'visible' })
-  return menu
+  await comfyPage.contextMenu.openForVueNode(fixture.header)
+  return comfyPage.contextMenu.primeVueMenu
 }
 
 async function openMultiNodeContextMenu(