test(playwright): add snapshots, refactor utils, coverage

.github/workflows/tests.yml

@@ -68,9 +68,7 @@ jobs:
       - name: Build fabric.js
         uses: ./.github/actions/build-fabric-cached
       - name: Run ${{ matrix.target }} ${{ matrix.suite }} headless test
-        uses: coactions/setup-xvfb@v1
-        with:
-          run: npm run test -- -c ${{ matrix.target }} -s ${{ matrix.suite }}
+        run: xvfb-run npm run test -- -c ${{ matrix.target }} -s ${{ matrix.suite }}
   node:
     needs: [prime-build]
     runs-on: ubuntu-latest
@@ -109,6 +107,19 @@ jobs:
         with:
           name: coverage-jest
           path: .nyc_output/*.json
+  e2e:
+    needs: [prime-build]
+    name: Playwright tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/cached-install
+      - name: Build fabric.js
+        uses: ./.github/actions/build-fabric-cached
+      - name: Run playwright tests
+        run: |
+          npx playwright install
+          xvfb-run npm run test:e2e
   coverage:
     needs: [node-coverage]
     name: Coverage reporting

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- test(playwright): add snapshots, refactor utils [#9078](https://github.com/fabricjs/fabric.js/pull/9078)
 - chore(TS): Fix ITextBehaviour enterEditing type [#9075](https://github.com/fabricjs/fabric.js/pull/9075)
 - chore(TS): export FabricObjectProps and GroupProps [#9025](https://github.com/fabricjs/fabric.js/pull/9025)
 - chore(TS): Replace BaseFabricObject with FabricObject [#9016](https://github.com/fabricjs/fabric.js/pull/9016)

e2e/tests/text/text-editing.spec.ts

@@ -1,24 +1,25 @@
-import { test } from '@playwright/test';
-import {
-  addTextbox,
-  getObjectCenter,
-  clickCanvas,
-  getObjectControlPoint,
-} from '../../utils/objects';
-test('text typing itext vs textbox', async ({ page }) => {
+import { expect, test } from '@playwright/test';
+import { TestUtil } from '../../utils/TestUtil';
+
+test('textbox typing and resizing', async ({ page }) => {
+  const util = new TestUtil(page);
   await page.goto('http://127.0.0.1:8080/e2e/site');
-  const textboxID = 'text1';
-  await addTextbox(page, textboxID, 'initial text', {
+  const textboxUtil = await util.addTextbox('initial text', {
     width: 200,
     left: 50,
   });
-  const textCenter = await getObjectCenter(page, textboxID);
-  await clickCanvas(page, {
+  const textCenter = await textboxUtil.getObjectCenter();
+
+  expect(await page.screenshot()).toMatchSnapshot({ name: 'initial.png' });
+
+  await util.clickCanvas({
     position: textCenter,
     clickCount: 2,
     delay: 200,
   });
 
+  expect(await page.screenshot()).toMatchSnapshot({ name: 'start.png' });
+
   await page
     .locator('textarea')
     .type(
@@ -28,26 +29,60 @@ test('text typing itext vs textbox', async ({ page }) => {
       }
     );
 
-  const controlPoint = await getObjectControlPoint(page, textboxID, 'mr');
+  expect(await page.screenshot()).toMatchSnapshot({ name: 'typed.png' });
+
+  const mrControlPoint = await textboxUtil.getObjectControlPoint('mr');
 
   // click outside to stop editing
-  await clickCanvas(page, {
+  await util.clickCanvas({
     position: {
-      x: controlPoint.x + 20,
-      y: controlPoint.y,
+      x: mrControlPoint.x + 20,
+      y: mrControlPoint.y,
     },
     clickCount: 1,
     delay: 200,
   });
+  expect(await page.screenshot()).toMatchSnapshot({ name: 'exit_editing.png' });
 
   // click the object to select it
-  await clickCanvas(page, {
+  await util.clickCanvas({
     position: textCenter,
   });
 
-  // drag the control
-  await page.mouse.move(controlPoint.x, controlPoint.y);
+  // drag the mr control
+  await page.mouse.move(mrControlPoint.x, mrControlPoint.y);
+  await page.mouse.down();
+  await page.mouse.move(mrControlPoint.x + 300, mrControlPoint.y, {
+    steps: 40,
+  });
+  expect(await page.screenshot()).toMatchSnapshot({
+    name: 'increase_width_mr.png',
+  });
+  // drag in the opposite direction
+  await page.mouse.move(mrControlPoint.x - 300, mrControlPoint.y, {
+    steps: 60,
+  });
+  await page.mouse.up();
+  expect(await page.screenshot()).toMatchSnapshot({
+    name: 'decrease_width_mr.png',
+  });
+
+  // drag the ml control
+  const mlControlPoint = await textboxUtil.getObjectControlPoint('ml');
+  await page.mouse.move(mlControlPoint.x, mlControlPoint.y);
   await page.mouse.down();
-  await page.mouse.move(controlPoint.x + 300, controlPoint.y, { steps: 40 });
+  await page.mouse.move(mlControlPoint.x - 300, mlControlPoint.y, {
+    steps: 40,
+  });
+  expect(await page.screenshot()).toMatchSnapshot({
+    name: 'increase_width_ml.png',
+  });
+  // drag in the opposite direction
+  await page.mouse.move(mlControlPoint.x + 300, mlControlPoint.y, {
+    steps: 60,
+  });
   await page.mouse.up();
+  expect(await page.screenshot()).toMatchSnapshot({
+    name: 'decrease_width_ml.png',
+  });
 });

e2e/utils/ObjectUtil.ts

@@ -0,0 +1,49 @@
+import { Page, expect } from '@playwright/test';
+import type { Canvas, Object as FabricObject } from '../..';
+
+export class ObjectUtil {
+  constructor(readonly objectId: string, readonly page: Page) {}
+
+  executeInBrowser<C, R>(
+    runInBrowser: (
+      context: Omit<C, 'objectId'> & {
+        object: FabricObject;
+        canvas: Canvas;
+      }
+    ) => R,
+    context?: C
+  ): Promise<R> {
+    return this.page.evaluate(
+      ({ objectId, runInBrowser, ...context }) => {
+        return eval(runInBrowser)({
+          object:
+            objectId &&
+            fabricCanvas.getObjects().find((obj) => obj.id === objectId),
+          canvas: fabricCanvas,
+          ...context,
+        });
+      },
+      {
+        ...context,
+        objectId: this.objectId,
+        runInBrowser: runInBrowser.toString(),
+      }
+    );
+  }
+
+  getObjectCenter() {
+    return this.executeInBrowser(({ object }) => object.getCenterPoint());
+  }
+
+  getObjectControlPoint(controlName: string) {
+    return this.executeInBrowser(
+      ({ object, controlName }) => object.oCoords[controlName],
+      { controlName }
+    );
+  }
+
+  async expectObjectToMatch<T extends Record<string, unknown>>(expected: T) {
+    const snapshot = await this.executeInBrowser(({ object }) => object);
+    expect(snapshot).toMatchObject(expected);
+  }
+}

e2e/utils/TestUtil.ts

@@ -0,0 +1,29 @@
+import { Page } from '@playwright/test';
+import { ObjectUtil } from './ObjectUtil';
+
+let ID = 0;
+const uuid = () => `test${ID++}`;
+
+export class TestUtil {
+  constructor(readonly page: Page) {}
+
+  clickCanvas(clickProperties: Parameters<Page['click']>[1]) {
+    return this.page.click('canvas.upper-canvas', clickProperties);
+  }
+
+  async addTextbox(text: string, properties) {
+    const id = uuid();
+    await this.page.evaluate(
+      ({ id, text, ...properties }) => {
+        const textbox = new fabric.Textbox(text, {
+          ...properties,
+          id,
+        });
+        fabricCanvas.add(textbox);
+        return id;
+      },
+      { id, text, ...properties }
+    );
+    return new ObjectUtil(id, this.page);
+  }
+}

playwright.config.ts

@@ -50,6 +50,7 @@ const config: PlaywrightTestConfig = {
       name: 'chromium',
       use: {
         ...devices['Desktop Chrome'],
+        browserName: 'chromium',
       },
     },
   ],