feat: add getElementPixelColor function

run/test/specs/check_avatar_color.spec.ts

@@ -3,7 +3,7 @@ import { USERNAME } from '../../types/testing';
 import { newUser } from './utils/create_account';
 import { newContact } from './utils/create_contact';
 import { SupportedPlatformsType, closeApp, openAppTwoDevices } from './utils/open_app';
-import { isSameColor, parseDataImage } from './utils/check_colour';
+import { isSameColor } from './utils/check_colour';
 import { UserSettings } from './locators/settings';
 import { ConversationItem } from './locators/home';
 import { ConversationAvatar, ConversationSettings } from './locators/conversation';
@@ -19,22 +19,18 @@ async function avatarColor(platform: SupportedPlatformsType) {
   await newContact(platform, device1, userA, device2, userB);
   await Promise.all([device1.navigateBack(), device2.navigateBack()]);
   // Get Alice's avatar color on device 1 (Home Screen avatar) and turn it into a hex value
-  const device1Avatar = await device1.waitForTextElementToBePresent(new UserSettings(device1));
-  const device1Base64 = await device1.getElementScreenshot(device1Avatar.ELEMENT);
-  const device1PixelColor = await parseDataImage(device1Base64);
+  const device1PixelColor = await device1.getElementPixelColor(new UserSettings(device1));
   // Get Alice's avatar color on device 2 and turn it into a hex value
   await device2.clickOnElementAll(new ConversationItem(device2));
-  let device2Avatar;
-  // The conversation screen looks slightly different per platform:
-  // On iOS the avatar doubles as the Conversation Settings button
-  // On Android, the avatar is a separate, non-interactable element (and the settings has the 3-dot icon)
+  let device2PixelColor;
+  // The conversation screen looks slightly different per platform so we're grabbing the avatar from different locators
+  // On iOS the avatar doubles as the Conversation Settings button on the right
+  // On Android, the avatar is a separate, non-interactable element on the left (and the settings has the 3-dot icon)
   if (platform === 'ios') {
-    device2Avatar = await device2.waitForTextElementToBePresent(new ConversationSettings(device2));
+    device2PixelColor = await device2.getElementPixelColor(new ConversationSettings(device2));
   } else {
-    device2Avatar = await device2.waitForTextElementToBePresent(new ConversationAvatar(device2));
+    device2PixelColor = await device2.getElementPixelColor(new ConversationAvatar(device2));
   }
-  const device2Base64 = await device2.getElementScreenshot(device2Avatar.ELEMENT);
-  const device2PixelColor = await parseDataImage(device2Base64);
   // Color matching devices 1 and 2
   const colorMatch = isSameColor(device1PixelColor, device2PixelColor);
   if (!colorMatch) {

run/test/specs/linked_device_avatar_color.spec.ts

@@ -2,7 +2,7 @@ import { bothPlatformsIt } from '../../types/sessionIt';
 import { USERNAME } from '../../types/testing';
 import { linkedDevice } from './utils/link_device';
 import { SupportedPlatformsType, closeApp, openAppTwoDevices } from './utils/open_app';
-import { isSameColor, parseDataImage } from './utils/check_colour';
+import { isSameColor } from './utils/check_colour';
 import { UserSettings } from './locators/settings';
 
 bothPlatformsIt('Avatar color linked device', 'medium', avatarColorLinkedDevice);
@@ -11,13 +11,9 @@ async function avatarColorLinkedDevice(platform: SupportedPlatformsType) {
   const { device1, device2 } = await openAppTwoDevices(platform);
   const userA = await linkedDevice(device1, device2, USERNAME.ALICE);
   // Get Alice's avatar color on device 1 (Home Screen avatar) and turn it into a hex value
-  const device1Avatar = await device1.waitForTextElementToBePresent(new UserSettings(device1));
-  const device1Base64 = await device1.getElementScreenshot(device1Avatar.ELEMENT);
-  const device1PixelColor = await parseDataImage(device1Base64);
+  const device1PixelColor = await device1.getElementPixelColor(new UserSettings(device1));
   // Get Alice's avatar color on the linked device (Home Screen avatar) and turn it into a hex value
-  const device2Avatar = await device2.waitForTextElementToBePresent(new UserSettings(device2));
-  const device2Base64 = await device2.getElementScreenshot(device2Avatar.ELEMENT);
-  const device2PixelColor = await parseDataImage(device2Base64);
+  const device2PixelColor = await device2.getElementPixelColor(new UserSettings(device2));
   // Color matching devices 1 and 2
   const colorMatch = isSameColor(device1PixelColor, device2PixelColor);
   if (!colorMatch) {

run/types/DeviceWrapper.ts

@@ -30,6 +30,7 @@ import {
   User,
   XPath,
 } from './testing';
+import { parseDataImage } from '../test/specs/utils/check_colour';
 
 export type Coordinates = {
   x: number;
@@ -1787,6 +1788,20 @@ export class DeviceWrapper {
     }
   }
 
+  public async getElementPixelColor(
+    args: {
+      text?: string;
+      maxWait?: number;
+    } & (StrategyExtractionObj | LocatorsInterface)
+  ): Promise<string> {
+    // Wait for the element to be present
+    const element = await this.waitForTextElementToBePresent(args);
+    // Take a screenshot and return a hex color value
+    const base64image = await this.getElementScreenshot(element.ELEMENT);
+    const pixelColor = await parseDataImage(base64image);
+    return pixelColor;
+  }
+
   /* === all the utilities function ===  */
   public isIOS(): boolean {
     return isDeviceIOS(this.device);