What is the best way to test my website across various mobile browsers AND various versions of each of those browsers.
Additional Info:
Most of the online cross browser testing support wide range of desktop browser testing, and quite a range of mobile devices. But they don't seem to offer various versions of mobile browsers on those devices.
This similar question is quite old and it is surprising that in spite of the proliferation of mobile devices and focus on responsive designs, testing services for mobile is not catching up.
Major mobile browsers I would like to target : various mobile versions of Safari, Chrome, Firefox, Opera, Dolphin, UC Web etc
Just wanted to note this and this good alternative to online testing services for desktop browsers. Maybe something similar exists for mobile browsers too?
I'll suggest that both Opera's "device mode" is a really good for a first crack. But nothing beats actual device testing. I have found the odd case where Chrome's iPhone mode renders something different than what the actual phone does, but I would say it is about 90%. And the fact that it is so much easier to tweak code, and refresh using Chrome on the desktop rather than tweak, and refresh on phone, that I tolerate the 10% difference as long as I can. Then I just verify on an actual device after I am done with Chome's device mode.
I have not used Opera's device mode, but have heard it is good too.
There is a tool called as https://www.browserling.com/ which can be used for Desktop and Mobile testing(Android)
I don't think there is one way of doing cross browser testing across various mobile browsers and versions. It all boils down to what you want to do?
It is impossible to cover ALL browser combinations and versions. So my suggestion based on experience would be-
If you have too many combinations in mind, use a combinatorial tool (pairwise testing) from here - http://www.pairwise.org/tools.asp and reduce the number of permutations to get the best coverage.
Then go to Android and Apple website to see what the most commonly used phones and versions in the US, Europe and Asia region are based on where your customers are located. They have all these stats publicly available on their website
If you have google analytics see what browsers, versions and phones your users most commonly use to access your website
Now, you will have a list of devices and browser versions which is more focused.
Check what budget you have to invest in cross browser testing. Based on that I would recommend buying at least a couple of phones and tablets based on the usage statistics you got in the first 3 steps. Then, you can choose from a number of cross browser testing tools/services like
BrowserStack
Amazon Devices Farm
Saucelabs
Now atleast you have a more scientific way of doing cross browser testing :-)
Related
I have a very big problem and unfortunately I cannot find a solution. Help from some professionals would be really great. Thanks!
The little problem
I have a Angular Web App / Android App using Cordova. My app needs at least the Chrome Engine 50 to support all functions and looks right. Unfortunately I noticed that there are many devices that use a much older version. Also the devices do not use a common source for the Chrome Engine. Some use the Chrome Browser itself or the Android System WebView. In these two cases I can tell my testers, install the two things and then it works. Currently I check at the start of the app which version is installed and if it is less than 50 I show an info that users have to update ther apps / components particularly important here the two things (Chrome Browser itself or the Android System WebView). I rather say my users that they should update all ther apps because some hardware manufacturers have their own apps that include the Chrome Engine. That alone I find very unpleasant.
The biger problem
But it is worse with devices that have their own Chrome Engine built into the firmware. So one that you can not update at all via the apps update only just the hardware manufacturer of the phone can update them with firmware updates. So many cheap devices that don't get any more updates simply fall out and bring me possibly bad ratings.
What can you do?
Maybe someone has an idea? Because this way I can put my app in the store from Android 4.4 on but even 6.0 devices have older Chrome Engine versions in their firmwares. Can't I provide a chrome engine version or say I use it there from Chrome or from the Android system WebView? I'm really on the edge and need a clever solution.
I would be very happy about some help or exchange. Thanks a lot.
Best regards
Robi
We're developing a mobile website, which we want to say will be accessible by users with Android & iPhones/iPads. I know websites are accessed via the browsers, of which there can be many on a phone, but we want to test them on older operating systems. We want to support a range of users, many without the latest versions of the operating systems.
So I am being asked what devices we need to go out and buy. Now I am assuming most come with the latest OS, and I'm pretty sure you cannot downgrade an OS on either Android or iPhone/iPad without "jailbreaking" the device. Surely there must be some other way of doing this?
How do people test their sites on older systems?
This would apply to Windows phones as well...
A service like this might actually save you some money in the long run:
http://www.browserstack.com/
Other than that, iOS has a significant market share in iOS7, a little in iOS6 and a negligible amount in lesser versions:
https://developer.apple.com/support/appstore/
Covering the last two versions should be good enough for you.
Even if you could find emulators, why not just buy these older devices used? They could be had relatively cheaply and they would also give you the same performance characteristics, which would help in performance benchmarking.
Also, if you use a good mobile library, it should provide sufficient backwards compatibility -- not that this is a replacement for testing :)
You might look into Eclipse. I use this for developing my Android benchmarking apps, mainly via Linux, but some via Windows. It is capable of emulating a wide range of phone and tablet sizes, different CPUs and Android versions, including old ones. It is slow, but the emulated devices have browser and email apps. I don’t know how real the OSs are. It seems that there might be a version for Apple, but I have not studied the detail.
I've gone a long way to find a method, that, ultimately, doesn't work. But read on.
You can download old versions of WebKit. That's not the same as having the real phone, but can help you with some rendering issues.
To do this, you need to figure out which version do you need to test your device. Go search for devices' user agent strings. For example, this string:
Mozilla/5.0 (iPhone; CPU iPhone OS 8_4_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12H321 Safari/600.1.4
Means that iOS 8.4.1 uses Webkit version 600.1.4.
Then you have to figure out which Webkit revision number corresponds to that version. WebKit tags list is helpful here. You can also try searching Google for webkit trac release 600.1.4. For my example, it's revision 171707.
Now go to http://nightly.webkit.org/builds/trunk/mac/1 and find the right (or closest possible) revision of WebKit, download and use it for your testing.
Now I've really found and downloaded it, it says that my new OS X is not supported for this old build. :(
I have a client who wants me to optimize their mobile website for the Kindle Fire. I've done development on iPhone, iPad, and Android, but not for Android tablets and not specifically for the Kindle Fire either.
I wanted to know, as a mobile web developer, are there any special considerations I should make or any red flags I should be aware of for doing web development on this platform?
After doing some research, it looks like it's using Android 2.3, running an Opera mini-like browser called Amazon Silk, and using a networking protocol called SPDY. A found an article that suggests I should be designing for a 1280 × 752 space.
I found one article on Quora that says "Silk tracks user behaviors in aggregate, and will attempt to predict likely next pages (similar to what some browsers do to preload links - just in a more targeted manner). It then delivers that content to the device ahead of time." That raised a little bit of a red flag for me because I do implement some server side (php) tracking and logging on some of my webpages. I don't want to be recording logs on pages that aren't being requested by a real person.
Other than that, I don't really see anything else to be concerned about. Thoughts?
The Amazon Silk backend does employ certain optimizations to reduce latency. But, as a general rule, you don't need to factor the Silk backend into your web development considerations. There are no gotchas to worry about.
With regard to the UA string: You can find the latest and greatest info on the Silk user agent at the Silk Developer Guide: http://docs.aws.amazon.com/silk/latest/developerguide/user-agent.html.
We have an existing web site, and I've been asked to test its compatibility with mobile browsers.
I've installed the Android SDK onto my desktop PC. I'm able to view my localhost site in the emulator, and I have identified a number of glitches in the page layout which occur in the Android browser.
But since none of these issues occur in any desktop browser, I've been struggling with how to debug them. For example, in Firefox, it's very easy to use Firebug to see what stylesheets have been appies and to adjust them on the fly to see how it affects the layout. But I haven't found a way to do anything similar on the Android emulator.
The question is, short of trial+error, how do I go about working out what is causing those layout issues? Does the Android browser (or the Android SDK) have any kind of tools that are useful for debugging CSS? If so, how do I use them?
[EDIT] I haven't found a solution to this, so I'm throwing open the doors to the bounty hunters...
Weinre is probably the closest to what you're looking for:
If what you're looking for is something that allows you to tweak layout in realtime it should make you happy.
https://chrome.google.com/webstore/detail/geelfhphabnejjhdalkjhgipohgpdnoc?hl=en-US
https://chrome.google.com/webstore/detail/cllkoedgiefnomcccogcalmjogjfcpji?hl=en-US
https://chrome.google.com/webstore/detail/cghdkdcepiflkhaddpomjehcmdojgobh?hl=en-US
I found several options that appear as though they should work for you if an emulator/simulator will suffice or at least get you started. The benefit to this is that the Chrome Developer Tools appear to work with the add-ons!
Personally, I would much prefer to do this on actual Android hardware. In usage a touch screen handset is quite different to even the most accurate emulator; things such as gamma, pixel density, performance, touch interaction (are your links big enough?), portrait/landscape orientation and even the fact you hold it in your hand makes it quite different to the desktop experience. If you want to see how well your site works on mobile/Android, get a cheap second hand device to test on!
As for the debugging; I always include my own "log" function which creates a div#console if the firebug/browser console is unavailable. This works reasonably well for debugging on a handset with the caveat that it covers part of the content. You can then print out the current style of an object with something like
log(window.getComputedStyle(document.getElementById("myobj"));
Note: The above will not work in IE.
You may have already seen this, but the SDK Documentation Site has some basic information on developing and debugging web apps on Android:
Web Apps Overview
Debugging Web Apps
Hope that Helps!
I don't know how you detect a mobile device but I detect a client with the user agent. Because of this I can simply send a different user-agent string to test CSS which works fairly well.
For Firefox I use User Agent Switcher. Additionally I use the Web Developer tool not only to view all settings but also the Resize option to simulate the viewport width.
Apple's Safari has a developer extension and within also a User Agent Switcher. You can add your own User Agent string.
Chrome provides tools for doing this now. Just visit:
chrome://inspect/
With your device connected and ADB running - you can then use all of the Chrome web element inspection tools. This works with the browser, but also with any app that renders in a WebView (e.g. Cordova).
We want to place a device in a store that operates as sort of a kiosk device. As in customers walk up to it and start interacting with our custom app. The app could be developed for Android or the iPad, so I'm trying to decide which one to use and would like comments on the following ideas:
Is it possible for Android or iOS to access services over the USB port? This would enable us to disable the network.
Is one particularly better for 24 hour always on?
I like the iPad as I think its supply will be more constant as we move forward and need to replace devices due to ones gone bad. Also, our app will probably work on future generations of the iPad. With Android, I'm not sure there will be that sort of consistency from the tablet vendors.
Kiosk mode? I think with the iPad by putting it in a kiosk case that removes access to the home button and turning on the restrictions we'll get what we want. What about Android? I'd rather not have to get into rooting devices and replacing their firmware.
Remote control? Any way to remotely control iOS or Android in a standard means? Our app will be a client to a master server which will obviously be able to control the app somewhat (when used purely as a display device to a customer, controlled from behind the counter).
My feeling is that neither Android tablets or the iPad is best suited for this. Are there other options?
I will try to answer your points, but know that I am probably biased towards Android, because that is where my experience lies.
With Android 3.1+, at least with the Xoom, you have full USB host capabilities. Things like USB flash/hard drives, keyboards, mice, even digital cameras, all work. If you need custom interop with a USB device, you could go as far as to write a driver for it.
24 hour always on is not good for any device with a battery, but neither is better in this situation.
While android apps are forward-compatible, bad programming practices and/or deviations from "vanilla" Android software and hardware CAN break forward compatibility. That being said, if you grab a Google Experience device like the Xoom, you won't meet as many surprises.
In Android 3.0, the navigation bar is built-in at a low level, and it is not possible for apps to remove it. Therefore, it is trivial for anyone to break a "software nanny."
I know that it is possible to control android devices remotely, but without knowing your specific needs, I can't really offer more information than that.
Good luck!
iPad NOOO believe me I am a convert to Apple for my home and business but when we went to launch kiosk the iPad FAILED Big Time.. Here are a couple of little (Big) issues we ran into.
If the device reboots you cannot auto launch you iPad app since Apple does not allow that.
There is a serious memory leak in the iPads browser. We were running javascript / CSS3 and it cratered intermittently. I literally spent 2 hours "today" on the phone with Apple getting the MAJOR run around. I finally said let me speak to an Enterprise Sales Manager as my project could mean thousands of iPads and I got NO WHERE. One Apple employee even told me they don't have enterprise sales managers.
If those weren't enough even though we are just in the proof of concept phase, we are already getting request for other options. These other options are going to require access to the OS which Apple yea right. We are moving to Android immediately.
Sorry Apple I love you but you loose here.
If your using an Ipad you should consider if it can support the power for the USB thing. Watch this Using Powered USB Port
Your idea about putting the tablet behind another piece of glass/plastic is neat. To then deal with remote controlling, you might consider doing some Bluetooth programming.
My mobile development has been primarily with iOS, so I am biased toward that SDK. I will mention that the data/sync/charge port for iOS has (I believe) never changed. Your Gen 1 iPhone sync cord works on your iPhone 4... and your iPad or iPad 2. So, in terms of third party hardware, you may see more consistency with Apple.
I haven't found a good answer regarding whether it is easier to do Bluetooth programming for iOS or Android, but I think to stay cost-effective, you might see which one is more open to third-party devices. Here is an SO post/answer about iOS and third-party Bluetooth devices; I've not found anything on Android regarding third-party Bluetooth remotes, but considering a lot of hardware running Android is third-party, your chances from a naive perspective seem pretty good. Here's the Android Bluetooth API.
Buying an iOS or Android handheld to remote control an iOS or Android tablet does seem a bit steep, but then again, maybe not. Cost also depends on your ratio of remotes to tablets. 1:1? 1:N? N:1? N:M?
The lowest end iPod goes for $229 as of May 20, 2011. Android does have more variety in terms of hardware. You may be able to get a cheap Android phone with no service plan to act as a Bluetooth remote for an Android tab.
I have provided a solution for the kiosk mode using iPad here Lock-down iPhone/iPod/iPad so it can only run one app
I am afraid that I don't really know for Android if the same thing is possible.
To address the issue of crashing applications you can use an exception trampoline (see discussion here https://blog.compeople.eu/apps/?p=275) to catch the crash and reboot your app.
If the entire device is restarted however then other apps that are on the device can be started and will subsequently be locked in.
To answer your other points:
You can use a configuration profile to control network access. Force it to use a VPN or Proxy that only allows your custom app with embedded credentials to use. That way other network access can be prevented.
Your concern over future compatibility is spot on. The Android marketplace is so fragmented then maintaining a fleet is difficult.
If you have an app that is behaving as a server and is locked in then remote control is possible.
We manufacture tablet kiosks that support both android and iPad devices. In fact we are the only iPad kiosk that has achieved apple approval.
Generally speaking i think you will have an easier time with an iPad as the software and hardware will remain more consistent over time. Which is important if you have to change out a fault unit or deploy more kiosks 6 months or year from now when the original device is no longer manufactured.