Move mobile into subHelper, reduce getByrole

browser_tests/fixtures/helpers/AppModeHelper.ts

@@ -11,11 +11,12 @@ import { BuilderSelectHelper } from '@e2e/fixtures/helpers/BuilderSelectHelper'
 import { BuilderStepsHelper } from '@e2e/fixtures/helpers/BuilderStepsHelper'
 
 export class AppModeHelper {
-  readonly steps: BuilderStepsHelper
   readonly footer: BuilderFooterHelper
+  readonly mobile: MobileAppHelper
   readonly saveAs: BuilderSaveAsHelper
   readonly select: BuilderSelectHelper
   readonly outputHistory: OutputHistoryComponent
+  readonly steps: BuilderStepsHelper
   readonly widgets: AppModeWidgetHelper
   /** The "Connect an output" popover shown when saving without outputs. */
   public readonly connectOutputPopover: Locator
@@ -41,11 +42,12 @@ export class AppModeHelper {
   public readonly cancelRunButton: Locator
 
   constructor(private readonly comfyPage: ComfyPage) {
-    this.steps = new BuilderStepsHelper(comfyPage)
+    this.mobile = new MobileAppHelper(comfyPage)
     this.footer = new BuilderFooterHelper(comfyPage)
     this.saveAs = new BuilderSaveAsHelper(comfyPage)
     this.select = new BuilderSelectHelper(comfyPage)
     this.outputHistory = new OutputHistoryComponent(comfyPage.page)
+    this.steps = new BuilderStepsHelper(comfyPage)
     this.widgets = new AppModeWidgetHelper(comfyPage)
     this.connectOutputPopover = this.page.getByTestId(
       TestIds.builder.connectOutputPopover
@@ -149,12 +151,6 @@ export class AppModeHelper {
   get centerPanel(): Locator {
     return this.page.getByTestId(TestIds.linear.centerPanel)
   }
-  get mobileView(): Locator {
-    return this.page.getByTestId(TestIds.linear.mobile)
-  }
-  get mobileNavigation(): Locator {
-    return this.page.getByRole('tablist').filter({ hasText: 'Run' })
-  }
 
   get mobileWorkflows() {
     return this.mobileView.getByTestId(TestIds.linear.mobileWorkflows)

browser_tests/fixtures/helpers/MobileAppHelper.ts

@@ -0,0 +1,38 @@
+import type { Locator, Page } from '@playwright/test'
+
+import type { ComfyPage } from '../ComfyPage'
+import { TestIds } from '../selectors'
+
+export class MobileAppHelper {
+  constructor(private readonly comfyPage: ComfyPage) {}
+
+  get view(): Locator {
+    return this.page.getByTestId(TestIds.linear.mobile)
+  }
+  get navigation(): Locator {
+    return this.page.getByRole('tablist').filter({ hasText: 'Run' })
+  }
+  get workflows() {
+    return this.view.getByTestId(TestIds.linear.mobileWorkflows)
+  }
+  get actionmenu() {
+    return this.view.getByTestId(TestIds.linear.mobileActionMenu)
+  }
+  get navigationTabs() {
+    return this.navigation.getByRole('tab')
+  }
+  get contentPanel() {
+    return this.page.getByRole('tabpanel')
+  }
+
+  async switchWorkflow(workflowName: string) {
+    await this.workflows.click()
+    await this.page.getByRole('menu').getByText(workflowName).click()
+  }
+  async navigateTab(name: 'run' | 'outputs' | 'assets') {
+    await this.navigation.getByRole('tab', { name }).click()
+  }
+  private get page(): Page {
+    return this.comfyPage.page
+  }
+}

browser_tests/tests/appMode.spec.ts

@@ -35,19 +35,19 @@ test.describe('App mode usage', () => {
   })
   test.describe('Mobile', { tag: ['@mobile'] }, () => {
     test('panel navigation', async ({ comfyPage }) => {
-      const { mobileNavigation, mobileView } = comfyPage.appMode
+      const { mobile } = comfyPage.appMode
       await comfyPage.appMode.enterAppModeWithInputs([['3', 'steps']])
-      await expect(mobileView).toBeVisible()
+      await expect(mobile.view).toBeVisible()
+      await expect(mobile.navigation).toBeVisible()
 
-      const panel = comfyPage.page.getByRole('tabpanel')
-      await expect(mobileNavigation).toBeVisible()
-      await comfyPage.appMode.mobileNavigateTab('assets')
-      await expect(panel).toContainClass('left-[200vw]')
-      const buttons = await mobileNavigation.getByRole('tab').all()
+      await mobile.navigateTab('assets')
+      await expect(mobile.contentPanel).toContainClass('left-[200vw]')
+
+      const buttons = await mobile.navigationTabs.all()
       await buttons[0].dragTo(buttons[2], { steps: 5 })
-      await expect(panel).toContainClass('left-[100vw]')
+      await expect(mobile.contentPanel).toContainClass('left-[100vw]')
 
-      await comfyPage.appMode.mobileNavigateTab('run')
+      await mobile.navigateTab('run')
       await expect(comfyPage.appMode.linearWidgets).toBeInViewport({ ratio: 1 })
 
       const steps = comfyPage.page.getByRole('spinbutton')
@@ -66,13 +66,12 @@ test.describe('App mode usage', () => {
       const widgetNames = ['seed', 'steps', 'denoise', 'cfg']
       for (const name of widgetNames)
         await comfyPage.appMode.enterAppModeWithInputs([['3', name]])
-      await expect(comfyPage.appMode.mobileWorkflows).toBeVisible()
+      await expect(comfyPage.appMode.mobile.workflows).toBeVisible()
+
       const widgets = comfyPage.appMode.linearWidgets
-      await comfyPage.appMode.mobileView
-        .getByRole('tab', { name: 'Edit & Run' })
-        .click()
+      await comfyPage.appMode.mobile.navigateTab('run')
       for (let i = 0; i < widgetNames.length; i++) {
-        await comfyPage.appMode.switchMobileWorkflow(`(${i + 2})`)
+        await comfyPage.appMode.mobile.switchWorkflow(`(${i + 2})`)
         await expect(widgets.getByText(widgetNames[i])).toBeVisible()
       }
     })