Merge pull request #16165 from MaximKhlobystov/new-whiteboard-tests

test: new whiteboard tests (pencil, text and sticky note)

bigbluebutton-tests/playwright/core/elements.js

@@ -387,7 +387,9 @@ 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.wbPencilShape = 'button[id="TD-PrimaryTools-Pencil"]';
+exports.wbStickyNoteShape = 'button[id="TD-PrimaryTools-Pencil2"]';
+exports.wbTextShape = 'button[id="TD-PrimaryTools-Text"]';
 exports.wbTypedText = 'div[data-shape="text"]';
 exports.wbDrawnRectangle = 'div[data-shape="rectangle"]';
 exports.wbDrawnLine = 'div[data-shape="draw"]';

bigbluebutton-tests/playwright/whiteboard/drawPencil.js

@@ -0,0 +1,45 @@
+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 DrawPencil 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.wbPencilShape);
+
+    const wb = await this.modPage.page.$(e.whiteboard);
+    const wbBox = await wb.boundingBox();
+    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();
+    await this.modPage.page.mouse.move(wbBox.x + 0.4 * wbBox.width, wbBox.y + 0.4 * wbBox.height, moveOptions);
+    await this.modPage.page.mouse.move(wbBox.x + 0.6 * wbBox.width, wbBox.y + 0.2 * wbBox.height, moveOptions);
+    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', {
+      maxDiffPixels: 1000,
+      clip: clipObj,
+    });
+
+    await expect(this.modPage2.page).toHaveScreenshot('moderator2-pencil.png', {
+      maxDiffPixels: 1000,
+      clip: clipObj,
+    });
+  }
+}
+
+exports.DrawPencil = DrawPencil;

bigbluebutton-tests/playwright/whiteboard/drawStickyNote.js

@@ -0,0 +1,47 @@
+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 DrawStickyNote 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.wbStickyNoteShape);
+
+    const wb = await this.modPage.page.$(e.whiteboard);
+    const wbBox = await wb.boundingBox();
+    await this.modPage.page.mouse.click(wbBox.x + 0.3 * wbBox.width, wbBox.y + 0.3 * wbBox.height);
+
+    await this.modPage.press('A');
+    await this.modPage.press('A');
+    await this.modPage.press('Backspace');
+    await this.modPage.press('B');
+    await this.modPage.page.mouse.click(wbBox.x + 0.6 * wbBox.width, wbBox.y + 0.6 * wbBox.height);
+
+    await this.modPage.hasText(e.wbTypedText, 'AB');
+    await this.modPage2.hasText(e.wbTypedText, '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,
+    });
+  }
+}
+
+exports.DrawStickyNote = DrawStickyNote;

bigbluebutton-tests/playwright/whiteboard/drawText.js

@@ -0,0 +1,44 @@
+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 DrawText 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.wbTextShape);
+
+    const wb = await this.modPage.page.$(e.whiteboard);
+    const wbBox = await wb.boundingBox();
+    await this.modPage.page.mouse.click(wbBox.x + 0.3 * wbBox.width, wbBox.y + 0.3 * wbBox.height);
+
+    await this.modPage.press('A');
+    await this.modPage.press('A');
+    await this.modPage.press('Backspace');
+    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,
+    });
+  }
+}
+
+exports.DrawText = DrawText;

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

@@ -4,6 +4,9 @@ const { DrawRectangle } = require('./drawRectangle');
 const { DrawEllipse } = require('./drawEllipse');
 const { DrawTriangle } = require('./drawTriangle');
 const { DrawLine } = require('./drawLine');
+const { DrawPencil } = require('./drawPencil');
+const { DrawText } = require('./drawText');
+const { DrawStickyNote } = require('./drawStickyNote');
 const { MultiUsers } = require('../user/multiusers');
 const { CUSTOM_MEETING_ID } = require('../core/constants');
 const { encodeCustomParams } = require('../customparameters/util');
@@ -55,4 +58,25 @@ test.describe.parallel('Drawing - visual regression', () => {
     await drawLine.initModPage2(true, context, { customParameter: encodeCustomParams(`userdata-bbb_custom_style=.presentationUploaderToast{display: none;}.currentPresentationToast{display:none;}`) });
     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.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.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.test();
+  });
 });