test: add Playwright test tags for filtering (@smoke, @slow, @screenshot, domains) (#8441)

## Summary Adds structured test tags to all 54 Playwright test files to enable flexible test filtering during development and CI. ## Tags Added | Tag | Count | Purpose | |-----|-------|---------| | `@screenshot` | 32 files | Tests with visual assertions (`toHaveScreenshot`) | | `@smoke` | 5 files | Quick essential tests for fast validation | | `@slow` | 5 files | Long-running tests (templates, subgraph, featureFlags) | | `@canvas` | 15 files | Canvas/graph rendering tests | | `@node` | 10 files | Node behavior tests | | `@ui` | 8 files | UI component tests | | `@widget` | 5 files | Widget-specific tests | | `@workflow` | 3 files | Workflow operations | | `@subgraph` | 1 file | Subgraph functionality | | `@keyboard` | 2 files | Keyboard shortcuts | | `@settings` | 2 files | Settings/preferences | ## Usage Examples ```bash # Quick validation (~16 tests, ~30s) pnpm test:browser -- --grep @smoke # Skip slow tests for faster CI feedback pnpm test:browser -- --grep-invert @slow # Skip visual tests (useful for local development without snapshots) pnpm test:browser -- --grep-invert @screenshot # Run only canvas-related tests pnpm test:browser -- --grep @canvas # Combine filters pnpm test:browser -- --grep @smoke --grep-invert @screenshot ``` ## Implementation Details - Uses Playwright's native tag syntax: `test.describe('Name', { tag: '@tag' }, ...)` - Tags inherit from describe blocks to child tests - Preserves existing project-level tags: `@mobile`, `@2x`, `@0.5x` - Multiple tags supported: `{ tag: ['@screenshot', '@smoke'] }` ## Test Plan - [x] All existing tests pass unchanged - [x] Tag filtering works with `--grep` and `--grep-invert` ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8441-test-add-Playwright-test-tags-for-filtering-smoke-slow-screenshot-domains-2f76d73d36508184990ec859c8fd7629) by [Unito](https://www.unito.io) --------- Co-authored-by: Amp <amp@ampcode.com> Co-authored-by: GitHub Action <action@github.com>
2026-04-30 11:11:53 +00:00 · 2026-01-29 16:34:56 -08:00
parent 80ccc13659
commit 82bacb82a7
54 changed files with 1239 additions and 1077 deletions
--- a/browser_tests/tests/vueNodes/groups/groups.spec.ts
+++ b/browser_tests/tests/vueNodes/groups/groups.spec.ts
@@ -5,7 +5,7 @@ import {

 const CREATE_GROUP_HOTKEY = 'Control+g'

-test.describe('Vue Node Groups', () => {
+test.describe('Vue Node Groups', { tag: '@screenshot' }, () => {
  test.beforeEach(async ({ comfyPage }) => {
    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
    await comfyPage.setSetting('Comfy.Minimap.ShowGroups', true)
--- a/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts
@@ -9,10 +9,14 @@ test.describe('Vue Nodes Canvas Pan', () => {
    await comfyPage.vueNodes.waitForNodes()
  })

-  test('@mobile Can pan with touch', async ({ comfyPage }) => {
-    await comfyPage.panWithTouch({ x: 64, y: 64 }, { x: 256, y: 256 })
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'vue-nodes-paned-with-touch.png'
-    )
-  })
+  test(
+    '@mobile Can pan with touch',
+    { tag: '@screenshot' },
+    async ({ comfyPage }) => {
+      await comfyPage.panWithTouch({ x: 64, y: 64 }, { x: 256, y: 256 })
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-nodes-paned-with-touch.png'
+      )
+    }
+  )
 })
--- a/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts
@@ -10,25 +10,30 @@ test.describe('Vue Nodes Zoom', () => {
    await comfyPage.vueNodes.waitForNodes()
  })

-  test('should not capture drag while zooming with ctrl+shift+drag', async ({
-    comfyPage
-  }) => {
-    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
-    const nodeBoundingBox = await checkpointNode.boundingBox()
-    if (!nodeBoundingBox) throw new Error('Node bounding box not available')
+  test(
+    'should not capture drag while zooming with ctrl+shift+drag',
+    { tag: '@screenshot' },
+    async ({ comfyPage }) => {
+      const checkpointNode =
+        comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+      const nodeBoundingBox = await checkpointNode.boundingBox()
+      if (!nodeBoundingBox) throw new Error('Node bounding box not available')

-    const nodeMidpointX = nodeBoundingBox.x + nodeBoundingBox.width / 2
-    const nodeMidpointY = nodeBoundingBox.y + nodeBoundingBox.height / 2
+      const nodeMidpointX = nodeBoundingBox.x + nodeBoundingBox.width / 2
+      const nodeMidpointY = nodeBoundingBox.y + nodeBoundingBox.height / 2

-    // Start the Ctrl+Shift drag-to-zoom on the canvas and continue dragging over
-    // the node. The node should not capture the drag while drag-zooming.
-    await comfyPage.page.keyboard.down('Control')
-    await comfyPage.page.keyboard.down('Shift')
-    await comfyPage.dragAndDrop(
-      { x: 200, y: 300 },
-      { x: nodeMidpointX, y: nodeMidpointY }
-    )
+      // Start the Ctrl+Shift drag-to-zoom on the canvas and continue dragging over
+      // the node. The node should not capture the drag while drag-zooming.
+      await comfyPage.page.keyboard.down('Control')
+      await comfyPage.page.keyboard.down('Shift')
+      await comfyPage.dragAndDrop(
+        { x: 200, y: 300 },
+        { x: nodeMidpointX, y: nodeMidpointY }
+      )

-    await expect(comfyPage.canvas).toHaveScreenshot('zoomed-in-ctrl-shift.png')
-  })
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'zoomed-in-ctrl-shift.png'
+      )
+    }
+  )
 })
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
@@ -98,7 +98,7 @@ async function connectSlots(
  await nextFrame()
 }

-test.describe('Vue Node Link Interaction', () => {
+test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
  test.beforeEach(async ({ comfyPage }) => {
    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
--- a/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts
@@ -5,7 +5,7 @@ import {
 import type { ComfyPage } from '../../../../fixtures/ComfyPage'
 import { fitToViewInstant } from '../../../../helpers/fitToView'

-test.describe('Vue Node Bring to Front', () => {
+test.describe('Vue Node Bring to Front', { tag: '@screenshot' }, () => {
  test.beforeEach(async ({ comfyPage }) => {
    await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
--- a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts
@@ -1,8 +1,8 @@
 import {
-  type ComfyPage,
  comfyExpect as expect,
  comfyPageFixture as test
 } from '../../../../fixtures/ComfyPage'
+import type { ComfyPage } from '../../../../fixtures/ComfyPage'
 import type { Position } from '../../../../fixtures/types'

 test.describe('Vue Node Moving', () => {
@@ -29,39 +29,47 @@ test.describe('Vue Node Moving', () => {
    expect(diffY).toBeGreaterThan(0)
  }

-  test('should allow moving nodes by dragging', async ({ comfyPage }) => {
-    const loadCheckpointHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
-    await comfyPage.dragAndDrop(loadCheckpointHeaderPos, {
-      x: 256,
-      y: 256
-    })
+  test(
+    'should allow moving nodes by dragging',
+    { tag: '@screenshot' },
+    async ({ comfyPage }) => {
+      const loadCheckpointHeaderPos =
+        await getLoadCheckpointHeaderPos(comfyPage)
+      await comfyPage.dragAndDrop(loadCheckpointHeaderPos, {
+        x: 256,
+        y: 256
+      })

-    const newHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
-    await expectPosChanged(loadCheckpointHeaderPos, newHeaderPos)
+      const newHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
+      await expectPosChanged(loadCheckpointHeaderPos, newHeaderPos)

-    await expect(comfyPage.canvas).toHaveScreenshot('vue-node-moved-node.png')
-  })
+      await expect(comfyPage.canvas).toHaveScreenshot('vue-node-moved-node.png')
+    }
+  )

-  test('@mobile should allow moving nodes by dragging on touch devices', async ({
-    comfyPage
-  }) => {
-    // Disable minimap (gets in way of the node on small screens)
-    await comfyPage.setSetting('Comfy.Minimap.Visible', false)
+  test(
+    '@mobile should allow moving nodes by dragging on touch devices',
+    { tag: '@screenshot' },
+    async ({ comfyPage }) => {
+      // Disable minimap (gets in way of the node on small screens)
+      await comfyPage.setSetting('Comfy.Minimap.Visible', false)

-    const loadCheckpointHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
-    await comfyPage.panWithTouch(
-      {
-        x: 64,
-        y: 64
-      },
-      loadCheckpointHeaderPos
-    )
+      const loadCheckpointHeaderPos =
+        await getLoadCheckpointHeaderPos(comfyPage)
+      await comfyPage.panWithTouch(
+        {
+          x: 64,
+          y: 64
+        },
+        loadCheckpointHeaderPos
+      )

-    const newHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
-    await expectPosChanged(loadCheckpointHeaderPos, newHeaderPos)
+      const newHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
+      await expectPosChanged(loadCheckpointHeaderPos, newHeaderPos)

-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'vue-node-moved-node-touch.png'
-    )
-  })
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-node-moved-node-touch.png'
+      )
+    }
+  )
 })
--- a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts
+++ b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts
@@ -15,22 +15,25 @@ test.describe('Vue Node Bypass', () => {
    await comfyPage.vueNodes.waitForNodes()
  })

-  test('should allow toggling bypass on a selected node with hotkey', async ({
-    comfyPage
-  }) => {
-    await comfyPage.page.getByText('Load Checkpoint').click()
-    await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
+  test(
+    'should allow toggling bypass on a selected node with hotkey',
+    { tag: '@screenshot' },
+    async ({ comfyPage }) => {
+      await comfyPage.page.getByText('Load Checkpoint').click()
+      await comfyPage.page.keyboard.press(BYPASS_HOTKEY)

-    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
-    await expect(checkpointNode).toHaveClass(BYPASS_CLASS)
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'vue-node-bypassed-state.png'
-    )
+      const checkpointNode =
+        comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+      await expect(checkpointNode).toHaveClass(BYPASS_CLASS)
+      await comfyPage.nextFrame()
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-node-bypassed-state.png'
+      )

-    await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
-    await expect(checkpointNode).not.toHaveClass(BYPASS_CLASS)
-  })
+      await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
+      await expect(checkpointNode).not.toHaveClass(BYPASS_CLASS)
+    }
+  )

  test('should allow toggling bypass on multiple selected nodes with hotkey', async ({
    comfyPage
--- a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts
+++ b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts
@@ -3,7 +3,7 @@ import {
  comfyPageFixture as test
 } from '../../../fixtures/ComfyPage'

-test.describe('Vue Node Custom Colors', () => {
+test.describe('Vue Node Custom Colors', { tag: '@screenshot' }, () => {
  test.beforeEach(async ({ comfyPage }) => {
    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
    await comfyPage.setSetting('Comfy.Canvas.SelectionToolbox', true)
--- a/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts
+++ b/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts
@@ -12,19 +12,24 @@ test.describe('Vue Node Mute', () => {
    await comfyPage.vueNodes.waitForNodes()
  })

-  test('should allow toggling mute on a selected node with hotkey', async ({
-    comfyPage
-  }) => {
-    await comfyPage.page.getByText('Load Checkpoint').click()
-    await comfyPage.page.keyboard.press(MUTE_HOTKEY)
+  test(
+    'should allow toggling mute on a selected node with hotkey',
+    { tag: '@screenshot' },
+    async ({ comfyPage }) => {
+      await comfyPage.page.getByText('Load Checkpoint').click()
+      await comfyPage.page.keyboard.press(MUTE_HOTKEY)

-    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
-    await expect(checkpointNode).toHaveCSS('opacity', MUTE_OPACITY)
-    await expect(comfyPage.canvas).toHaveScreenshot('vue-node-muted-state.png')
+      const checkpointNode =
+        comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+      await expect(checkpointNode).toHaveCSS('opacity', MUTE_OPACITY)
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-node-muted-state.png'
+      )

-    await comfyPage.page.keyboard.press(MUTE_HOTKEY)
-    await expect(checkpointNode).not.toHaveCSS('opacity', MUTE_OPACITY)
-  })
+      await comfyPage.page.keyboard.press(MUTE_HOTKEY)
+      await expect(checkpointNode).not.toHaveCSS('opacity', MUTE_OPACITY)
+    }
+  )

  test('should allow toggling mute on multiple selected nodes with hotkey', async ({
    comfyPage
--- a/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts
+++ b/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts
@@ -9,13 +9,17 @@ test.describe('Vue Upload Widgets', () => {
    await comfyPage.vueNodes.waitForNodes()
  })

-  test('should hide canvas-only upload buttons', async ({ comfyPage }) => {
-    await comfyPage.setup()
-    await comfyPage.loadWorkflow('widgets/all_load_widgets')
-    await comfyPage.vueNodes.waitForNodes()
+  test(
+    'should hide canvas-only upload buttons',
+    { tag: '@screenshot' },
+    async ({ comfyPage }) => {
+      await comfyPage.setup()
+      await comfyPage.loadWorkflow('widgets/all_load_widgets')
+      await comfyPage.vueNodes.waitForNodes()

-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'vue-nodes-upload-widgets.png'
-    )
-  })
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-nodes-upload-widgets.png'
+      )
+    }
+  )
 })