New whiteboard tests + refactoring

bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/zoom-tool/component.jsx

@@ -179,6 +179,7 @@ class ZoomTool extends PureComponent {
               aria-describedby="zoomOutDescription"
               aria-label={zoomOutAriaLabel}
               label={intl.formatMessage(intlMessages.zoomOutLabel)}
+              data-test="zoomOutBtn"
               icon="substract"
               onClick={() => { }}
               disabled={(zoomValue <= minBound) || !isMeteorConnected}
@@ -198,6 +199,7 @@ class ZoomTool extends PureComponent {
               size="md"
               onClick={() => this.resetZoom()}
               label={intl.formatMessage(intlMessages.resetZoomLabel)}
+              data-test="resetZoomButton"
               hideLabel
             />
             <div id="resetZoomDescription" hidden>

bigbluebutton-tests/playwright/core/constants.js

@@ -21,3 +21,4 @@ exports.VIDEO_LOADING_WAIT_TIME = 15000;
 exports.UPLOAD_PDF_WAIT_TIME = CI ? 40000 : 20000;
 
 exports.CUSTOM_MEETING_ID = 'custom-meeting';
+exports.PARAMETER_HIDE_PRESENTATION_TOAST = 'userdata-bbb_custom_style=.presentationUploaderToast{display: none;}.currentPresentationToast{display:none;}';

bigbluebutton-tests/playwright/core/elements.js

@@ -424,6 +424,12 @@ exports.multiUsersWhiteboardOff = 'button[data-test="turnMultiUsersWhiteboardOff
 exports.whiteboardViewBox = 'svg g[clip-path="url(#viewBox)"]';
 exports.changeWhiteboardAccess = 'li[data-test="changeWhiteboardAccess"]';
 exports.pencil = 'button[data-test="pencilTool"]';
+exports.resetZoomButton = 'button[data-test="resetZoomButton"]';
+exports.zoomInButton = 'button[data-test="zoomInBtn"]';
+exports.zoomOutButton = 'button[data-test="zoomOutBtn"]';
+exports.wbPan = 'button[data-test="panButton"]';
+exports.wbEraser = 'button[id="TD-PrimaryTools-Eraser"]';
+exports.wbArrowShape = 'button[id="TD-PrimaryTools-ArrowTopRight"]';
 
 // About modal
 exports.showAboutModalButton = 'li[data-test="aboutModal"]';

bigbluebutton-tests/playwright/core/util.js

@@ -27,6 +27,16 @@ async function checkTextContent(baseContent, checkData) {
   await expect(check).toBeTruthy();
 }
 
+function constructClipObj(wbBox) {
+  return {
+      x: wbBox.x,
+      y: wbBox.y,
+      width: wbBox.width,
+      height: wbBox.height,
+    };
+}
+
 exports.checkElement = checkElement;
 exports.checkElementLengthEqualTo = checkElementLengthEqualTo;
 exports.checkTextContent = checkTextContent;
+exports.constructClipObj = constructClipObj;

bigbluebutton-tests/playwright/layouts/layouts.spec.js

@@ -3,21 +3,23 @@ const { FocusOnPresentation } = require('./focusOnPresentation');
 const { FocusOnVideo } = require('./focusOnVideo');
 const { MultiUsers } = require('../user/multiusers');
 const { encodeCustomParams } = require('../customparameters/util');
+const { PARAMETER_HIDE_PRESENTATION_TOAST } = require('../core/constants');
+
+const hidePresentationToast = encodeCustomParams(PARAMETER_HIDE_PRESENTATION_TOAST);
 
 const CUSTOM_MEETING_ID = 'layout_management_meeting';
-const CUSTOM_STYLE = `userdata-bbb_custom_style=.presentationUploaderToast{display: none;}.currentPresentationToast{display:none;}`;
 
 test.describe.parallel('Layout management', () => {
   test('Focus on presentation', async ({ browser, context, page }) => {
     const focusOnPresentation = new FocusOnPresentation(browser, context);
-    await focusOnPresentation.initModPage(page, true, { customMeetingId: CUSTOM_MEETING_ID, customParameter: encodeCustomParams(CUSTOM_STYLE) });
-    await focusOnPresentation.initModPage2(true, context, { customParameter: encodeCustomParams(CUSTOM_STYLE) });
+    await focusOnPresentation.initModPage(page, true, { customMeetingId: CUSTOM_MEETING_ID, customParameter: hidePresentationToast });
+    await focusOnPresentation.initModPage2(true, context, { customParameter: hidePresentationToast });
     await focusOnPresentation.test();
   });
   test('Focus on video', async ({ browser, context, page }) => {
     const focusOnVideo = new FocusOnVideo(browser, context);
-    await focusOnVideo.initModPage(page, true, { customMeetingId: CUSTOM_MEETING_ID, customParameter: encodeCustomParams(CUSTOM_STYLE) });
-    await focusOnVideo.initModPage2(true, context, { customParameter: encodeCustomParams(CUSTOM_STYLE) });
+    await focusOnVideo.initModPage(page, true, { customMeetingId: CUSTOM_MEETING_ID, customParameter: hidePresentationToast });
+    await focusOnVideo.initModPage2(true, context, { customParameter: hidePresentationToast });
     await focusOnVideo.test();
   });
 });

bigbluebutton-tests/playwright/whiteboard/drawArrow.js

@@ -0,0 +1,35 @@
+const { expect } = require('@playwright/test');
+const e = require('../core/elements');
+const { ELEMENT_WAIT_LONGER_TIME } = require('../core/constants');
+const { MultiUsers } = require('../user/multiusers');
+const { constructClipObj } = require('../core/util');
+
+class DrawArrow extends MultiUsers {
+  constructor(browser, context) {
+    super(browser, context);
+  }
+
+  async test() {
+    await this.modPage.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
+
+    const wbBox = await this.modPage.getElementBoundingBox(e.whiteboard);
+    const clipObj = constructClipObj(wbBox);
+    const screenshotOptions = {
+      maxDiffPixels: 1000,
+      clip: clipObj,
+    };
+
+    await this.modPage.waitAndClick(e.wbArrowShape);
+
+    await this.modPage.page.mouse.move(wbBox.x + 0.3 * wbBox.width, wbBox.y + 0.3 * wbBox.height);
+    await this.modPage.page.mouse.down();
+    await this.modPage.page.mouse.move(wbBox.x + 0.7 * wbBox.width, wbBox.y + 0.7 * wbBox.height);
+    await this.modPage.page.mouse.up();
+
+    await expect(this.modPage.page).toHaveScreenshot('moderator1-arrow.png', screenshotOptions);
+
+    await expect(this.modPage2.page).toHaveScreenshot('moderator2-arrow.png', screenshotOptions);
+  }
+}
+
+exports.DrawArrow = DrawArrow;

bigbluebutton-tests/playwright/whiteboard/drawEllipse.js

@@ -2,6 +2,7 @@ const { expect } = require('@playwright/test');
 const e = require('../core/elements');
 const { ELEMENT_WAIT_LONGER_TIME } = require('../core/constants');
 const { MultiUsers } = require('../user/multiusers');
+const { constructClipObj } = require('../core/util');
 
 class DrawEllipse extends MultiUsers {
   constructor(browser, context) {
@@ -10,31 +11,25 @@ class DrawEllipse extends MultiUsers {
 
   async test() {
     await this.modPage.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
+
+    const wbBox = await this.modPage.getElementBoundingBox(e.whiteboard);
+    const clipObj = constructClipObj(wbBox);
+    const screenshotOptions = {
+      maxDiffPixels: 1000,
+      clip: clipObj,
+    };
+
     await this.modPage.waitAndClick(e.wbShapesButton);
     await this.modPage.waitAndClick(e.wbEllipseShape);
 
-    const wbBox = await this.modPage.getElementBoundingBox(e.whiteboard);
     await this.modPage.page.mouse.move(wbBox.x + 0.3 * wbBox.width, wbBox.y + 0.3 * wbBox.height);
     await this.modPage.page.mouse.down();
     await this.modPage.page.mouse.move(wbBox.x + 0.7 * wbBox.width, wbBox.y + 0.7 * wbBox.height);
     await this.modPage.page.mouse.up();
 
-    const clipObj = {
-      x: wbBox.x,
-      y: wbBox.y,
-      width: wbBox.width,
-      height: wbBox.height,
-    };
+    await expect(this.modPage.page).toHaveScreenshot('moderator1-ellipse.png', screenshotOptions);
 
-    await expect(this.modPage.page).toHaveScreenshot('moderator1-ellipse.png', {
-      maxDiffPixels: 1000,
-      clip: clipObj,
-    });
-
-    await expect(this.modPage2.page).toHaveScreenshot('moderator2-ellipse.png', {
-      maxDiffPixels: 1000,
-      clip: clipObj,
-    });
+    await expect(this.modPage2.page).toHaveScreenshot('moderator2-ellipse.png', screenshotOptions);
   }
 }
 

bigbluebutton-tests/playwright/whiteboard/drawLine.js

@@ -2,6 +2,7 @@ const { expect } = require('@playwright/test');
 const e = require('../core/elements');
 const { ELEMENT_WAIT_LONGER_TIME } = require('../core/constants');
 const { MultiUsers } = require('../user/multiusers');
+const { constructClipObj } = require('../core/util');
 
 class DrawLine extends MultiUsers {
   constructor(browser, context) {
@@ -10,31 +11,25 @@ class DrawLine extends MultiUsers {
 
   async test() {
     await this.modPage.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
+
+    const wbBox = await this.modPage.getElementBoundingBox(e.whiteboard);
+    const clipObj = constructClipObj(wbBox);
+    const screenshotOptions = {
+      maxDiffPixels: 1000,
+      clip: clipObj,
+    };
+
     await this.modPage.waitAndClick(e.wbShapesButton);
     await this.modPage.waitAndClick(e.wbLineShape);
 
-    const wbBox = await this.modPage.getElementBoundingBox(e.whiteboard);
     await this.modPage.page.mouse.move(wbBox.x + 0.3 * wbBox.width, wbBox.y + 0.3 * wbBox.height);
     await this.modPage.page.mouse.down();
     await this.modPage.page.mouse.move(wbBox.x + 0.7 * wbBox.width, wbBox.y + 0.7 * wbBox.height);
     await this.modPage.page.mouse.up();
 
-    const clipObj = {
-      x: wbBox.x,
-      y: wbBox.y,
-      width: wbBox.width,
-      height: wbBox.height,
-    };
+    await expect(this.modPage.page).toHaveScreenshot('moderator1-line.png', screenshotOptions);
 
-    await expect(this.modPage.page).toHaveScreenshot('moderator1-line.png', {
-      maxDiffPixels: 1000,
-      clip: clipObj,
-    });
-
-    await expect(this.modPage2.page).toHaveScreenshot('moderator2-line.png', {
-      maxDiffPixels: 1000,
-      clip: clipObj,
-    });
+    await expect(this.modPage2.page).toHaveScreenshot('moderator2-line.png', screenshotOptions);
   }
 }
 

bigbluebutton-tests/playwright/whiteboard/drawPencil.js

@@ -2,6 +2,7 @@ const { expect } = require('@playwright/test');
 const e = require('../core/elements');
 const { ELEMENT_WAIT_LONGER_TIME } = require('../core/constants');
 const { MultiUsers } = require('../user/multiusers');
+const { constructClipObj } = require('../core/util');
 
 class DrawPencil extends MultiUsers {
   constructor(browser, context) {
@@ -10,9 +11,16 @@ class DrawPencil extends MultiUsers {
 
   async test() {
     await this.modPage.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
-    await this.modPage.waitAndClick(e.wbPencilShape);
 
     const wbBox = await this.modPage.getElementBoundingBox(e.whiteboard);
+    const clipObj = constructClipObj(wbBox);
+    const screenshotOptions = {
+      maxDiffPixels: 1000,
+      clip: clipObj,
+    };
+    
+    await this.modPage.waitAndClick(e.wbPencilShape);
+
     const moveOptions = { steps: 50 }; // to slow down
     await this.modPage.page.mouse.move(wbBox.x + 0.2 * wbBox.width, wbBox.y + 0.2 * wbBox.height);
     await this.modPage.page.mouse.down();
@@ -21,22 +29,9 @@ class DrawPencil extends MultiUsers {
     await this.modPage.page.mouse.move(wbBox.x + 0.8 * wbBox.width, wbBox.y + 0.4 * wbBox.height, moveOptions);
     await this.modPage.page.mouse.up();
 
-    const clipObj = {
-      x: wbBox.x,
-      y: wbBox.y,
-      width: wbBox.width,
-      height: wbBox.height,
-    };
+    await expect(this.modPage.page).toHaveScreenshot('moderator1-pencil.png', screenshotOptions);
 
-    await expect(this.modPage.page).toHaveScreenshot('moderator1-pencil.png', {
-      maxDiffPixels: 1000,
-      clip: clipObj,
-    });
-
-    await expect(this.modPage2.page).toHaveScreenshot('moderator2-pencil.png', {
-      maxDiffPixels: 1000,
-      clip: clipObj,
-    });
+    await expect(this.modPage2.page).toHaveScreenshot('moderator2-pencil.png', screenshotOptions);
   }
 }
 

bigbluebutton-tests/playwright/whiteboard/drawRectangle.js

@@ -2,6 +2,7 @@ const { expect } = require('@playwright/test');
 const e = require('../core/elements');
 const { ELEMENT_WAIT_LONGER_TIME } = require('../core/constants');
 const { MultiUsers } = require('../user/multiusers');
+const { constructClipObj } = require('../core/util');
 
 class DrawRectangle extends MultiUsers {
   constructor(browser, context) {
@@ -10,31 +11,25 @@ class DrawRectangle extends MultiUsers {
 
   async test() {
     await this.modPage.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
+
+    const wbBox = await this.modPage.getElementBoundingBox(e.whiteboard);
+    const clipObj = constructClipObj(wbBox);
+    const screenshotOptions = {
+      maxDiffPixels: 1000,
+      clip: clipObj,
+    };
+
     await this.modPage.waitAndClick(e.wbShapesButton);
     await this.modPage.waitAndClick(e.wbRectangleShape);
 
-    const wbBox = await this.modPage.getElementBoundingBox(e.whiteboard);
     await this.modPage.page.mouse.move(wbBox.x + 0.3 * wbBox.width, wbBox.y + 0.3 * wbBox.height);
     await this.modPage.page.mouse.down();
     await this.modPage.page.mouse.move(wbBox.x + 0.7 * wbBox.width, wbBox.y + 0.7 * wbBox.height);
     await this.modPage.page.mouse.up();
 
-    const clipObj = {
-      x: wbBox.x,
-      y: wbBox.y,
-      width: wbBox.width,
-      height: wbBox.height,
-    };
+    await expect(this.modPage.page).toHaveScreenshot('moderator1-rectangle.png', screenshotOptions);
 
-    await expect(this.modPage.page).toHaveScreenshot('moderator1-rectangle.png', {
-      maxDiffPixels: 1000,
-      clip: clipObj,
-    });
-
-    await expect(this.modPage2.page).toHaveScreenshot('moderator2-rectangle.png', {
-      maxDiffPixels: 1000,
-      clip: clipObj,
-    });
+    await expect(this.modPage2.page).toHaveScreenshot('moderator2-rectangle.png', screenshotOptions);
   }
 }
 

bigbluebutton-tests/playwright/whiteboard/drawStickyNote.js

@@ -2,6 +2,7 @@ const { expect } = require('@playwright/test');
 const e = require('../core/elements');
 const { ELEMENT_WAIT_LONGER_TIME } = require('../core/constants');
 const { MultiUsers } = require('../user/multiusers');
+const { constructClipObj } = require('../core/util');
 
 class DrawStickyNote extends MultiUsers {
   constructor(browser, context) {
@@ -10,9 +11,16 @@ class DrawStickyNote extends MultiUsers {
 
   async test() {
     await this.modPage.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
-    await this.modPage.waitAndClick(e.wbStickyNoteShape);
 
     const wbBox = await this.modPage.getElementBoundingBox(e.whiteboard);
+    const clipObj = constructClipObj(wbBox);
+    const screenshotOptions = {
+      maxDiffPixels: 1000,
+      clip: clipObj,
+    };
+
+    await this.modPage.waitAndClick(e.wbStickyNoteShape);
+
     await this.modPage.page.mouse.click(wbBox.x + 0.3 * wbBox.width, wbBox.y + 0.3 * wbBox.height);
 
     await this.modPage.press('A');
@@ -24,21 +32,8 @@ class DrawStickyNote extends MultiUsers {
     await this.modPage.hasText(e.wbTypedStickyNote, 'AB');
     await this.modPage2.hasText(e.wbTypedStickyNote, 'AB');
 
-    const clipObj = {
-      x: wbBox.x,
-      y: wbBox.y,
-      width: wbBox.width,
-      height: wbBox.height,
-    };
-
-    await expect(this.modPage.page).toHaveScreenshot('moderator1-sticky.png', {
-      maxDiffPixels: 1000,
-      clip: clipObj,
-    });
-    await expect(this.modPage2.page).toHaveScreenshot('moderator2-sticky.png', {
-      maxDiffPixels: 1000,
-      clip: clipObj,
-    });
+    await expect(this.modPage.page).toHaveScreenshot('moderator1-sticky.png', screenshotOptions);
+    await expect(this.modPage2.page).toHaveScreenshot('moderator2-sticky.png', screenshotOptions);
   }
 }
 

bigbluebutton-tests/playwright/whiteboard/drawText.js

@@ -2,6 +2,7 @@ const { expect } = require('@playwright/test');
 const e = require('../core/elements');
 const { ELEMENT_WAIT_LONGER_TIME } = require('../core/constants');
 const { MultiUsers } = require('../user/multiusers');
+const { constructClipObj } = require('../core/util');
 
 class DrawText extends MultiUsers {
   constructor(browser, context) {
@@ -10,9 +11,16 @@ class DrawText extends MultiUsers {
 
   async test() {
     await this.modPage.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
-    await this.modPage.waitAndClick(e.wbTextShape);
 
     const wbBox = await this.modPage.getElementBoundingBox(e.whiteboard);
+    const clipObj = constructClipObj(wbBox);
+    const screenshotOptions = {
+      maxDiffPixels: 1000,
+      clip: clipObj,
+    };
+
+    await this.modPage.waitAndClick(e.wbTextShape);
+
     await this.modPage.page.mouse.click(wbBox.x + 0.3 * wbBox.width, wbBox.y + 0.3 * wbBox.height);
 
     await this.modPage.press('A');
@@ -21,21 +29,8 @@ class DrawText extends MultiUsers {
     await this.modPage.press('B');
     await this.modPage.page.mouse.click(wbBox.x + 0.6 * wbBox.width, wbBox.y + 0.6 * wbBox.height);
 
-    const clipObj = {
-      x: wbBox.x,
-      y: wbBox.y,
-      width: wbBox.width,
-      height: wbBox.height,
-    };
-
-    await expect(this.modPage.page).toHaveScreenshot('moderator1-text.png', {
-      maxDiffPixels: 1000,
-      clip: clipObj,
-    });
-    await expect(this.modPage2.page).toHaveScreenshot('moderator2-text.png', {
-      maxDiffPixels: 1000,
-      clip: clipObj,
-    });
+    await expect(this.modPage.page).toHaveScreenshot('moderator1-text.png', screenshotOptions);
+    await expect(this.modPage2.page).toHaveScreenshot('moderator2-text.png', screenshotOptions);
   }
 }
 

bigbluebutton-tests/playwright/whiteboard/drawTriangle.js

@@ -2,6 +2,7 @@ const { expect } = require('@playwright/test');
 const e = require('../core/elements');
 const { ELEMENT_WAIT_LONGER_TIME } = require('../core/constants');
 const { MultiUsers } = require('../user/multiusers');
+const { constructClipObj } = require('../core/util');
 
 class DrawTriangle extends MultiUsers {
   constructor(browser, context) {
@@ -10,31 +11,25 @@ class DrawTriangle extends MultiUsers {
 
   async test() {
     await this.modPage.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
+
+    const wbBox = await this.modPage.getElementBoundingBox(e.whiteboard);
+    const clipObj = constructClipObj(wbBox);
+    const screenshotOptions = {
+      maxDiffPixels: 1000,
+      clip: clipObj,
+    };
+
     await this.modPage.waitAndClick(e.wbShapesButton);
     await this.modPage.waitAndClick(e.wbTriangleShape);
 
-    const wbBox = await this.modPage.getElementBoundingBox(e.whiteboard);
     await this.modPage.page.mouse.move(wbBox.x + 0.3 * wbBox.width, wbBox.y + 0.3 * wbBox.height);
     await this.modPage.page.mouse.down();
     await this.modPage.page.mouse.move(wbBox.x + 0.7 * wbBox.width, wbBox.y + 0.7 * wbBox.height);
     await this.modPage.page.mouse.up();
 
-    const clipObj = {
-      x: wbBox.x,
-      y: wbBox.y,
-      width: wbBox.width,
-      height: wbBox.height,
-    };
+    await expect(this.modPage.page).toHaveScreenshot('moderator1-triangle.png', screenshotOptions);
 
-    await expect(this.modPage.page).toHaveScreenshot('moderator1-triangle.png', {
-      maxDiffPixels: 1000,
-      clip: clipObj,
-    });
-
-    await expect(this.modPage2.page).toHaveScreenshot('moderator2-triangle.png', {
-      maxDiffPixels: 1000,
-      clip: clipObj,
-    });
+    await expect(this.modPage2.page).toHaveScreenshot('moderator2-triangle.png', screenshotOptions);
   }
 }
 

bigbluebutton-tests/playwright/whiteboard/eraser.js

@@ -0,0 +1,48 @@
+const { expect } = require('@playwright/test');
+const e = require('../core/elements');
+const { ELEMENT_WAIT_LONGER_TIME } = require('../core/constants');
+const { MultiUsers } = require('../user/multiusers');
+const { constructClipObj } = require('../core/util');
+
+const defaultZoomLevel = '100%';
+const zoomedInZoomLevel = '125%';
+const maxZoomLevel = '400%';
+
+class Eraser extends MultiUsers {
+  constructor(browser, context) {
+    super(browser, context);
+  }
+
+  async test() {
+    await this.modPage.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
+
+    const wbBox = await this.modPage.getElementBoundingBox(e.whiteboard);
+    const clipObj = constructClipObj(wbBox);
+    const screenshotOptions = {
+      maxDiffPixels: 1000,
+      clip: clipObj,
+    };
+
+    await this.modPage.waitAndClick(e.wbShapesButton);
+    await this.modPage.waitAndClick(e.wbLineShape);
+
+    await this.modPage.page.mouse.move(wbBox.x + 0.3 * wbBox.width, wbBox.y + 0.3 * wbBox.height);
+    await this.modPage.page.mouse.down();
+    await this.modPage.page.mouse.move(wbBox.x + 0.7 * wbBox.width, wbBox.y + 0.7 * wbBox.height);
+    await this.modPage.page.mouse.up();
+
+    await this.modPage.waitAndClick(e.wbEraser);
+    await this.modPage.page.mouse.move(wbBox.x + 0.3 * wbBox.width, wbBox.y + 0.7 * wbBox.height);
+    await this.modPage.page.mouse.down();
+    await this.modPage.page.mouse.move(wbBox.x + 0.7 * wbBox.width, wbBox.y + 0.3 * wbBox.height);
+
+    await expect(this.modPage.page).toHaveScreenshot('moderator1-eraser1.png', screenshotOptions);
+    await expect(this.modPage.page).toHaveScreenshot('moderator2-eraser1.png', screenshotOptions);
+
+    await this.modPage.page.mouse.up();
+    await expect(this.modPage.page).toHaveScreenshot('moderator1-eraser2.png', screenshotOptions);
+    await expect(this.modPage2.page).toHaveScreenshot('moderator2-eraser2.png', screenshotOptions);
+  }
+}
+
+exports.Eraser = Eraser;

bigbluebutton-tests/playwright/whiteboard/pan.js

@@ -0,0 +1,40 @@
+const { expect } = require('@playwright/test');
+const e = require('../core/elements');
+const { ELEMENT_WAIT_LONGER_TIME } = require('../core/constants');
+const { MultiUsers } = require('../user/multiusers');
+const { constructClipObj } = require('../core/util');
+
+const defaultZoomLevel = '100%';
+const zoomedInZoomLevel = '125%';
+const maxZoomLevel = '400%';
+
+class Pan extends MultiUsers {
+  constructor(browser, context) {
+    super(browser, context);
+  }
+
+  async test() {
+    await this.modPage.waitForSelector(e.resetZoomButton, ELEMENT_WAIT_LONGER_TIME);
+
+    const wbBox = await this.modPage.getElementBoundingBox(e.whiteboard);
+    const clipObj = constructClipObj(wbBox);
+    const screenshotOptions = {
+      maxDiffPixels: 1000,
+      clip: clipObj,
+    };
+
+    for(let i = 100; i < 200; i += 25) {
+      await this.modPage.waitAndClick(e.zoomInButton);
+    }
+
+    await this.modPage.page.mouse.move(wbBox.x + 0.3 * wbBox.width, wbBox.y + 0.3 * wbBox.height);
+    await this.modPage.page.mouse.down();
+    await this.modPage.page.mouse.move(wbBox.x + 0.7 * wbBox.width, wbBox.y + 0.7 * wbBox.height);
+    await this.modPage.page.mouse.up();
+    await expect(this.modPage.page).toHaveScreenshot('moderator1-pan.png', screenshotOptions);
+
+    await expect(this.modPage2.page).toHaveScreenshot('moderator2-pan.png', screenshotOptions);
+  }
+}
+
+exports.Pan = Pan;

bigbluebutton-tests/playwright/whiteboard/whiteboard.spec.js

@@ -7,8 +7,15 @@ const { DrawLine } = require('./drawLine');
 const { DrawPencil } = require('./drawPencil');
 const { DrawText } = require('./drawText');
 const { DrawStickyNote } = require('./drawStickyNote');
+const { Zoom } = require('./zoom');
+const { Pan } = require('./pan');
+const { Eraser } = require('./eraser');
+const { DrawArrow } = require('./drawArrow');
 const { MultiUsers } = require('../user/multiusers');
 const { encodeCustomParams } = require('../customparameters/util');
+const { PARAMETER_HIDE_PRESENTATION_TOAST } = require('../core/constants');
+
+const hidePresentationToast = encodeCustomParams(PARAMETER_HIDE_PRESENTATION_TOAST);
 
 test.describe.parallel('Whiteboard @ci', () => {
   test('Draw rectangle', async ({ browser, page }) => {
@@ -24,7 +31,7 @@ test.describe.parallel('Whiteboard @ci', () => {
   });
 });
 
-test.describe.parallel('Drawing - visual regression', () => {
+test.describe.parallel('Whiteboard tools - visual regression', () => {
   test.beforeEach(({ browserName }) => {
     test.skip(browserName !== 'chromium',
       'Drawing visual regression tests are enabled for Chromium only');
@@ -32,50 +39,78 @@ test.describe.parallel('Drawing - visual regression', () => {
 
   test('Draw rectangle', async ({ browser, context, page }) => {
     const drawRectangle = new DrawRectangle(browser, context);
-    await drawRectangle.initModPage(page, true, { customMeetingId: 'draw_rectangle_meeting', customParameter: encodeCustomParams(`userdata-bbb_custom_style=.presentationUploaderToast{display: none;}.currentPresentationToast{display:none;}`) });
-    await drawRectangle.initModPage2(true, context, { customParameter: encodeCustomParams(`userdata-bbb_custom_style=.presentationUploaderToast{display: none;}.currentPresentationToast{display:none;}`) });
+    await drawRectangle.initModPage(page, true, { customMeetingId: 'draw_rectangle_meeting', customParameter: hidePresentationToast });
+    await drawRectangle.initModPage2(true, context, { customParameter: hidePresentationToast });
     await drawRectangle.test();
   });
 
   test('Draw ellipse', async ({ browser, context, page }) => {
     const drawEllipse = new DrawEllipse(browser, context);
-    await drawEllipse.initModPage(page, true, { customMeetingId: 'draw_ellipse_meeting', customParameter: encodeCustomParams(`userdata-bbb_custom_style=.presentationUploaderToast{display: none;}.currentPresentationToast{display:none;}`) });
-    await drawEllipse.initModPage2(true, context, { customParameter: encodeCustomParams(`userdata-bbb_custom_style=.presentationUploaderToast{display: none;}.currentPresentationToast{display:none;}`) });
+    await drawEllipse.initModPage(page, true, { customMeetingId: 'draw_ellipse_meeting', customParameter: hidePresentationToast });
+    await drawEllipse.initModPage2(true, context, { customParameter: hidePresentationToast });
     await drawEllipse.test();
   });
 
   test('Draw triangle', async ({ browser, context, page }) => {
     const drawTriangle = new DrawTriangle(browser, context);
-    await drawTriangle.initModPage(page, true, { customMeetingId: 'draw_triangle_meeting', customParameter: encodeCustomParams(`userdata-bbb_custom_style=.presentationUploaderToast{display: none;}.currentPresentationToast{display:none;}`) });
-    await drawTriangle.initModPage2(true, context, { customParameter: encodeCustomParams(`userdata-bbb_custom_style=.presentationUploaderToast{display: none;}.currentPresentationToast{display:none;}`) });
+    await drawTriangle.initModPage(page, true, { customMeetingId: 'draw_triangle_meeting', customParameter: hidePresentationToast });
+    await drawTriangle.initModPage2(true, context, { customParameter: hidePresentationToast });
     await drawTriangle.test();
   });
 
   test('Draw line', async ({ browser, context, page }) => {
     const drawLine = new DrawLine(browser, context);
-    await drawLine.initModPage(page, true, { customMeetingId: 'draw_line_meeting', customParameter: encodeCustomParams(`userdata-bbb_custom_style=.presentationUploaderToast{display: none;}.currentPresentationToast{display:none;}`) });
-    await drawLine.initModPage2(true, context, { customParameter: encodeCustomParams(`userdata-bbb_custom_style=.presentationUploaderToast{display: none;}.currentPresentationToast{display:none;}`) });
+    await drawLine.initModPage(page, true, { customMeetingId: 'draw_line_meeting', customParameter: hidePresentationToast });
+    await drawLine.initModPage2(true, context, { customParameter: hidePresentationToast });
     await drawLine.test();
   });
 
   test('Draw with pencil', async ({ browser, context, page }) => {
     const drawPencil = new DrawPencil(browser, context);
-    await drawPencil.initModPage(page, true, { customMeetingId: 'draw_pencil_meeting', customParameter: encodeCustomParams(`userdata-bbb_custom_style=.presentationUploaderToast{display: none;}.currentPresentationToast{display:none;}`) });
-    await drawPencil.initModPage2(true, context, { customParameter: encodeCustomParams(`userdata-bbb_custom_style=.presentationUploaderToast{display: none;}.currentPresentationToast{display:none;}`) });
+    await drawPencil.initModPage(page, true, { customMeetingId: 'draw_pencil_meeting', customParameter: hidePresentationToast });
+    await drawPencil.initModPage2(true, context, { customParameter: hidePresentationToast });
     await drawPencil.test();
   });
 
   test('Type text', async ({ browser, context, page }) => {
     const drawText = new DrawText(browser, context);
-    await drawText.initModPage(page, true, { customMeetingId: 'draw_text_meeting', customParameter: encodeCustomParams(`userdata-bbb_custom_style=.presentationUploaderToast{display: none;}.currentPresentationToast{display:none;}`) });
-    await drawText.initModPage2(true, context, { customParameter: encodeCustomParams(`userdata-bbb_custom_style=.presentationUploaderToast{display: none;}.currentPresentationToast{display:none;}`) });
+    await drawText.initModPage(page, true, { customMeetingId: 'draw_text_meeting', customParameter: hidePresentationToast });
+    await drawText.initModPage2(true, context, { customParameter: hidePresentationToast });
     await drawText.test();
   });
 
   test('Create sticky note', async ({ browser, context, page }) => {
     const drawStickyNote = new DrawStickyNote(browser, context);
-    await drawStickyNote.initModPage(page, true, { customMeetingId: 'draw_sticky_meeting', customParameter: encodeCustomParams(`userdata-bbb_custom_style=.presentationUploaderToast{display: none;}.currentPresentationToast{display:none;}`) });
-    await drawStickyNote.initModPage2(true, context, { customParameter: encodeCustomParams(`userdata-bbb_custom_style=.presentationUploaderToast{display: none;}.currentPresentationToast{display:none;}`) });
+    await drawStickyNote.initModPage(page, true, { customMeetingId: 'draw_sticky_meeting', customParameter: hidePresentationToast });
+    await drawStickyNote.initModPage2(true, context, { customParameter: hidePresentationToast });
     await drawStickyNote.test();
   });
+
+  test('Zoom', async ({ browser, context, page }) => {
+    const zoom = new Zoom(browser, context);
+    await zoom.initModPage(page, true, { customMeetingId: 'draw_line_meeting', customParameter: hidePresentationToast });
+    await zoom.initModPage2(true, context, { customParameter: hidePresentationToast });
+    await zoom.test();
+  });
+
+  test'Pan', async ({ browser, context, page }) => {
+    const pan = new Pan(browser, context);
+    await pan.initModPage(page, true, { customMeetingId: 'draw_line_meeting', customParameter: hidePresentationToast });
+    await pan.initModPage2(true, context, { customParameter: hidePresentationToast });
+    await pan.test();
+  });
+
+  test('Eraser', async ({ browser, context, page }) => {
+    const eraser = new Eraser(browser, context);
+    await eraser.initModPage(page, true, { customMeetingId: 'draw_line_meeting', customParameter: hidePresentationToast });
+    await eraser.initModPage2(true, context, { customParameter: hidePresentationToast });
+    await eraser.test();
+  });
+
+  test('Draw arrow', async ({ browser, context, page }) => {
+    const drawArrow = new DrawArrow(browser, context);
+    await drawArrow.initModPage(page, true, { customMeetingId: 'draw_line_meeting', customParameter: hidePresentationToast });
+    await drawArrow.initModPage2(true, context, { customParameter: hidePresentationToast });
+    await drawArrow.test();
+  });
 });

bigbluebutton-tests/playwright/whiteboard/zoom.js

@@ -0,0 +1,49 @@
+const { expect } = require('@playwright/test');
+const e = require('../core/elements');
+const { ELEMENT_WAIT_LONGER_TIME } = require('../core/constants');
+const { MultiUsers } = require('../user/multiusers');
+const { constructClipObj } = require('../core/util');
+
+const defaultZoomLevel = '100%';
+const zoomedInZoomLevel = '125%';
+const maxZoomLevel = '400%';
+
+class Zoom extends MultiUsers {
+  constructor(browser, context) {
+    super(browser, context);
+  }
+
+  async test() {
+    await this.modPage.waitForSelector(e.resetZoomButton, ELEMENT_WAIT_LONGER_TIME);
+
+    const wbBox = await this.modPage.getElementBoundingBox(e.whiteboard);
+    const clipObj = constructClipObj(wbBox);
+    const screenshotOptions = {
+      maxDiffPixels: 1000,
+      clip: clipObj,
+    };
+
+    // 100%
+    const zoomOutButtonLocator = await this.modPage.getLocator(e.zoomOutButton);
+    await expect(zoomOutButtonLocator).toBeDisabled();
+    const resetZoomButtonLocator = await this.modPage.getLocator(e.resetZoomButton);
+    await expect(resetZoomButtonLocator).toContainText(defaultZoomLevel);
+
+    // 125%
+    await this.modPage.waitAndClick(e.zoomInButton);
+    await expect(zoomOutButtonLocator).toBeEnabled();
+    await expect(resetZoomButtonLocator).toContainText(zoomedInZoomLevel);
+    await expect(this.modPage.page).toHaveScreenshot('moderator1-zoom125.png', screenshotOptions);
+    await expect(this.modPage2.page).toHaveScreenshot('moderator2-zoom125.png', screenshotOptions);
+
+    // max zoom
+    for(let i = 125; i < 400; i += 25) {
+      await this.modPage.waitAndClick(e.zoomInButton);
+    }
+    await expect(resetZoomButtonLocator).toContainText(maxZoomLevel);
+    await expect(this.modPage.page).toHaveScreenshot('moderator1-zoom400.png', screenshotOptions);
+    await expect(this.modPage2.page).toHaveScreenshot('moderator2-zoom400.png', screenshotOptions);
+  }
+}
+
+exports.Zoom = Zoom;