test: update layout test snapshots (bigbluebutton#21764)

bigbluebutton-tests/playwright/layouts/layouts.js

@@ -11,7 +11,7 @@ class Layouts extends MultiUsers {
     await this.modPage.closeAllToastNotifications();
     await this.modPage.wasRemoved(e.toastContainer);
 
-    await checkScreenshots(this, 'should be the layout focus on presentation', e.webcamContainer, 'focus-on-presentation');
+    await checkScreenshots(this, 'should be the layout focus on presentation', [e.webcamContainer, e.webcamMirroredVideoContainer], 'focus-on-presentation');
   }
 
   async gridLayout() {
@@ -22,7 +22,7 @@ class Layouts extends MultiUsers {
     await this.modPage.closeAllToastNotifications();
     await this.modPage.wasRemoved(e.toastContainer);
 
-    await checkScreenshots(this, 'should be the grid layout', e.webcamContainer, 'grid-layout');
+    await checkScreenshots(this, 'should be the grid layout', [e.webcamContainer, e.webcamMirroredVideoContainer], 'grid-layout');
   }
 
   async smartLayout() {
@@ -33,12 +33,12 @@ class Layouts extends MultiUsers {
     await this.modPage.closeAllToastNotifications();
     await this.modPage.wasRemoved(e.toastContainer);
 
-    await checkScreenshots(this, 'should the cameras be above the presentation', e.webcamContainer, 'smart-layout', 1);
+    await checkScreenshots(this, 'should the cameras be above the presentation', [e.webcamContainer, e.webcamMirroredVideoContainer], 'smart-layout', 1);
 
     await this.modPage.waitAndClick(e.userListToggleBtn);
     await this.modPage.wasRemoved(e.chatButton, '');
 
-    await checkScreenshots(this, 'should the cameras be on the side of presentation', e.webcamContainer, 'smart-layout', 2);
+    await checkScreenshots(this, 'should the cameras be on the side of presentation', [e.webcamContainer, e.webcamMirroredVideoContainer], 'smart-layout', 2);
     await reopenChatSidebar(this.modPage);
   }
 

bigbluebutton-tests/playwright/layouts/util.js

@@ -12,14 +12,18 @@ async function reopenChatSidebar(page) {
 }
 
 async function checkScreenshots(layoutTest, description, maskedSelectors, screenshotName, screenshotNumber) {
-  const modPageWebcamsLocator = layoutTest.modPage.getLocator(maskedSelectors);
+  const getMaskedLocators = (page) => Array.isArray(maskedSelectors)
+  ? maskedSelectors.map(selector => page.getLocator(selector))
+  : [page.getLocator(maskedSelectors)];
+
+  const modPageMaskedSelectors = getMaskedLocators(layoutTest.modPage);
   await expect(layoutTest.modPage.page, description).toHaveScreenshot(`moderator-${screenshotName}${screenshotNumber ? '-' + screenshotNumber : ''}.png`, {
-    mask: [modPageWebcamsLocator],
+    mask: modPageMaskedSelectors,
   });
 
-  const userWebcamsLocator = layoutTest.userPage.getLocator(maskedSelectors);
+  const userPageMaskedSelectors = getMaskedLocators(layoutTest.userPage);
   await expect(layoutTest.userPage.page, description).toHaveScreenshot(`user-${screenshotName}${screenshotNumber ? '-' + screenshotNumber : ''}.png`, {
-    mask: [userWebcamsLocator],
+    mask: userPageMaskedSelectors,
   });
 }