React Native UI element access via testID

jonesdar 2016-01-08 14:25:48 UTC #1

I'm developing some iOS/Android apps using React Native.

React Native Views (https://facebook.github.io/react-native/docs/view.html) can have a testID value to allow them to be found when doing automated testing.

Using elementByName() I can find views by the testID values in Appium on iOS but not on Android - from digging around it looks like React Native puts the testID value into the the Android View's tag (see https://github.com/facebook/react-native/blob/a99c5160eeeedec0d08afca1a7cda235418765f4/ReactAndroid/src/androidTest/java/com/facebook/react/testing/ReactTestHelper.java)

Is there any way to get at that using Appium? If not would it be difficult to add?

Thanks
Darren

bootstrap 2016-01-10 17:15:01 UTC #2

appium supports finding by content description.

React test ID is currently propagated into view content description.

github.com

facebook/react-native/blob/a99c5160eeeedec0d08afca1a7cda235418765f4/ReactAndroid/src/androidTest/java/com/facebook/react/testing/ReactTestHelper.java#L93


  ViewGroup appWrapperView = rootView;
  View view = appWrapperView.getChildAt(0);
  for (int i = 0; i < path.length; i++) {
    view = ((ViewGroup) view).getChildAt(path[i]);
  }
  return (T) view;
}


/**
 * Gets the view with a given react test ID in the UI hierarchy. React test ID is currently
 * propagated into view content description.
 */
public static View getViewWithReactTestId(View rootView, String testId) {
  return findChild(rootView, hasTagValue(testId));
}


public static String getTestId(View view) {
  return view.getTag() instanceof String ? (String) view.getTag() : null;
}


private static View findChild(View root, Predicate<View> predicate) {

See find by accessibility id.

driver.findElementByAccessibilityId("play-button");
http://sauceio.com/index.php/2015/06/appium-sauce-labs-bootcamp-chapter-1-language-bindings/

jonesdar 2016-01-11 10:51:07 UTC #3

Finding by accessibility id doesn't work for React Native View testID - it works for accessibilityLabel but that's a user-facing string (e.g. read out by TalkBack) so I'd prefer not to put test ids in there.

So I don't think that comment is correct - in the methods themselves you'll see that Android View.getTag() and setTag() are used so unless that propagation is done somewhere else the comment is definitely wrong.
Also I'm not sure if it's the correct thing to do anyway - if the tag value gets propagated via View.setContentDescription() then we're again in the territory of test ids being exposed to users.

bootstrap 2016-01-11 15:50:15 UTC #4

Content descriptions on Android are always user facing. You might want to ask the react team how you'd find a testID with uiautomator, then you could do the same with appium.

fangmobile 2016-01-14 08:22:47 UTC #5

React Native put testID into the tag of view, and accessibilityLabel into content description:

github.com

facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java#L72~L80




@ReactProp(name = PROP_OPACITY, defaultFloat = 1.f)
public void setOpacity(T view, float opacity) {
  view.setAlpha(opacity);
}


@ReactProp(name = PROP_ELEVATION)
public void setElevation(T view, float elevation) {
  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    view.setElevation(PixelUtil.toPixelFromDIP(elevation));
  }
  // Do nothing on API < 21
}


@ReactProp(name = PROP_RENDER_TO_HARDWARE_TEXTURE)
public void setRenderToHardwareTexture(T view, boolean useHWTexture) {
  view.setLayerType(useHWTexture ? View.LAYER_TYPE_HARDWARE : View.LAYER_TYPE_NONE, null);
}


@ReactProp(name = PROP_TEST_ID)
public void setTestId(T view, String testId) {

I don't think Appium can get info from tag, am I right?

jonesdar 2016-01-14 10:27:26 UTC #6

I guess the React Native team used the tag because it's one of the few non user-facing places in View to store custom data.
I don't think uiautomator can find by tag so presumably their automated tests use something that can (e.g. Calabash).

Any thoughts for workarounds in Appium? I could add test ids via accessibilityLabel for testing and then remove them for production but that's cumbersome and also kind of goes against the Appium ethos.

bootstrap 2016-01-14 14:39:00 UTC #7

Appium is in the process of upgrading to uiautomator v2 which can find by tags because we have the full instrumentation API available. It'll probably take a very long time to be ready though. In uiautomator v1 (what appium currently uses), this isn't possible.

The only work around I know of is exactly what you mentioned, strip the automaton only content descriptions out of production builds.

bootstrap 2016-01-14 14:57:19 UTC #8

Oh. I thought of a good work around. Set the resource id on the view instead since uiautomator can locate that in API >= 18.

http://developer.android.com/reference/android/view/View.html#setId(int)
http://developer.android.com/reference/android/view/View.html#attr_android:id

jonesdar 2016-01-14 15:29:35 UTC #9

Would that need modifications to React Native? I don't think there's currently a way to specify the resource id of the Android View that backs a React Native View so it might need a new property (can't use the testID because that's a string and Android View.setId() takes an int).

bootstrap 2016-01-14 15:32:54 UTC #10

Yes, you'd need the setId method to be exposed. Also you'd need a resource reference (what the int refers to). I don't think arbitrary ints would work well.

Yura 2016-01-14 17:24:45 UTC #11

One workaround you could do is to set accessibilityLabel to a conditional value depending if you are building for debug or production (or just have some global flag to indicate that). While not ideal, it will minimize code changes and will allow you to access elements for testing.

However, I would like to ask you a related question... I was not able to set accessibilityLabel which could map to content description for Inputs and Buttons (TouchableHighlight / TouchableOpacity elements). I could see content-desc field in UI Automator for other elements but not for anything actionable. Have you been able to see / access those elements in your test??

fangmobile 2016-01-22 19:14:57 UTC #12

It is a bug in react native.
In their code they left out accessibilityLabel

github.com

facebook/react-native/blob/25c3dd140f4bd82991797c9e9cc95674dfc9a460/Libraries/Components/Touchable/TouchableHighlight.js#L214~L236


  if (this.refs[UNDERLAY_REF]) {
    this.refs[CHILD_REF].setNativeProps(INACTIVE_CHILD_PROPS);
    this.refs[UNDERLAY_REF].setNativeProps({
      ...INACTIVE_UNDERLAY_PROPS,
      style: this.state.underlayStyle,
    });
    this.props.onHideUnderlay && this.props.onHideUnderlay();
  }
},


render: function() {
  return (
    <View
      accessible={true}
      accessibilityComponentType={this.props.accessibilityComponentType}
      accessibilityTraits={this.props.accessibilityTraits}
      ref={UNDERLAY_REF}
      style={this.state.underlayStyle}
      onLayout={this.props.onLayout}
      onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}
      onResponderTerminationRequest={this.touchableHandleResponderTerminationRequest}

I submit a PR to add it
https://github.com/facebook/react-native/pull/5346

In the mean while my question for Appium team. @bootstrap
There is no accessibilityIdentifier equivalent on Android. What is the best strategy to set some id-type string to locate elements without messing with content description?
release/debug build is an option but not ideal.

bootstrap 2016-01-22 19:38:58 UTC #13

The options on Android are: resource ids, content descriptions, and view tags. Appium supports the first two.

fangmobile 2016-07-18 18:09:58 UTC #15

any update on viewtag support?
The PR for Reactive Native Touchables is merged BTW so at least that part is working.

bootstrap 2016-07-18 19:14:20 UTC #16

I recommend opening an issue on the appium github tracker. I don't work on appium anymore so it'll be up to the other devs.

React Native is pretty cool so it seems like something appium should support.

jsdevel 2016-09-18 07:59:37 UTC #17

Hey all, I have a PR against react-native to add proper support for resource-id. Check it out and up-vote please: https://github.com/facebook/react-native/pull/9942

Once that's merged in testID will add resource-id so long as the Id is defined in res/values/ids.xml.

bootstrap 2016-12-14 02:56:41 UTC #18

FYI there has been some activity on this:

The appium issue is:

Ajinkya 2017-08-14 10:29:29 UTC #19

How to click on ReactNative component in which resource-id is not present & clickable= ‘False’

bootstrap 2017-08-22 19:52:24 UTC #20

https://github.com/wix/detox has react-native support, may be worth looking at.