New whiteboard tests

bigbluebutton-tests/playwright/core/constants.js

@@ -19,3 +19,5 @@ exports.MAX_PARTICIPANTS_TO_JOIN = 4;
 // MEDIA CONNECTION TIMEOUTS
 exports.VIDEO_LOADING_WAIT_TIME = 15000;
 exports.UPLOAD_PDF_WAIT_TIME = CI ? 40000 : 20000;
+
+exports.CUSTOM_MEETING_ID = 'custom-meeting';

bigbluebutton-tests/playwright/core/elements.js

@@ -293,6 +293,9 @@ exports.wbLayer = 'div[data-testid="layer"]';
 exports.wbToolbar = 'div[id="TD-PrimaryTools"]';
 exports.wbShapesButton = 'button[id="TD-PrimaryTools-Shapes"]';
 exports.wbRectangleShape = 'span[id="TD-PrimaryTools-Shapes-rectangle"]';
+exports.wbEllipseShape = 'span[id="TD-PrimaryTools-Shapes-ellipse"]';
+exports.wbTriangleShape = 'span[id="TD-PrimaryTools-Shapes-triangle"]';
+exports.wbLineShape = 'span[id="TD-PrimaryTools-Shapes-line"]';
 exports.wbPencilShape = 'span[id="TD-PrimaryTools-Pencil"]';
 exports.wbTypedText = 'div[data-shape="text"]';
 exports.wbDrawnRectangle = 'div[data-shape="rectangle"]';
@@ -310,4 +313,4 @@ exports.exportPlainButton = 'span[id="exportplain"]';
 
 // About modal
 exports.showAboutModalButton = 'li[data-test="aboutModal"]';
-exports.aboutModal = 'div[data-test="aboutModalTitleLabel"]';
+exports.aboutModal = 'div[data-test="aboutModalTitleLabel"]';

bigbluebutton-tests/playwright/core/helpers.js

@@ -12,8 +12,8 @@ function getRandomInt(min, max) {
   return Math.floor(Math.random() * (max - min)) + min;
 }
 
-async function createMeeting(params, customParameter) {
-  const meetingID = `random-${getRandomInt(1000000, 10000000).toString()}`;
+async function createMeeting(params, customParameter, customMeetingId) {
+  const meetingID = (customMeetingId) ? customMeetingId : `random-${getRandomInt(1000000, 10000000).toString()}`;
   const mp = params.moderatorPW;
   const ap = params.attendeePW;
   const query = customParameter !== undefined ? `name=${meetingID}&meetingID=${meetingID}&attendeePW=${ap}&moderatorPW=${mp}`

bigbluebutton-tests/playwright/core/page.js

@@ -25,13 +25,13 @@ class Page {
   }
 
   async init(isModerator, shouldCloseAudioModal, initOptions) {
-    const { fullName, meetingId, customParameter } = initOptions || {};
+    const { fullName, meetingId, customParameter, customMeetingId } = initOptions || {};
 
     if (!isModerator) this.initParameters.moderatorPW = '';
     if (fullName) this.initParameters.fullName = fullName;
     this.username = this.initParameters.fullName;
 
-    this.meetingId = (meetingId) ? meetingId : await helpers.createMeeting(parameters, customParameter);
+    this.meetingId = (meetingId) ? meetingId : await helpers.createMeeting(parameters, customParameter, customMeetingId);
     const joinUrl = helpers.getJoinURL(this.meetingId, this.initParameters, isModerator, customParameter);
     const response = await this.page.goto(joinUrl);
     await expect(response.ok()).toBeTruthy();

bigbluebutton-tests/playwright/whiteboard/drawEllipse.js

@@ -0,0 +1,31 @@
+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');
+
+class DrawEllipse extends MultiUsers {
+  constructor(browser, context) {
+    super(browser, context);
+  }
+
+  async test() {
+    await this.modPage.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
+    await this.modPage.waitAndClick(e.wbShapesButton);
+    await this.modPage.waitAndClick(e.wbEllipseShape);
+
+    const wb = await this.modPage.page.$(e.whiteboard);
+    const wbBox = await wb.boundingBox();
+    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-ellipse.png');
+
+    await this.modPage2.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
+    await expect(this.modPage2.page).toHaveScreenshot('moderator2-ellipse.png');
+  }
+}
+
+exports.DrawEllipse = DrawEllipse;

bigbluebutton-tests/playwright/whiteboard/drawLine.js

@@ -0,0 +1,31 @@
+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');
+
+class DrawLine extends MultiUsers {
+  constructor(browser, context) {
+    super(browser, context);
+  }
+
+  async test() {
+    await this.modPage.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
+    await this.modPage.waitAndClick(e.wbShapesButton);
+    await this.modPage.waitAndClick(e.wbLineShape);
+
+    const wb = await this.modPage.page.$(e.whiteboard);
+    const wbBox = await wb.boundingBox();
+    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-line.png');
+
+    await this.modPage2.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
+    await expect(this.modPage2.page).toHaveScreenshot('moderator2-line.png');
+  }
+}
+
+exports.DrawLine = DrawLine;

bigbluebutton-tests/playwright/whiteboard/drawRectangle.js

@@ -0,0 +1,32 @@
+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');
+
+class DrawRectangle extends MultiUsers {
+  constructor(browser, context) {
+    super(browser, context);
+  }
+
+  async test() {
+    await this.modPage.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
+    await this.modPage.waitAndClick(e.wbShapesButton);
+    await this.modPage.waitAndClick(e.wbRectangleShape);
+
+    const wb = await this.modPage.page.$(e.whiteboard);
+    const wbBox = await wb.boundingBox();
+    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.waitForSelector(e.wbDrawnRectangle);
+    await expect(this.modPage.page).toHaveScreenshot('moderator1-rectangle.png');
+
+    await this.modPage2.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
+    await expect(this.modPage2.page).toHaveScreenshot('moderator2-rectangle.png');
+  }
+}
+
+exports.DrawRectangle = DrawRectangle;

bigbluebutton-tests/playwright/whiteboard/drawTriangle.js

@@ -0,0 +1,31 @@
+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');
+
+class DrawTriangle extends MultiUsers {
+  constructor(browser, context) {
+    super(browser, context);
+  }
+
+  async test() {
+    await this.modPage.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
+    await this.modPage.waitAndClick(e.wbShapesButton);
+    await this.modPage.waitAndClick(e.wbTriangleShape);
+
+    const wb = await this.modPage.page.$(e.whiteboard);
+    const wbBox = await wb.boundingBox();
+    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-triangle.png');
+
+    await this.modPage2.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
+    await expect(this.modPage2.page).toHaveScreenshot('moderator2-triangle.png');
+  }
+}
+
+exports.DrawTriangle = DrawTriangle;

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

@@ -1,6 +1,11 @@
 const { test } = require('@playwright/test');
 const { Draw } = require('./draw');
+const { DrawRectangle } = require('./drawRectangle');
+const { DrawEllipse } = require('./drawEllipse');
+const { DrawTriangle } = require('./drawTriangle');
+const { DrawLine } = require('./drawLine');
 const { MultiUsers } = require('../user/multiusers');
+const { CUSTOM_MEETING_ID } = require('../core/constants');
 
 test.describe.parallel('Whiteboard @ci', () => {
   test('Draw rectangle', async ({ browser, page }) => {
@@ -15,3 +20,38 @@ test.describe.parallel('Whiteboard @ci', () => {
     await multiusers.whiteboardAccess();
   });
 });
+
+test.describe.parallel('Drawing - visual regression', () => {
+  test.beforeEach(({ browserName }) => {
+    test.skip(browserName !== 'chromium',
+      'Drawing visual regression tests are enabled for Chromium only');
+  });
+
+  test('Draw rectangle', async ({ browser, context, page }) => {
+    const drawRectangle = new DrawRectangle(browser, context);
+    await drawRectangle.initModPage(page, true, { customMeetingId : CUSTOM_MEETING_ID });
+    await drawRectangle.initModPage2();
+    await drawRectangle.test();
+  });
+
+  test('Draw ellipse', async ({ browser, context, page }) => {
+    const drawEllipse = new DrawEllipse(browser, context);
+    await drawEllipse.initModPage(page, true, { customMeetingId : CUSTOM_MEETING_ID });
+    await drawEllipse.initModPage2();
+    await drawEllipse.test();
+  });
+
+  test('Draw triangle', async ({ browser, context, page }) => {
+    const drawTriangle = new DrawTriangle(browser, context);
+    await drawTriangle.initModPage(page, true, { customMeetingId : CUSTOM_MEETING_ID });
+    await drawTriangle.initModPage2();
+    await drawTriangle.test();
+  });
+
+  test('Draw line', async ({ browser, context, page }) => {
+    const drawLine= new DrawLine(browser, context);
+    await drawLine.initModPage(page, true, { customMeetingId : CUSTOM_MEETING_ID });
+    await drawLine.initModPage2();
+    await drawLine.test();
+  });
+});