Add playwright browser test (#48)

* Add playwright

* Add test:browser command

* Remove test examples

* Add basic node tests

* Add drag node test

* Merge workflows

* nit

* Localize jest

* Add local config

* Change working dir

* Use consistent fonts

* Fix emoji fonts

* Update github action to save expectation

* update on test failure

* push to head

* Update test expectations [skip ci]

---------

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

browser_tests/ComfyPage.ts

@@ -0,0 +1,88 @@
+import type { Page, Locator } from '@playwright/test';
+import dotenv from "dotenv";
+dotenv.config();
+
+interface Position {
+  x: number;
+  y: number;
+}
+
+export class ComfyPage {
+  public readonly url: string;
+  // All canvas position operations are based on default view of canvas.
+  public readonly canvas: Locator;
+  public readonly widgetTextBox: Locator;
+
+  // Buttons
+  public readonly resetViewButton: Locator;
+
+  constructor(
+    public readonly page: Page,
+  ) {
+    this.url = process.env.PLAYWRIGHT_TEST_URL || 'http://localhost:8188';
+    this.canvas = page.locator('#graph-canvas');
+    this.widgetTextBox = page.getByPlaceholder('text').nth(1);
+    this.resetViewButton = page.getByRole('button', { name: 'Reset View' });
+  }
+
+  async goto() {
+    await this.page.goto(this.url);
+  }
+
+  async nextFrame() {
+    await this.page.evaluate(() => {
+      return new Promise<number>(requestAnimationFrame);
+    });
+  }
+
+  async resetView() {
+    await this.resetViewButton.click();
+    await this.nextFrame();
+  }
+
+  async clickTextEncodeNode1() {
+    await this.canvas.click({
+      position: {
+        x: 618,
+        y: 191
+      }
+    });
+    await this.nextFrame();
+  }
+
+  async clickTextEncodeNode2() {
+    await this.canvas.click({
+      position: {
+        x: 622,
+        y: 400
+      }
+    });
+    await this.nextFrame();
+  }
+
+  async clickEmptySpace() {
+    await this.canvas.click({
+      position: {
+        x: 35,
+        y: 31
+      }
+    });
+    await this.nextFrame();
+  }
+
+  async dragAndDrop(source: Position, target: Position) {
+    await this.page.mouse.move(source.x, source.y);
+    await this.page.mouse.down();
+    await this.page.mouse.move(target.x, target.y);
+    await this.page.mouse.up();
+    await this.nextFrame();
+  }
+
+  async dragNode2() {
+    await this.dragAndDrop(
+      { x: 622, y: 400 },
+      { x: 622, y: 300 },
+    );
+    await this.nextFrame();
+  }
+}