Add test on mobile canvas panning (#863)

* Add test on mobile canvas panning

* Update test expectations [skip ci]

---------

Co-authored-by: github-actions <github-actions@github.com>

browser_tests/ComfyPage.ts

@@ -460,6 +460,24 @@ export class ComfyPage {
     await this.nextFrame()
   }
 
+  async panWithTouch(offset: Position, safeSpot?: Position) {
+    safeSpot = safeSpot || { x: 10, y: 10 }
+    const client = await this.page.context().newCDPSession(this.page)
+    await client.send('Input.dispatchTouchEvent', {
+      type: 'touchStart',
+      touchPoints: [safeSpot]
+    })
+    await client.send('Input.dispatchTouchEvent', {
+      type: 'touchMove',
+      touchPoints: [{ x: offset.x + safeSpot.x, y: offset.y + safeSpot.y }]
+    })
+    await client.send('Input.dispatchTouchEvent', {
+      type: 'touchEnd',
+      touchPoints: []
+    })
+    await this.nextFrame()
+  }
+
   async rightClickCanvas() {
     await this.page.mouse.click(10, 10, { button: 'right' })
     await this.nextFrame()

browser_tests/interaction.spec.ts

@@ -350,6 +350,12 @@ test.describe('Canvas Interaction', () => {
     await comfyPage.pan({ x: 800, y: 300 }, { x: 1000, y: 10 })
     await expect(comfyPage.canvas).toHaveScreenshot('panned-back-to-one.png')
   })
+
+  test('@mobile Can pan with touch', async ({ comfyPage }) => {
+    await comfyPage.closeMenu()
+    await comfyPage.panWithTouch({ x: 200, y: 200 })
+    await expect(comfyPage.canvas).toHaveScreenshot('panned-touch.png')
+  })
 })
 
 test.describe('Widget Interaction', () => {