Testing React native with appium

Question

I have made sript test for appium with ruby :

require 'rubygems'
require 'appium_lib'
require 'selenium-webdriver'

capabilities = {
    'appium-version': '1.0',
    'platformName': 'Android',
    'platformVersion': '4.4',
    'deviceName': 'TestAppium',
    'app': '/Users/AwesomeProject/android/app/build/outputs/apk/app-debug.apk',
}

server_url = "http://0.0.0.0:4723/wd/hub"

Appium::Driver.new(caps: capabilities).start_driver
Appium.promote_appium_methods Object

find_element(:xpath, "//android.widget.LinearLayout[1]/android.widget.FrameLayout[1]/android.widget.FrameLayout[1]/android.view.ViewGroup[1]/android.widget.EditText[1]").send_keys "hello world"
back
 find_element(:xpath, "//android.widget.LinearLayout[1]/android.widget.FrameLayout[1]/android.widget.FrameLayout[1]/android.view.ViewGroup[1]/android.widget.EditText[1]").send_keys "hello world"

driver_quit

The returning result is :

{ 
   "status": 7,
   "value": "Could not find element using supplied strategy."
}

My question is :

1. why i could not find element using supplied strategy ?

2. There is no "id" attribute for TextInput React Native Component. Can i find element by id for the TextInput React Native Component ?

Answer 1

1. Could you change your code as below and try :

   mobileElement = find_element(:xpath, '//android.widget.LinearLayout[1]/android.widget.FrameLayout[1]/android.widget.FrameLayout[1]/android.view.ViewGroup[1]/android.widget.EditText[1]');
   mobileElement.send_keys "hello world";
   

2. And the other possible attributes for react native component that I've found could be used are class and css of the element. You can find these using chrome://inspect/#devices and inspecting the elements.

Note : To add to it even I have been looking for an appropriate answer to a question here(have added bounty as well) : Accessing React Elements using Appium for Automation

Answer 2

Based on this link : https://github.com/facebook/react-native/issues/7135

The workaround for this problem : use both accessible and accessibleLabel on your views

DOC on accessiblity label: https://facebook.github.io/react-native/docs/accessibility.html#accessibilitylabel-ios-android

On my react component :

<TextInput accessible={true} accessibilityLabel={Tap Me}></TextInput>

On my script Test :

mobileElement = find_Element(accessibilty_id, "Tap Me")
mobileElement.send_keys "hello world"