RxBrowser rending website differently

Mobile Testing, Android App Testing.
tvu
Posts: 195
Joined: Tue Apr 07, 2015 10:47 pm

RxBrowser rending website differently

Post by tvu » Fri Apr 24, 2015 11:35 pm

Hello,

The RxBrowser is rendering our website differently than the iOS Safari and it's making it difficult to interact with the site. When I load our website on Safari, the default welcome page scales to fit nicely on the screen. When I load the website on RxBrowser, the site is zoomed in where I can only see a portion of the site. I've attached two screenshots to illustrate the issue.

In RxBrowser, the site is zoomed in to a point where you can only view the left half of the page. We tried to make a recording that simply perform a touch action on the Sign Up button, but it doesn't work. Since only half the button is showing, we also tried to set the touch location to CenterLeft, but that didn't work either. When we tried an EnsureVisible action, it made the screen display the right half of the site.

We tried to interact with the RxBrowser via the Spy tool to see if we are touching the correct element, but got mixed results. The Touch action doesn't work if we perform it on the element under the "Browser & Results" tab. We did a "Right Click > Touch" action. The Touch action does work if we perform it on the image of the button in the Screenshot section. We did a "Right Click > Touch/Tap" action.

Test Setup:
Devices: iPhone 5, iPhone 6 both running iOS 8.2
RxBroswer v2.0.1

Thanks for the help,
Tung

PS: This is my third attempt at posting this issue because I am receiving an error stating that new users can't include URLs. Sorry if I am spamming this.
Attachments
RxBrowser_on_Ranorex_Spy.jpg
Interacting with element in Spy
RxBrowser_on_Ranorex_Spy.jpg (324.5 KiB) Viewed 1132 times
VUDU with Safari.png
Website on Safari Browser
VUDU with Safari.png (55.67 KiB) Viewed 1132 times
VUDU with RxBrowser.png
Website on RxBrowser
VUDU with RxBrowser.png (97.01 KiB) Viewed 1132 times

User avatar
Support Team
Site Admin
Site Admin
Posts: 11709
Joined: Fri Jul 07, 2006 4:30 pm
Location: Graz, Austria

Re: RxBrowser rending website differently

Post by Support Team » Mon Apr 27, 2015 4:41 pm

Hi Tung,

Our RxBrowsers are based on the standard WebKit of Android respectively iOS, but Safari doesn't use these sources, so it could be that Safari is behaving differently.

Could it be that you manually zoomed your web page in Safari to fit?

Regards,
Markus
.
Image

tvu
Posts: 195
Joined: Tue Apr 07, 2015 10:47 pm

Re: RxBrowser rending website differently

Post by tvu » Mon Apr 27, 2015 5:40 pm

Hi Markus,

No, on Safari we don't manually zoom out to have the page scale correctly on the screen. It renders automatically to fit when it loads. I don't know if the code force it.

On the RxBrowser, can we force it to scale? We tried to zoom in/out manually, but it doesn't work on RxBrowser.

Does the page scale correctly when you tried to load it on the RxBrowser? You can find the URL on the images I attached.

Am I understanding your comment correctly? You mention that on iOS, the RxBrowser is based on the standard Webkit for Android. Shouldn't it be based on Safari's Webkit?

Thanks,
Tung

User avatar
Support Team
Site Admin
Site Admin
Posts: 11709
Joined: Fri Jul 07, 2006 4:30 pm
Location: Graz, Austria

Re: RxBrowser rending website differently

Post by Support Team » Wed Apr 29, 2015 5:29 pm

Hi Tung,

I am afraid zooming/scaling is currently not supported by the RxBrowser.
The iOS RxBrowser is based on the iOS webkit, not on the Android one.

I tested it on an iPad and it was properly shown.

What you can try is to get the scale factor of your mobile dom.
In order to get the scale/zoom factor, you just need to drag'n'drop the mobile dom repo item "/mobileapp[@title='ranorex.RxBrowser']/form/?/?/dom[@domain='www.vudu.com']" to your action table and select "Get Value - Scale".
In my case I received "1" as scale factor.
What you can also try is to use the PerformClick action instead of the Touch, this worked in my case on the iPhone as well.

Regards,
Markus
.
Image

tvu
Posts: 195
Joined: Tue Apr 07, 2015 10:47 pm

Re: RxBrowser rending website differently

Post by tvu » Thu Apr 30, 2015 11:12 pm

Hi Markus,

Can you try testing this on an iPhone? We tried this on 3 different devices: iPhone 5 and two iPhone 6. All the devices shows the same issue.

I followed your instructions and I received a scale factor of 1. I tried to change the scale factor, but it didn't have any effect. I attached a screenshot of the action table and the log file.

We can't interact with the page when it's zoomed it. I performed a click button on the Sign Up button and it worked. But, I tried to do a Swipe Gesture going UP and it didn't work. I was trying to move the screen up so I can click on the Sign In button.

Tung
Attachments
WebisteScaleLog.png
Log
WebisteScaleLog.png (54.02 KiB) Viewed 1055 times
WebsiteScaleActionTable.png
Action Table
WebsiteScaleActionTable.png (38.98 KiB) Viewed 1055 times

User avatar
Support Team
Site Admin
Site Admin
Posts: 11709
Joined: Fri Jul 07, 2006 4:30 pm
Location: Graz, Austria

Re: RxBrowser rending website differently

Post by Support Team » Wed May 06, 2015 1:56 pm

Hi Tung,

Setting the scale factor is currently not supported, so this is just a read-only property.

I am afraid that Ranorex is in some rare cases not able to properly touch on a specific mobile web element.
In these rare cases it is recommended to use the Perform Click action instead.
We were able to reproduce the described issue on an iPhone, but I am afraid there is currently nothing we can do to change this.
We also have tried the Perform Click approach on our site and it worked as expected, so please use this instead of the touch.

Thanks,
Markus
.
Image

tvu
Posts: 195
Joined: Tue Apr 07, 2015 10:47 pm

Re: RxBrowser rending website differently

Post by tvu » Mon May 11, 2015 6:19 pm

Hi Markus,

The Perform Click action worked for us. We tried it using Spy and was able to click on the button even though it was not visible.

We tried to add the Perform Click action to our script, but the action is not listed under the "Add New Action" list. I suspect it's because the solution knows we are dealing with a mobile application and will only list actions suitable for a mobile application.

How do we add a Perform Click action to a recording for a mobile application?

Thanks again for the help,
Tung

krstcs
Ranorex Guru
Posts: 2683
Joined: Tue Feb 07, 2012 4:14 pm
Location: Austin, Texas, USA

Re: RxBrowser rending website differently

Post by krstcs » Mon May 11, 2015 7:01 pm

PerformClick() is under InvokeAction().

But it will only become available to select if you have a repo item selected.

The easiest way to get it to activate is to drag the desired element from the repository onto the action table and select 'Invoke Action -> PerformClick' from the popup menu.
Shortcuts usually aren't...