As you may know I now have a new assignment where I’m testing a React Native app with Appium. Last Friday I had a little problem. I needed to automate a part of the chat interaction which was working on Android, but I struggled with iOS. There was no way to locate the send button based on the selector I had given it.
In the end I did manage to understand why this happened and also how to fix the automation issue. Before I’m going to show you this all, I’m going to give you some background information.
I’m currently automating a React Native app for which I’m using webdriver.io, as an automation framework, to interact with our iOS/Android app through Appium. I’m using the accessibility labels as a locator strategy to locate elements and I’m also able to add them myself. The accessibility labels are only used in a specific build and the defaults are used in production.
In this post I’ll use my own testapp because I can’t use the app of my client. I’ve implemented the same testsetup for my client. So, enough about the app, lets dive into the problem.
The problem I had was that on iOS I was not able to find the send-button, not with Appium Desktop and also not with logging the source to the console, it was just not there.
Below you’ll find an example of the UI-tree. The chat component of the customer almost has the same layout. The 3 UI-components (add-, input and the send-button) can be found in the view (left part). In the middle part of the screen, the source, you will see that the send-button is missing.
When I looked into the way the chat component had been build I found out that the send-button had a different style than the rest of the components like the input and the add-button. It had a position: absolute (and some more fancy styling attributes). When I talked to the developer he said this was because the customer wanted some nice effects when enabling the input/send-button and he needed to fix that with this implementation.
After adjusting some code on my local laptop, I saw that the button was there, but the source was on the right side of the screen, outside the view. This didn’t seem logical because I could tap on it and it would send the chat. When I realised this, I already had part of my solution.
If I can’t click on the button with Appium because it can’t find the element, maybe I can click on the button based on coordinates. The question is only, what are the coordinates of an element you can’t find? The answer to that may be a little bit hacky, but I used the UI-thoughts behind the chat component.
When you look at the chat component in my example app you see that we have:
- an add-button
- an input
- a send-button
You can also see that the distance from the add-button to the left of the screen can be compared to the distance from the send-button to the right of the screen. I can determine the coordinates of the add-button and I can also determine the width of the screen, meaning I need to do something like this:
- Get centre x, y coordinates of the add-button by first:
- Determine AddButtonX, AddButtonY
- Determine AddButtonHeight and AddButtonWidth
- CentreAddButtonX =AddButtonX +AddButtonWidth/2
- CentreAddButtonY =AddButtonY +AddButtonHeight/2
- Determine the width of the screen
- Determine SendX centre and SendY centre:
- CentreSendX = ScreenWidth –CentreAddButtonX
- CentreSendY = CentreAddButtonY
In code it looks like this (with the webdriver.io syntax)
Based on this code I was able to click on the send-button even though the button that was not available in the source. This solution is even screen width proof 😇.
So, what did I proof with this, that I’m creative or that I can implement some hacky ways? The answer is of-course yes 😉, but what I wanted to proof with this is that with Appium there is almost always a way to locate or interact with your elements. So be creative and share your creative and or hacky ways with the rest of the world.
By the way, I’m still looking for a better and less hacky way, so if you have it, please let me know. For now it works and it’s stable for me.
- Header image Designed by Freepik