Can I use appium for testing web apps? - appium

The application I am testing is a web based app. Is it possible to use Appium to test this? On their website it states "Appium is an open source test automation framework for use with native and hybrid mobile apps."
So I am unsure if this will work for my web app as it is not a native app or hybrid app.
Can someone enlighten me?
Thanks!

First of all, you need to know what kind of web application you want to test. According to information from Saucelabs
there are three types of web application:
Native application
Yes, you can test it using Appium which is a popular tool for mobile testing.
Hybrid application (Native + webview)
Yes, you can test it with Appium but with a little trick that you may need to change the context to switch to webview mode. appium.io
Web app (app that is accessible from browser installed on your mobile device, not the one you can download and install)
Yes, and the details are at appium.io too.
Besides, there is actually another type of app: hybrid app, but with customized webview.
I've been struggling with it recently because I have trouble to find and switch to the webview mode.

I have found Appium to be very cumbersome in testing mobile web applications due to the fact that touch actions are not well supported. From a Java standpoint, I have found there to be two main options for talking to Appium: the Selenium RemoteWebDriver and the AppiumDriver from the Appium Java client.
Selenium RemoteWebDriver
Until now I have been able to test our web app on an Android device using the selenium RemoteWebDriver and RemoteTouchScreen. Using Selenium 3.6.0 and Appium 1.6.5, I have tested 4 different methods to click an element:
webDriver.findElement(locator).click();
new Actions(webDriver).moveToElement(findElement(locator)).click().perform();
new RemoteTouchScreen(new RemoteExecuteMethod(webDriver)).singleTap(((Locatable)webDriver.findElement(locator)).getCoordinates());
new TouchActions(webDriver).singleTap(locator);
On Android, the first 3 methods work, but 4 throws a 'not supported' exception. I have opted to use method 1 for clicks/taps and 3 for gestures.
On iOS, methods 1, 2 and 4 throw a 'not yet supported' exception and method 3 does nothing. Since I was not prepared to invest the time to troubleshoot that, we are only testing on Android for now in the hopes that Appium will be improved and iOS will be better supported.
Appium Java client
My experience with the Appium java client (version 5.0.4) was worse still. There doesn't seem to be a comprehensive tutorial on how to do touch actions, only a few code snippets flying around on the interwebs. So my answer to this question is an attempt at creating one.
First instantiate the driver and navigate to a page:
DesiredCapabilities capabilities = new DesiredCapabilities();
capabilities.setCapability("deviceName", "Samsung Android S8");
capabilities.setCapability("browserName", "Chrome");
capabilities.setCapability("platformName", "Android");
MobileDriver appiumDriver = new AndroidDriver<WebElement>(new URL("http://127.0.0.1:4723/wd/hub"), capabilities);
appiumDriver.navigate().to("https://duckduckgo.com");
Then perform a touch action:
new TouchAction(appiumDriver).tap(appiumDriver.findElement(By.id("search_form_input_homepage"))).perform();
This results in: org.openqa.selenium.WebDriverException: Method has not yet been implemented
From this forum post I deduced that I have to switch context to be able to do touch actions. Attempt two:
appiumDriver.context("NATIVE_APP");
new TouchAction(appiumDriver).tap(appiumDriver.findElement(By.id("search_form_input_homepage"))).perform();
That works. However, only for the By.id selector. I could not find any other selector that works when in the NATIVE_APP context. And since most elements in our web site lack an id, I need an xpath selector. Attempt three:
appiumDriver.context("NATIVE_APP");
new TouchAction(appiumDriver).tap(appiumDriver.findElement(By.xpath("//*[#id=\"search_form_input_homepage\"]"))).perform();
Which resulted in: org.openqa.selenium.NoSuchElementException: An element could not be located on the page using the given search parameters.
Other workarounds that I could think of, such as selecting the WebElement in the CHROMIUM context and then carrying over the location to the NATIVE_APP context is not an option since the coordinate systems differ (browser pixels vs screen pixels).
And don't forget to return to the default CHROMIUM context after each touch action. So the complete code of the only working example becomes:
try {
appiumDriver.context("NATIVE_APP");
new TouchAction(appiumDriver).tap(appiumDriver.findElement(By.id("search_form_input_homepage"))).perform();
} finally {
appiumDriver.context("CHROMIUM");
}
At this point my conclusion is that testing mobile web applications with Appium is not quite there yet.

Yes, I'm pretty sure you can, have a look here:
EDIT: outdated link fixed link to appium doc
Also, a related question here

It is possible, here is example how to create instance for safari in Ruby:
capabilities = {
:device => 'iPhone Simulator',
:browserName => 'iOS',
:version => '7.1',
:platform => 'Mac',
:app => 'safari'
}
$mobile_browser = Selenium::WebDriver.for(
:remote,
:desired_capabilities =>capabilities,
:url => "your_server/wd/hub")
before download appium and click launch to start appium server.

If you are talking about Mobile web apps, yes you can use Appium for testing them

Yes, it's possible for Appium to test both native and hybrid Apps.
For Windows machine, download: Appium For Windows.
For MAC machine, download: Appium dmg file.
Windows need:
Just Appium.exe + .apk file(android) + testing device + Android SDK installed.
MAC needs
Appium DMG file + .app/.ipa file + testing device + XCODE (provisioning certificate) + ANT + ios-webkit-proxy-debug.
For Web apps, as they are purely browser-based, Appium works well on them also.
Link for reference:
https://github.com/appium/appium/blob/master/docs/mobile-web.md

Related

Chrome Service Worker iOS Support

As Apple announced Service Worker support for iOS 11.3 a few months ago, I recently started trying to get a service worker to work on iOS. On Safari it works as expected, after vising the website, it works offline. However, when trying to use the same feature in Chrome, I had intermittent results. Specifically, the service worker would only work every other page refresh, with the original refresh after going offline being one of the ones not working.
I know that Chrome on iOS is built on a version of Safari, therefore I am confused about this behavior.
Is this due to incomplete support from Chrome iOS for Service Workers? Because it is Chrome on iOS, I'm not sure of any easy way to debug it either, so any other tips to help track down the problem would be appreciated. Thank you!
Chrome for iOS do not support service workers currently(as of Apr-2020) and also the "Add to home screen" option is not available, if you are interested in that. Any offline page loading that you are experiencing should be from regular browser cache.
Here is an official documentation from Apple's web-kit page.
Update: A previous version of this post stated the Service Worker API
is available in all applications using WKWebView. At this time it is
only available in Safari, applications that use
SFSafariViewController, and web applications saved to your home
screen.
Notably, Chrome uses WKWebView as its browser engine in iOS, which don't have service worker support yet as per the above statement(which you can find in the link provided above). So the only way you can use Service worker in iOS is to use Safari browser or use one of the above supported web-views inside a native app.
Here is an article on what all PWA features iOS is still missing. Remember, this is a fast growing area. Always check if what is applicable now, especially if the documentation/article is getting older.
Here is an adapter to help debug in Chrome dev tools for pages loaded iOS - webkit/safari. Hope it becomes as easy as Android Chrome debugging one day!
Chrome for iOS is open source (https://blog.chromium.org/2017/01/open-sourcing-chrome-on-ios.html)
We can install the Chrome app with our developer signed certificate on an iOS device, launch the Chrome App, and start testing.
It is technically feasible.
As an update in January 2021: the official documentation from Apple's web-kit page still says the same thing, and I just battled a very difficult to debug issue in Chrome iOS - posting here in case it helps someone.
I had an iFrame containing a cross-origin Angular 10 PWA with Service Worker enabled, and the iFrame content would not show after an initial load - no errors, no server logs, just blank. The only solution that worked was to self-destruct the Service Worker per Angular's docs, and now the iFrame loads fine.

IBM Test Workbench for Worklight - Compound test is not executing all tests

I'm using IBM Mobile Test Workbench for Worklight 8.6.0 to test a hybrid app for ios. I'm using an Iphone 4S with ios 7.0.4, and I'm experiencing the following problems:
1 - I'm trying to run a compound test with 4 tests but only two tests are executed. Basically, after finnishing the second test iphone stays in passive mode and the app is not started.
2 - Before the second test of the compound test is started a pop-up appears asking "Open this page in {appName}". Is there any way to prevent this pop-up from appearing?
1 - I'm sorry but I have not yet experienced such an issue with compound test.
2 - This issue is a known issue that occurs with Safari.
2a) If you are on an iOS device, you could use another web browser such as Chrome in order to connect to the Workbench.
2b) If you are working on an iOS simulator you can use the native client instead the web one.
You will find the RTWiOS application and its installation script in the downloaded archive.
In order to download the archive, launch Safari on your Mac and browse your workbench url + "/mobile" (i.e: http://(mtww-ip-address):(port-number)/mobile
Best Regards, Alexandre.

Debug iPad Safari with a PC

I want to test my website on Safari on my iPad. I only have another PC. Is there a way for me to do remote debugging like ADB (Android Debug Bridge) with mobile Chrome? I searched on StackOverflow, seems there is an Adobe Edge Inspect CC, but I don't know if this is a good choice.
Thanks!
Update October 2019
This solution doesn't work for IOS 12+ (resource 1, resource 2).
Updated and tested on 24/6/2017
Using Chrome on Windows 8 and more recent:
Download and install Node
Download and install ITunes and connect it to your Device. (A pop-up should shows to your iPad to get authorization)
. Be sure to allow web inspector in your iPad
Download and install the remote webkit adapter
Using Powershell (As administrator):
npm install remotedebug-ios-webkit-adapter -g
Execute the adapter:
Using Powershell (as administrator):
remotedebug_ios_webkit_adapter --port=9000
You should get a similar output:
C:\Windows\system32> remotedebug_ios_webkit_adapter --port=9000
remotedebug-ios-webkit-adapter is listening on port 9000
iosAdapter.getTargets
...
Open Chrome and go to the following link:
chrome://inspect/#devices
Click on configure next to "Discover network targets" and add the following:
localhost:9000
Make sure to have the web page you want debug open on safari, you should see it on chrome inspector page under Remote Target
Extra step for iOS 11 Thanks to #skaurus
See monkeythedev's answer for the easiest way to debug on a Windows 8+ machine with iOS 9+. I updated my blog post using information from that answer and other sources and also recorded a screenshare. The method below should still work for iOS 8 and down, if needed.
There is actually a pretty easy way to debug a website in Safari on iOS using Firefox on a Windows machine.
NOTE: Ryan wrote in the comments below that this may only work on iOS 8 and down. I am unable to confirm, but be aware.
I wrote a detailed blog post about this, but here are the highlights:
Install iTunes to get the "Apple Mobile Device Support" and "Apple Application Support" applications that come with it. (uninstall iTunes afterward, if you want)
Connect your iOS device via USB.
Enable web inspector on iOS (available on iOS 6 and later).
Open Safari on your iOS device and browse to a website.
Open Firefox on your Windows machine and press Shift + F8 to open WebIDE, which should include the necessary Valance add-on, if you use Firefox Developer Edition (any version) or Firefox 37 and later (any channel).
For some reason, I couldn't get it to connect to my iOS device until I downloaded the ios-webkit-debug-proxy-win32 program and ran it. It opens a blank Command Prompt, but after I went back to WebIDE after opening it, I disconnected, then reconnected, and I saw debug info for the website I had opened in Safari. You may not need to do this though, as another user just had to add an exception to their firewall then disconnect/reconnect, and it worked.
The debug info available isn't as exhaustive as Chrome Developer Tools (specifically no "Networking" tab), but it was enough for me to be able to view what was going on in the Console.
2018 Update:
Since the original post, the blog post is dead & Telerik App Builder is discontinued and no longer offered. Adding this update to inform readers in case they don't read the user comments that follow this answer post. As for the blog post, for those still interested, here's a web cached copy. Regarding the blog, I think the company that blog's from has since shut down.
When I get a chance, I'll see if I have a copy of the app builder saved so that I can post it online for those still interested in using it, along with another cached copy of the blog post maybe.
Original Answer
You can try option of using Telerik AppBuilder (Windows client) as a replacement on Windows for Safari debugger on Mac when remote debugging. There's a nice blog post about the steps to do it in link below. I'd rather not repost the info as there are also screenshots and it's a lot of text. But essentially, you install app, open it, connect device via USB, then you can find it in the app and open up the developer tools/debugger for it. For non-public websites, you'll have to open up port 80 with some firewall configs documented in the post.
http://blog.falafel.com/Blogs/josh-eastburn/2014/03/04/ios-web-inspector-on-windows-with-telerik-appbuilder
The tool requires a license or you can use the trial, which becomes a basic edition afterwards. I think the basic edition will still allow you to do the debugging. I'm going to try it out myself.
You can also try these iOS apps too, you can find them in the iTunes App store. They give you a built in developer tools feature (right on iOS no remote debug) that mobile Safari doesn't offer.
MIH Tool - basic edition
https://itunes.apple.com/us/app/mihtool/id584739126?ls=1&mt=8
HTTPWatch Basic
https://itunes.apple.com/us/app/httpwatch-basic-http-sniffer/id658886056?mt=8
I gave them a try and they're at least better than the mobile Safari you get on iOS, unless one needs to target full mobile Safari compatibility. I'm guessing the pro/paid editions of those apps give you more/better features.
This question was more than 4 years ago, but I feel like it's worth to mention another option which is platform-independent which seems is not mentioned above:
VConsole
It's a JavaScript that you can inject into your page(s) which will overwrite all native console output and show it as an overlay on top of your page content, in a level of detail that is almost as good as Google Chrome's Developer Tools.
Runs well on iOS Safari, as well as on other mobile browsers - for as long as JavaScript is enabled in the browser.
How to install: https://www.npmjs.com/package/vconsole
You will need NPM tools to install it, but not actually required to use NPM to build your project. You can simply install VConsole somewhere in a separate folder, and just copy-paste vconsole.min.js from it.
Once you inject it into your page, will look like this:
<script type="text/javascript" src="vconsole.min.js"></script>
<script type="text/javascript>let vc = new VConsole(); // this will initialize it.</script>
Visually is very appealing, you will see green button in lower-right corner of your page on your mobile/desktop browser, which will open console overlay.
Very neat!
Of course, it does not provide you with ability to select an element, see calculated css etc., but if you are looking for console output and some network report, this one is really easy to use.
October 2019
AFAIK, For recent IOS versions there is no overall solution for debugging IOS from a PC.
You can however use one of the following solutions:
Display console messages in the browser itself. As described here and in Sinisa's answer.
The "remotedebug-ios-webkit-adapter" doesn't work for debugging IOS 12+. It requires extra steps for IOS 11, and works for IOS 10 and perhaps older versions as well.
I use PrePros for CSS preprocessing and it has a built in server for mobile debugging and web inspector. But this is only good for local sites even still...
In my experience it is often not an issue with mobile Safari only but Safari in general. In these cases it can help to try the normal Safari (for Windows) and see if the bugs appear there. If so, it's much easier to debug something by this way.
2021 update:
The creator of RemoteDebug here. I've built a replacement for RemoteDebug called Inspect, which packages everything together in a pleasant experience and enables easy iOS web debugging from Windows, macOS, and Linux, with a few extra features like screencasting and wifi debugging.
http://inspect.dev
There are a couple of options I've come across for debugging on iOS. They're not full step-through debuggers, but they offer a JS error log, console and some inspection tools:
1. Eruda
By adding the following snippet to the top of your page:
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
You get an interactive set of developer tools similar to those in Chrome and Firefox. Here's a screenshot:
Available at https://github.com/liriliri/eruda
2. MiniConsole
This one I developed myself when I had not discovered another suitable option. It has less features, but it does the main things - capture JS errors, and allow you to run commands to inspect variables and object on your page.
Here's a demo:
It's activated by just placing this script tag on your page:
<script src="https://cdn.jsdelivr.net/gh/SimonEast/MiniConsoleJS#main/console.js"></script>
Open source, GPL licence. Available at: https://github.com/SimonEast/MiniConsoleJS/
3. vConsole
Another similar option that I've not really tried. Available at https://www.npmjs.com/package/vconsole with a live demo at http://wechatfe.github.io/vconsole/demo.html.
I haven't tried this on a PC, but you should be able to go to http://[DEVICE_IP_ADDRESS]:9999 to debug.

Flex Mobile HTTP Request Error on apk file

I'm developing an android application using Flex Builder 4.6.
It's fairly complicated app and I'm using HTTPService for communication with the server.
It was working fine until recently it stops working after making the apk file.
So From desktop simulator, in debug-mode in the mobile, the HTTTPService just works fine but when I make a release build and install it in the mobile, it just doesn't work.
I tried to track down the error, it's just simply shows 'HTTP request error'.
For example here is the mxml code I'm using
<s:HTTPService id="sayHi" method="GET" result="sayHi_resultHandler(event)" fault="sayHi_faultHandler(event)"
url="https://zaawi.co.uk/developer/controller.php" useProxy="false">
<s:request xmlns="">
<h>sayHi</h>
</s:request>
</s:HTTPService>
I checked the url https://zaawi.co.uk/developer/controller.php?h=sayHi in the browser which works fine, as well as, in the simulator and debugging mode.
The server(php) sending response in xml format
print '<?xml version="1.0" encoding="UTF-8"?><data><hi>hello world</hi></data>';
It was working fine for almost a year and just stopped working recently.
Please let me know if anybody else had this problem and how can I resolve this.
Many thanks in advance
I had a similar problem a while ago, my HTTPService requests started to fail and i didn't got anything useful in the FaultEvent, but after hours of trying different things i noticed that i had the network monitor enabled in flex, and since i had nothing to loose, i disabled it a voila! The app worked again!
I think when you have the network monitor enabled, the app redirects all requests thru a local proxy or something and that way you can sniff the requests, but this seems to stay when you create a release version and mess all requests.
So if you have network monitor enabled, just disable it, and then try to build your app again.
It appears that it is related to how the captive runtime calls https endpoints. Someone over on this thread Adobe AIR mobile app fails when using HTTPS on Nexus tablet, but works on Kindle figured out that by switching from the captive runtime to using the shared AIR runtime, the error went away. You may also want to try the latest AIR SDK and see if that solves the problem (although I've been seeing issues with the apps working on iOS using the 3.8 beta build, so you may want to try 3.7 first).

iOS6 - removed console log for IPad - how to use web inspector on windows?

So iOS6 is out, horrah. Now, it appears as though Apple have removed the 'Developer Console' that used to exist in Safari. Great, I hear a lot of people say - it was limited.
But, it works on the device - now apparently you have to connect the device to a Mac to get web inspector?
Is this the only way of debugging with console? Is there a way of debugging with windows, safari? Please note, I don't mean just changing user-agent, which you can do on Safari Windows - that doesn't register touch events - just click.
If you don't have Mac OSX you can use this script as console replacement:
https://github.com/robotnic/waterbug
It shows error message, it's possible to log all kind of variables, you have to turn your iPhone or iPad 90° to the right to open the console.
A poor mans debugging console:
try {
var test = document.do.something();
}
catch (exc) {
alert(exc);
}
One can debug on the device by using bookmarklets (especially within Mobile Safari).
Debugging on the device can be very important if an error only appears live on the device but nowhere else. There is a variety of bookmarklets for developer, so choose the tool of your choice (e.g. Firebug Lite), add it to your bookmarks and use it right where you need it.
This may not be the Developer Console, but it is a method to debug much more accurate and job-oriented.
I wrote a blogpost on how to use bookmarklets on my weblog (there is also a list of other common testing tools and further bookmarklets):
http://hofmannsven.com/2013/laboratory/ios-bookmarklets/
UPDATE: Chrome released its Mobile DevTools which will make debugging (within Google Chome Mobile, Android Devices only) much easier. This will not fix the missing DevTools issue within Safari, but it might help to locate errors on a device:
https://developer.chrome.com/devtools/docs/remote-debugging
http://www.html5rocks.com/en/tutorials/developertools/mobile/
UPDATE2: Mozilla released a Firefox add-on to enable web development across browsers and devices: http://youtu.be/kEFbQwB81RE?t=1m58s
Have a look for weinre. It allows you to inspect a page running in Safari from another computer using a Chrome-like web inspector
You can use window.onerror to debug errors without a console. Simply add this code to your HTML document in its own <script> tag before any other Javascript code:
<script type="text/javascript">
window.onerror = function(e){
alert(e);
};
</script>
This will do so that whenever there is an error, the error message will be shown in an alert dialog box, which is visible in iOS Safari. It's important that the above code runs before the error you're trying to debug, and if you're debugging a syntax error, it's also important that it's in a separate <script> tag.
Instead of Safari on Windows you could use an app by Telerik called AppBuilder. I've found the instructions on this blog. You'll need to get an account to use the Telerik Platform though.
This will give you dev tools like the ones in Safari. I've used it on Win7 64 bit with regular web apps and Phonegap apps running on an iPad with iOS 7.1.
Like neno suggested, Telerik AppBuilder is a great applications. I am actually running Windows XP in a virtual machine on Linux only for the purpose of debugging my iPhone. Windows XP because in my case Windows 7 does regognize the iPhone, but iTunes and Telerik AppBuilder don't.
Looks like the built in console is gone. I tried plugging into a Windows 7 and opened Safari and could not locate the developer console. Then I read this article which confirmed it.
If you need to be able to test your site in both orientations then waterbug is not a good option, because it uses up the landscape orientation for its console view.
One decent option is to use Adobe Edge Inspect. You open your site on Chrome and open the app on your device and your device will mirror whatever page you have open on your desktop. Then you can use the Chrome dev tools to debug your content.

Resources