We have started developing an iOS/Android app using React Native. We have automated a lot of our functionality so far using Appium, but have run into a problem with being able to set or select values in a picker (date or choice picker).
I am trying to find if we need to try to fix Appium or look into providing a solution in React Native. I know native iOS/Android apps have solved this issue in the past couple of years, so hoping someone might have an idea on how to solve it for ReactNative.
An example of what we tried to do with Appium (based on what we did with our old iOS Application).
To pick "Colorado" from a picker, we would do the following:
driver.getElementById("IdOfElementOnPage").sendKeys("Colorado");
The problem is that this does not work. Even though it can find the field by id, it cannot select the value from the picker.
Here is a screenshot from Appium of the issue. See how the picker options are just one big blob of text?
enter image description here
Related
I would like to create a box to select the date as in the attached photo.
What do you recommend to create something similar in react native with expo?
I tried using MUI's Mobile DatePicker API, but it doesn't work, errors occur.
Update:
I created this box to select the date, but when I go to press it gives me an error.
The error is the following:
https://www.npmjs.com/package/#react-native-community/datetimepicker
Works with Expo. Static version set at 3.x.x (something version 3). So you won't have the full functionality that is described on their docs, but you'll have enough.
expo install #react-native-community/datetimepicker
instead of npm to ensure you get the compatible version.
This library can be a bit difficult to work with. The main suggestion I have for you is to create a custom component on your own that looks like your design. Then wrap it with a TouchableOpacity and onPress set the DateTimePicker to show its modal. Grab the value you need from the onChange result, and pass it to your local state. Dont try anything fancy after that because as I mentioned earlier, the library is difficult to work with and really fights hard against any customization. It works well though and will certainly solve your problem.
I have tried a lot of npm packages but it seems that none of them are compatible with Expo.
I am thinking of building a range slider by myself, but as far as I know, there is no range input component in react native.
What I need is something like this :
https://www.bypeople.com/wp-content/uploads/2019/11/css-js-range-slider.png
How can I achieve this ?
I am using expo version 5.4.12.
Try this
Here is an example of making custom range slider which is compatible with expo sdk
I think you can do this using a slider package (like react-native-multi-slider) and measure the location of the marker using React Native's measure. Combining these two tools you can create an element to be positioned above the marker every time the user interact with slider.
I'm trying to run end to end tests on an Expo Web project with Playwright. I was hoping that when I added a testId prop to a React Native view it would be converted to a data-testid so I could select the element for my tests.
However, it doesn't do this so I can't figure out a good way to select the elements. So far the best thing I can come up with is to add an accessibility label to the element.
Does anyone know a better way to add test id's to react-native expo projects that'll be tested on the web?
You can do this!
I may have made a casing mistake. You add a testID prop on the react native component and then query for div['data-testid="sampleId"']
Here's a code example: https://github.com/expo/expo/blob/b655ff28d924e2274c627294778a02dbec1268db/apps/bare-expo/e2e/TestSuite-test.web.js#L68
I'm trying to inspect element on react native app
but unfortunately I could not find any element on it, I have use ui automator viewer and appium inspector.
Can anyone help me please?
I have no problem to inspect react native application with appium desktop, you can check article on Sauce Labs blog with pretty good details and iOS RN app/python example.
It's a bit tricky to uniquely identify UI elements, but still possible with setting unique accessibilityLabel for the View on RN side and search for it with AccessibilityId locator strategy in Appium.
Provide more details in case you need additional help.
Unfortunately, without having accessibilityLabel in Views of RN app, you are limited to use xpath locator and search by element text, like "//android.widget.TextView[contains(text(), 'Skip')]".
Avoid using strict #text= as it might not work for every element ,e.g. if text split in 2 lines on some device.
we have multiple React Native apps and we are using Appium web-driver to identify the elements easily by adding the accessibilityLabel so it doesn't matter what locale i'm using the app with but now we got many complains from the customer as the accessibilityLabel is being used by the iOS system to help handicapped users. For instance, Voice Over uses this and if you set some testing value to this, your handicapped users will suffer.
Also we cannot use byText as it is not optimal because of the localization, now our React Native development team ask us to provide an alternative for the accessibilityLabel , any suggestions?
For iOS in React Native you can use testID, for android as far as I know accessibilityLabel the only way.
So usually it would be something like that:
testID= {"ElementId"}
accessibilityLabel= {"ElementTextDesc"}