Merge pull request #16078 from MaximKhlobystov/clipping-images-whiteboard-tests

test: clip the reference images in the whiteboard drawing tests

bigbluebutton-tests/playwright/whiteboard/drawEllipse.js

@@ -21,10 +21,22 @@ class DrawEllipse extends MultiUsers {
     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', { maxDiffPixels: 2000 });
+    const clipObj = {
+      x: wbBox.x,
+      y: wbBox.y,
+      width: wbBox.width,
+      height: wbBox.height,
+    };
 
-    await this.modPage2.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
-    await expect(this.modPage2.page).toHaveScreenshot('moderator2-ellipse.png', { maxDiffPixels: 2000 });
+    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,
+    });
   }
 }
 

bigbluebutton-tests/playwright/whiteboard/drawLine.js

@@ -21,10 +21,22 @@ class DrawLine extends MultiUsers {
     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', { maxDiffPixels: 2000 });
+    const clipObj = {
+      x: wbBox.x,
+      y: wbBox.y,
+      width: wbBox.width,
+      height: wbBox.height,
+    };
 
-    await this.modPage2.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
-    await expect(this.modPage2.page).toHaveScreenshot('moderator2-line.png', { maxDiffPixels: 2000 });
+    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,
+    });
   }
 }
 

bigbluebutton-tests/playwright/whiteboard/drawRectangle.js

@@ -21,11 +21,22 @@ class DrawRectangle extends MultiUsers {
     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', { maxDiffPixels: 2000 });
+    const clipObj = {
+      x: wbBox.x,
+      y: wbBox.y,
+      width: wbBox.width,
+      height: wbBox.height,
+    };
 
-    await this.modPage2.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
-    await expect(this.modPage2.page).toHaveScreenshot('moderator2-rectangle.png', { maxDiffPixels: 2000 });
+    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,
+    });
   }
 }
 

bigbluebutton-tests/playwright/whiteboard/drawTriangle.js

@@ -21,10 +21,22 @@ class DrawTriangle extends MultiUsers {
     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', { maxDiffPixels: 2000 });
+    const clipObj = {
+      x: wbBox.x,
+      y: wbBox.y,
+      width: wbBox.width,
+      height: wbBox.height,
+    };
 
-    await this.modPage2.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
-    await expect(this.modPage2.page).toHaveScreenshot('moderator2-triangle.png', { maxDiffPixels: 2000 });
+    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,
+    });
   }
 }