feat(e2e): add screenshots ENV variable

.env.example

@@ -1,2 +1,3 @@
 E2E_LOGIN_EMAIL=""
 E2E_LOGIN_PASSWORD=""
+E2E_SCREENSHOTS= "false"

.gitignore

@@ -47,3 +47,6 @@ Thumbs.db
 **/assets/plugin.js
 
 docs/api
+
+
+apps/e2e/screenshots/*.png

apps/e2e/src/plugins.spec.ts

@@ -11,31 +11,41 @@ import { Agent } from './utils/agent';
 describe('Plugins', () => {
   it('create board - text - rectable', async () => {
     const agent = await Agent();
-    const result = await agent.runCode(testingPlugin.toString());
+    const result = await agent.runCode(testingPlugin.toString(), {
+      screenshot: 'create-board-text-rect',
+    });
     expect(result).toMatchSnapshot();
   });
 
   it('create flex layout', async () => {
     const agent = await Agent();
-    const result = await agent.runCode(flex.toString());
+    const result = await agent.runCode(flex.toString(), {
+      screenshot: 'create-flexlayout',
+    });
     expect(result).toMatchSnapshot();
   });
 
   it('create grid layout', async () => {
     const agent = await Agent();
-    const result = await agent.runCode(grid.toString());
+    const result = await agent.runCode(grid.toString(), {
+      screenshot: 'create-gridlayout',
+    });
     expect(result).toMatchSnapshot();
   });
 
   it('group and ungroup', async () => {
     const agent = await Agent();
-    const result = await agent.runCode(group.toString());
+    const result = await agent.runCode(group.toString(), {
+      screenshot: 'group-ungroup',
+    });
     expect(result).toMatchSnapshot();
   });
 
   it('insert svg', async () => {
     const agent = await Agent();
-    const result = await agent.runCode(insertSvg.toString());
+    const result = await agent.runCode(insertSvg.toString(), {
+      screenshot: 'insert-svg',
+    });
     expect(result).toMatchSnapshot();
   });
 
@@ -47,13 +57,17 @@ describe('Plugins', () => {
 
   it('component library', async () => {
     const agent = await Agent();
-    const result = await agent.runCode(componentLibrary.toString());
+    const result = await agent.runCode(componentLibrary.toString(), {
+      screenshot: 'component-library',
+    });
     expect(result).toMatchSnapshot();
   });
 
   it('text and textrange', async () => {
     const agent = await Agent();
-    const result = await agent.runCode(createText.toString());
+    const result = await agent.runCode(createText.toString(), {
+      screenshot: 'create-text',
+    });
     expect(result).toMatchSnapshot();
   });
 });

apps/e2e/src/plugins/component-library.ts

@@ -1,7 +1,10 @@
 export default function () {
   const rectangle = penpot.createRectangle();
+  rectangle.x = penpot.viewport.center.x;
+  rectangle.y = penpot.viewport.center.y;
+
   const shape = penpot.getPage()?.getShapeById(rectangle.id);
   if (shape) {
-    penpot.library.local.createComponent(shape);
+    penpot.library.local.createComponent([shape]);
   }
 }

apps/e2e/src/plugins/create-board-text-rect.ts

@@ -32,8 +32,6 @@ export default function () {
 
     board.name = 'Board name';
 
-    console.log(penpot.viewport.center.x);
-
     board.x = penpot.viewport.center.x;
     board.y = penpot.viewport.center.y;
 
@@ -54,7 +52,7 @@ export default function () {
     return board;
   }
 
-  createText('Hello from plugin');
-  createRectangle();
   createBoard();
+  createRectangle();
+  createText('Hello from plugin');
 }

apps/e2e/src/plugins/create-flexlayout.ts

@@ -4,6 +4,9 @@ export default function () {
     board.horizontalSizing = 'auto';
     board.verticalSizing = 'auto';
 
+    board.x = penpot.viewport.center.x;
+    board.y = penpot.viewport.center.y;
+
     const flex = board.addFlexLayout();
 
     flex.dir = 'column';

apps/e2e/src/plugins/create-gridlayout.ts

@@ -1,6 +1,8 @@
 export default function () {
   function createGridLayout(): void {
     const board = penpot.createBoard();
+    board.x = penpot.viewport.center.x;
+    board.y = penpot.viewport.center.y;
 
     const grid = board.addGridLayout();
 

apps/e2e/src/plugins/create-text.ts

@@ -1,22 +1,23 @@
 export default function () {
-    function createText(): void {
-      const text = penpot.createText('Hello World!');
+  function createText(): void {
+    const text = penpot.createText('Hello World!');
 
-      if (text) {
-        text.growType = 'auto-width';
-        text.textTransform = 'uppercase';
-        text.textDecoration = 'underline';
-        text.fontId = 'gfont-work-sans';
-        text.fontStyle = 'italic';
-        text.fontSize = '20';
-        text.fontWeight = '500';
-  
-        const textRange = text.getRange(0, 5);
-        textRange.fontSize = '40';
-        textRange.fills = [{ fillColor: '#ff6fe0', fillOpacity: 1 }];
-      }
+    if (text) {
+      text.x = penpot.viewport.center.x;
+      text.y = penpot.viewport.center.y;
+      text.growType = 'auto-width';
+      text.textTransform = 'uppercase';
+      text.textDecoration = 'underline';
+      text.fontId = 'gfont-work-sans';
+      text.fontStyle = 'italic';
+      text.fontSize = '20';
+      text.fontWeight = '500';
+
+      const textRange = text.getRange(0, 5);
+      textRange.fontSize = '40';
+      textRange.fills = [{ fillColor: '#ff6fe0', fillOpacity: 1 }];
     }
-  
-    createText();
   }
-  
+
+  createText();
+}

apps/e2e/src/plugins/group.ts

@@ -16,7 +16,11 @@ export default function () {
   }
 
   const rectangle = penpot.createRectangle();
+  rectangle.x = penpot.viewport.center.x;
+  rectangle.y = penpot.viewport.center.y;
   const rectangle2 = penpot.createRectangle();
+  rectangle2.x = penpot.viewport.center.x + 100;
+  rectangle2.y = penpot.viewport.center.y + 100;
 
   penpot.selection = [rectangle, rectangle2];
 

apps/e2e/src/utils/agent.ts

@@ -4,6 +4,8 @@ import { getFileUrl } from './get-file-url';
 import { idObjectToArray } from './clean-id';
 import { Shape } from '../models/shape.model';
 
+const screenshotsEnable = process.env['E2E_SCREENSHOTS'] === 'true';
+
 function replaceIds(shapes: Shape[]) {
   let id = 1;
 
@@ -96,6 +98,8 @@ export async function Agent() {
         autoFinish: true,
       }
     ) {
+      const autoFinish = options.autoFinish ?? true;
+
       console.log('Running plugin code...');
       await page.evaluate((testingPlugin) => {
         (globalThis as any).ɵloadPlugin({
@@ -119,9 +123,11 @@ export async function Agent() {
       );
       console.log('Save status found.');
 
-      if (options.screenshot) {
+      if (options.screenshot && screenshotsEnable) {
         console.log('Taking screenshot:', options.screenshot);
-        await page.screenshot({ path: options.screenshot });
+        await page.screenshot({
+          path: 'screenshots/' + options.screenshot + '.png',
+        });
       }
 
       return new Promise((resolve) => {
@@ -137,7 +143,7 @@ export async function Agent() {
 
           resolve(result);
 
-          if (options.autoFinish) {
+          if (autoFinish) {
             console.log('Auto finish enabled. Cleaning up...');
             finish();
           }

docs/test-e2e.md

@@ -9,6 +9,7 @@
    ```env
    E2E_LOGIN_EMAIL="test@penpot.app"
    E2E_LOGIN_PASSWORD="123123123"
+   E2E_SCREENSHOTS= "true"
    ```
 
 2. **Run E2E Tests**
@@ -57,7 +58,7 @@
    ```ts
    const result = await agent.runCode(testingPlugin.toString(), {
      autoFinish: false, // default: true
-     screenshot: 'capture.png', // default: ''
+     screenshot: 'test-name', // default: ''
    });
 
    // Finish will close the browser & delete the file