Add mobile viewport playwright test

browser_tests/tests/mobileViewport.spec.ts

@@ -0,0 +1,35 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Mobile viewport', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  test('@mobile App UI is not hidden under mobile browser UI', async ({
+    comfyPage
+  }) => {
+    const viewportSize = await comfyPage.page.viewportSize()
+
+    // Top menu is visible
+    const topMenu = comfyPage.page.locator('.comfyui-menu')
+    await expect(topMenu).toBeVisible()
+
+    // Top menu is not cut off from the tpo
+    const topMenuBox = await topMenu.boundingBox()
+    expect(topMenuBox?.y).toBeGreaterThanOrEqual(0)
+
+    // Graph is visible
+    const graphView = comfyPage.page.locator('.lgraphcanvas')
+    await expect(graphView).toBeVisible()
+
+    // Graph is not cut off from the bottom
+    const graphViewBox = await graphView.boundingBox()
+    expect(graphViewBox).not.toBeNull()
+    expect(viewportSize).not.toBeNull()
+    expect(graphViewBox!.y + graphViewBox!.height).toBeLessThanOrEqual(
+      viewportSize!.height
+    )
+  })
+})

eslint.config.js

@@ -13,7 +13,8 @@ export default [
     ignores: [
       'src/scripts/*',
       'src/extensions/core/*',
-      'src/types/vue-shim.d.ts'
+      'src/types/vue-shim.d.ts',
+      'browser_tests/**/*'
     ]
   },
   {

tsconfig.json

@@ -35,6 +35,7 @@
     "src/**/*.vue",
     "src/types/**/*.d.ts",
     "tests-ui/**/*",
-    "global.d.ts"
+    "global.d.ts",
+    "eslint.config.js"
   ]
 }