ignoreRegionAppiumElements does not work on iOS

[hackily]

The problem

getRegionsByElements() attempts to get the class attribute off of the appium element in order to log what selector was used.

percy-appium-js/percy/providers/genericProvider.js

Lines 245 to 258 in a976b52

	async getRegionsByElements(elementsArray, elements) {
	for (let index = 0; index < elements.length; index++) {
	try {
	const type = await elements[index].getAttribute('class');
	const selector = `element: ${index} ${type}`;
	const ignoredRegion = await this.getRegionObject(selector, elements[index]);
	elementsArray.push(ignoredRegion);
	} catch (e) {
	log.info(`Correct Mobile Element not passed at index ${index}.`);
	log.debug(e.toString());
	}
	}
	}

However, XCUITest for iOS simply does not have a class property, according to the docs.
https://appium.github.io/appium-xcuitest-driver/7.28/reference/element-attributes/

Environment

• Node version: 20.8.0
• @percy/cli version: 1.30.7
• Version of Percy SDK you’re using: Using the browserstack sdk 9.8, appium version 2.12.1
• If needed, a build or snapshot ID: https://app-automate.browserstack.com/dashboard/v2/builds/79c0c9934c58bf0bf2a4b75d5ed329ad9a4cb63c/sessions/562fb1465061a4d2333b9ae70b66cadfec9ab41a
• OS version: Mac OS Sequioa 15.1
• Type of shell command-line [interface]: zsh

Details

I want to use the same property on iOS and Android to determine ignore regions.
My options are to either use ignoreRegionAppiumElements, or use ignoreRegionAccessibilityIds, since ignoreRegionXpaths will require different Xpaths across iOS and android, and customIgnoreRegions will only be consistent across a single device.

Incidentally, ignoreRegionAccessibilityIds isn't suitable either as a cross platform ignore, because testID on react native doesn't map to android's accessibility ID, so the accessibility id for a given element will be different across ios and android.

The simplest solution is to fix the implementation of ignoreRegionAppiumElements since the percy library can directly extract the x, y, width and height from the appium element

Debug logs

If you are reporting a bug, always include logs! Give the "Debugging SDKs"
document a quick read for how to gather logs

562fb1465061a4d2333b9ae70b66cadfec9ab41a-logs-v2.txt.log

Please do not trim or edit these logs, often times there are hints in the full
logs that help debug what is going on.

Code to reproduce issue

Given the nature of testing/environment bugs, it’s best to try and isolate the
issue in a reproducible repo. This will make it much easier for us to diagnose
and fix.

import percyScreenshot from "@percy/appium-app";
import { driver, $ } from "@wdio/globals";

export const element = async (value, { strategy = "id", timeout } = {}) => {
  const selector = strategy === "a11y" ? `~${value}` : `${strategy}:${value}`;
  const element = await $(selector);
  await element.waitForExist({ timeout });
  return element;
};

describe("Sign in", () => {
  it("signs in", async () => {
    const appId = driver.isIOS
      ? "co.firstopinion.customer-appstore"
      : "com.curaihealth";
    try {
      // Sometimes expo module fails to be found causing an app crash on android on first load - terminate app to make sure it's closed
      await driver.terminateApp(appId);
    } catch (e) {
      console.warn(e);
    }
    // Ensure app is open
    await driver.activateApp(appId);
    await percyScreenshot("Splash screen", {
      ignoreRegionAppiumElements: [await element("environment")], // works on android, not on iOS
    });
  });
});

You can run this against our app
BROWSERSTACK_IPA_URI=bs://40fbd0fde84e0c5c8e433d276646a28c4ea8e58e

But you should also be able to reproduce this with any iOS app using wdio, and try to pass an element into the ignoreRegionAppiumElements array.