fix: verifyElementScreenshot uses UUID, path.join and optional compon…

…ent states

run/test/specs/landing_page_new_account.spec.ts

@@ -11,10 +11,6 @@ async function landingPageNewAccount(platform: SupportedPlatformsType) {
   const { device } = await openAppOnPlatformSingleDevice(platform);
   await newUser(device, USERNAME.ALICE);
   // Verify that the party popper is shown on the landing page
-  await verifyElementScreenshot(
-    device,
-    new EmptyLandingPage(device),
-    `run/screenshots/${platform}/landingpage_new_account.png`
-  );
+  await verifyElementScreenshot(device, new EmptyLandingPage(device), 'new_account');
   await closeApp(device);
 }

run/test/specs/landing_page_restore_account.spec.ts

@@ -12,10 +12,6 @@ async function landingPageRestoreAccount(platform: SupportedPlatformsType) {
   const { device1, device2 } = await openAppTwoDevices(platform);
   await linkedDevice(device1, device2, USERNAME.ALICE);
   // Verify that the Session logo is shown on the landing page
-  await verifyElementScreenshot(
-    device2,
-    new EmptyLandingPage(device2),
-    `run/screenshots/${platform}/landingpage_restore_account.png`
-  );
+  await verifyElementScreenshot(device2, new EmptyLandingPage(device2), 'restore_account');
   await closeApp(device1, device2);
 }

run/test/specs/utils/verify_screenshots.ts

@@ -1,41 +1,35 @@
 import looksSame from 'looks-same';
 import * as fs from 'fs';
-import test from '@playwright/test';
 import * as path from 'path';
 import { DeviceWrapper } from '../../../types/DeviceWrapper';
-import { LocatorsInterface } from '../locators';
-import { StrategyExtractionObj } from '../../../types/testing';
-import { ScreenshotFileNames } from '../../../types/testing';
-import { SupportedPlatformsType } from './open_app';
-
-// Ensure only valid baseline screenshot paths are accepted
-type BaselineScreenshotPath =
-  `run/screenshots/${SupportedPlatformsType}/${ScreenshotFileNames}.png`;
+import { LocatorsInterfaceScreenshot } from '../locators';
+import { v4 as uuidv4 } from 'uuid';
+import { ElementStates } from '../../../types/testing';
 
 // The function takes a screenshot of an element and verifies it against a baseline screenshot
 // If no baseline is available, the element screenshot is retained so that it could be used as a new baseline
 // The baseline images were taken on a Pixel 6 and an iPhone 15 Pro Max
 export async function verifyElementScreenshot(
   device: DeviceWrapper,
-  element: {
-    text?: string;
-    maxWait?: number;
-  } & (StrategyExtractionObj | LocatorsInterface),
-  baselineScreenshotPath: BaselineScreenshotPath
+  element: LocatorsInterfaceScreenshot,
+  state?: ElementStates
 ): Promise<void> {
+  // Declaring a UUID in advance so that the diff and screenshot files are matched alphanumerically
+  const uuid = uuidv4();
   // Using Playwright's default test-results folder ensures cleanup at the beginning of each run
-  const diffsDir = 'test-results/diffs';
+  const diffsDir = path.join('test-results', 'diffs');
   fs.mkdirSync(diffsDir, { recursive: true });
   // Get the element screenshot as base64
   const elementToScreenshot = await device.waitForTextElementToBePresent(element);
   const elementScreenshotBase64: string = await device.getElementScreenshot(
     elementToScreenshot.ELEMENT
   );
   // Convert the base64 string to a Buffer and save it to disk as a png
-  const elementScreenshotPath = path.join(diffsDir, `screenshot_${test.info().title}.png`);
+  const elementScreenshotPath = path.join(diffsDir, `${uuid}_screenshot.png`);
   const screenshotBuffer = Buffer.from(elementScreenshotBase64, 'base64');
   fs.writeFileSync(elementScreenshotPath, screenshotBuffer);
   // Check if baseline screenshot exists
+  const baselineScreenshotPath = element.screenshotFileName(state);
   if (!fs.existsSync(baselineScreenshotPath)) {
     throw new Error(
       `No baseline image found at: ${baselineScreenshotPath}. A new screenshot has been saved at: ${elementScreenshotPath}`
@@ -46,7 +40,7 @@ export async function verifyElementScreenshot(
     createDiffImage: true,
   });
   if (!equal) {
-    const diffImagePath = path.join(diffsDir, `diffImage_${test.info().title}.png`);
+    const diffImagePath = path.join(diffsDir, `${uuid}_diffImage.png`);
     await diffImage.save(diffImagePath);
     throw new Error(`The images do not match. The diff has been saved to ${diffImagePath}`);
   }