adding 5 tests for the whiteboard

bigbluebutton-tests/playwright/core/elements.js

@@ -444,6 +444,14 @@ 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"]';
+exports.wbDelete = 'span[id="TD-Delete"]';
+exports.wbUndo = 'button[id="TD-TopPanel-Undo"]';
+exports.wbRedo = 'button[id="TD-TopPanel-Redo"]';
+exports.wbStyles = 'button[id="TD-Styles"]';
+exports.wbColorRed = 'button[id="TD-Styles-Color-Swatch-red"]';
+exports.wbFillDrawing = 'button[id="TD-Styles-Fill"]';
+exports.wbDashDotted = 'div[id="TD-Styles-Dash-dotted"]';
+exports.wbSizeLarge = 'div[id="TD-Styles-Dash-large"]';
 
 // About modal
 exports.showAboutModalButton = 'li[data-test="aboutModal"]';

bigbluebutton-tests/playwright/whiteboard/changeStyles.js

@@ -0,0 +1,121 @@
+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 ChangeStyles extends MultiUsers {
+  constructor(browser, context) {
+    super(browser, context);
+  }
+
+  async changingColor() {
+    await this.modPage.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
+
+    const wbBox = await this.modPage.getElementBoundingBox(e.whiteboard);
+    const clipObj = constructClipObj(wbBox);
+    const screenshotOptions = {
+      maxDiffPixelRatio: 0.05,
+      clip: clipObj,
+    };
+
+    await this.modPage.waitAndClick(e.wbShapesButton);
+    await this.modPage.waitAndClick(e.wbEllipseShape);
+
+    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.wbStyles);
+    await this.modPage.waitAndClick(e.wbColorRed);
+    await this.modPage.waitAndClick(e.wbStyles);
+
+    await expect(this.modPage.page).toHaveScreenshot('moderator1-change-color.png', screenshotOptions);
+
+    await expect(this.userPage.page).toHaveScreenshot('viewer-change-color.png', screenshotOptions);
+  }
+
+  async fillDrawing() {
+    await this.modPage.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
+
+    const wbBox = await this.modPage.getElementBoundingBox(e.whiteboard);
+    const clipObj = constructClipObj(wbBox);
+    const screenshotOptions = {
+      maxDiffPixelRatio: 0.05,
+      clip: clipObj,
+    };
+
+    await this.modPage.waitAndClick(e.wbShapesButton);
+    await this.modPage.waitAndClick(e.wbEllipseShape);
+
+    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.wbStyles);
+    await this.modPage.waitAndClick(e.wbFillDrawing);
+    await this.modPage.press('Escape');
+
+    await expect(this.modPage.page).toHaveScreenshot('moderator1-fill-drawing.png', screenshotOptions);
+
+    await expect(this.userPage.page).toHaveScreenshot('viewer-fill-drawing.png', screenshotOptions);
+  }
+
+  async dashDrawing() {
+    await this.modPage.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
+
+    const wbBox = await this.modPage.getElementBoundingBox(e.whiteboard);
+    const clipObj = constructClipObj(wbBox);
+    const screenshotOptions = {
+      maxDiffPixelRatio: 0.05,
+      clip: clipObj,
+    };
+
+    await this.modPage.waitAndClick(e.wbShapesButton);
+    await this.modPage.waitAndClick(e.wbEllipseShape);
+
+    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.wbStyles);
+    await this.modPage.waitAndClick(e.wbDashDotted);
+    await this.modPage.waitAndClick(e.wbStyles);
+
+    await expect(this.modPage.page).toHaveScreenshot('moderator1-dash-drawing.png', screenshotOptions);
+
+    await expect(this.userPage.page).toHaveScreenshot('viewer-dash-drawing.png', screenshotOptions);
+  }
+
+  async sizeDrawing() {
+    await this.modPage.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
+
+    const wbBox = await this.modPage.getElementBoundingBox(e.whiteboard);
+    const clipObj = constructClipObj(wbBox);
+    const screenshotOptions = {
+      maxDiffPixelRatio: 0.05,
+      clip: clipObj,
+    };
+
+    await this.modPage.waitAndClick(e.wbShapesButton);
+    await this.modPage.waitAndClick(e.wbEllipseShape);
+
+    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.wbStyles);
+    await this.modPage.waitAndClick(e.wbSizeLarge);
+    await this.modPage.waitAndClick(e.wbStyles);
+
+    await expect(this.modPage.page).toHaveScreenshot('moderator1-size-drawing.png', screenshotOptions);
+
+    await expect(this.userPage.page).toHaveScreenshot('viewer-size-drawing.png', screenshotOptions);
+  }
+}
+
+exports.ChangeStyles = ChangeStyles;

bigbluebutton-tests/playwright/whiteboard/deleteDrawing.js

@@ -0,0 +1,38 @@
+const { expect } = require('@playwright/test');
+const Page = require('../core/page');
+const e = require('../core/elements');
+const { ELEMENT_WAIT_LONGER_TIME } = require('../core/constants');
+const { MultiUsers } = require('../user/multiusers');
+const { constructClipObj } = require('../core/util');
+
+class DeleteDrawing extends MultiUsers {
+  constructor(browser, page) {
+    super(browser, page);
+  }
+
+  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 this.modPage.waitAndClick(e.wbDelete);
+
+    await expect(this.modPage.page).toHaveScreenshot('moderator1-delete-drawing.png', screenshotOptions);
+
+    await expect(this.userPage.page).toHaveScreenshot('viewer-delete-drawing.png', screenshotOptions);
+  }
+}
+
+exports.DeleteDrawing = DeleteDrawing;

bigbluebutton-tests/playwright/whiteboard/drawEllipse.js

@@ -15,7 +15,7 @@ class DrawEllipse extends MultiUsers {
     const wbBox = await this.modPage.getElementBoundingBox(e.whiteboard);
     const clipObj = constructClipObj(wbBox);
     const screenshotOptions = {
-      maxDiffPixels: 1000,
+      maxDiffPixelRatio: 0.05,
       clip: clipObj,
     };
 

bigbluebutton-tests/playwright/whiteboard/realTimeText.js

@@ -0,0 +1,39 @@
+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 RealTimeText extends MultiUsers {
+  constructor(browser, context) {
+    super(browser, context);
+  }
+
+  async realTimeTextTyping() {
+    await this.modPage.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
+
+    const wbBox = await this.modPage.getElementBoundingBox(e.whiteboard);
+    const clipObj = constructClipObj(wbBox);
+    const screenshotOptions = {
+      maxDiffPixelRatio: 0.05,
+      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');
+    
+    await expect(this.modPage.page).toHaveScreenshot('moderator1-realtime-text.png', screenshotOptions);
+    await expect(this.userPage.page).toHaveScreenshot('viewer-realtime-text.png', screenshotOptions);
+
+    await this.modPage.press('A');
+    await this.modPage.page.mouse.click(wbBox.x + 0.6 * wbBox.width, wbBox.y + 0.6 * wbBox.height);
+
+    await expect(this.modPage.page).toHaveScreenshot('moderator1-realtime-text-2.png', screenshotOptions);
+    await expect(this.userPage.page).toHaveScreenshot('viewer-realtime-text-2.png', screenshotOptions);
+  }
+}
+
+exports.RealTimeText = RealTimeText;

bigbluebutton-tests/playwright/whiteboard/redoDraw.js

@@ -0,0 +1,39 @@
+const { expect } = require('@playwright/test');
+const Page = require('../core/page');
+const e = require('../core/elements');
+const { ELEMENT_WAIT_LONGER_TIME } = require('../core/constants');
+const { MultiUsers } = require('../user/multiusers');
+const { constructClipObj } = require('../core/util');
+
+class RedoDrawing extends MultiUsers {
+  constructor(browser, page) {
+    super(browser, page);
+  }
+
+  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 this.modPage.waitAndClick(e.wbUndo);
+    await this.modPage.waitAndClick(e.wbRedo);
+
+    await expect(this.modPage.page).toHaveScreenshot('moderator1-redo-drawing.png', screenshotOptions);
+
+    await expect(this.userPage.page).toHaveScreenshot('viewer-redo-drawing.png', screenshotOptions);
+  }
+}
+
+exports.RedoDrawing = RedoDrawing;

bigbluebutton-tests/playwright/whiteboard/undoDraw.js

@@ -0,0 +1,38 @@
+const { expect } = require('@playwright/test');
+const Page = require('../core/page');
+const e = require('../core/elements');
+const { ELEMENT_WAIT_LONGER_TIME } = require('../core/constants');
+const { MultiUsers } = require('../user/multiusers');
+const { constructClipObj } = require('../core/util');
+
+class UndoDrawing extends MultiUsers {
+  constructor(browser, page) {
+    super(browser, page);
+  }
+
+  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 this.modPage.waitAndClick(e.wbUndo);
+
+    await expect(this.modPage.page).toHaveScreenshot('moderator-undo-drawing.png', screenshotOptions);
+
+    await expect(this.userPage.page).toHaveScreenshot('viewer-undo-drawing.png', screenshotOptions);
+  }
+}
+
+exports.UndoDrawing = UndoDrawing;

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

@@ -14,6 +14,11 @@ const { DrawArrow } = require('./drawArrow');
 const { MultiUsers } = require('../user/multiusers');
 const { encodeCustomParams } = require('../customparameters/util');
 const { PARAMETER_HIDE_PRESENTATION_TOAST } = require('../core/constants');
+const { DeleteDrawing } = require('./deleteDrawing');
+const { UndoDrawing } = require('./undoDraw');
+const { RedoDrawing } = require('./redoDraw');
+const { ChangeStyles } = require('./changeStyles');
+const { RealTimeText } = require('./realTimeText');
 
 const hidePresentationToast = encodeCustomParams(PARAMETER_HIDE_PRESENTATION_TOAST);
 
@@ -113,4 +118,60 @@ test.describe.parallel('Whiteboard tools - visual regression', () => {
     await drawArrow.initModPage2(true, context, { customParameter: hidePresentationToast });
     await drawArrow.test();
   });
+
+  test('Delete drawing', async ({ browser, context, page }) => {
+    const deleteDrawing = new DeleteDrawing(browser, context);
+    await deleteDrawing.initModPage(page, true, { customMeetingId: 'draw_line_meeting', customParameter: hidePresentationToast });
+    await deleteDrawing.initUserPage(true, context, { customParameter: hidePresentationToast });
+    await deleteDrawing.test();
+  });
+
+  test('Undo drawing', async ({ browser, context, page }) => {
+    const undoDrawing = new UndoDrawing(browser, context);
+    await undoDrawing.initModPage(page, true, { customMeetingId: 'draw_line_meeting', customParameter: hidePresentationToast });
+    await undoDrawing.initUserPage(true, context, { customParameter: hidePresentationToast });
+    await undoDrawing.test();
+  });
+
+  test('Redo drawing', async ({ browser, context, page }) => {
+    const redoDrawing = new RedoDrawing(browser, context);
+    await redoDrawing.initModPage(page, true, { customMeetingId: 'draw_line_meeting', customParameter: hidePresentationToast });
+    await redoDrawing.initUserPage(true, context, { customParameter: hidePresentationToast });
+    await redoDrawing.test();
+  });
+
+  test('Change color', async ({ browser, context, page }) => {
+    const changeColor = new ChangeStyles(browser, context);
+    await changeColor.initModPage(page, true, { customMeetingId: 'draw_line_meeting', customParameter: hidePresentationToast });
+    await changeColor.initUserPage(true, context, { customParameter: hidePresentationToast });
+    await changeColor.changingColor();
+  });
+
+  test('Fill drawing', async ({ browser, context, page }) => {
+    const fillDrawing = new ChangeStyles(browser, context);
+    await fillDrawing.initModPage(page, true, { customMeetingId: 'draw_line_meeting', customParameter: hidePresentationToast });
+    await fillDrawing.initUserPage(true, context, { customParameter: hidePresentationToast });
+    await fillDrawing.fillDrawing();
+  });
+
+  test('Dash drawing', async ({ browser, context, page }) => {
+    const dashDrawing = new ChangeStyles(browser, context);
+    await dashDrawing.initModPage(page, true, { customMeetingId: 'draw_line_meeting', customParameter: hidePresentationToast });
+    await dashDrawing.initUserPage(true, context, { customParameter: hidePresentationToast });
+    await dashDrawing.dashDrawing();
+  });
+
+  test('Size drawing', async ({ browser, context, page }) => {
+    const sizeDrawing = new ChangeStyles(browser, context);
+    await sizeDrawing.initModPage(page, true, { customMeetingId: 'draw_line_meeting', customParameter: hidePresentationToast });
+    await sizeDrawing.initUserPage(true, context, { customParameter: hidePresentationToast });
+    await sizeDrawing.sizeDrawing();
+  });
+
+  test('Real time text typing', async ({ browser, context, page }) => {
+    const realTimeText = new RealTimeText(browser, context);
+    await realTimeText.initModPage(page, true, { customMeetingId: 'draw_line_meeting', customParameter: hidePresentationToast });
+    await realTimeText.initUserPage(true, context, { customParameter: hidePresentationToast });
+    await realTimeText.realTimeTextTyping();
+  });
 });