Appium: Automated Mobile Testing

2021-06-30T00:00:00+00:00

First impressions are everything. You can have the best, most robust application in the world, but if it looks like it’s from 2004 most users won’t give it a second look. Automated testing can help ensure that the app the user sees is consistent and fully functional no matter the iteration.

Selenium, Cypress, and other automated testing suites have become more and more popular for webapps. This trend has not carried over to mobile native app testing. This may be a bit surprising, as a fully functional frontend can be the difference between a professional-feeling app and a hacky one.

There are many frameworks that can be used to test mobile applications (Appium, UI Automator, Robotium, XCUITest, SeeTest, and TestComplete to name a few), but today we’ll be focusing on Appium.

Appium is an open source framework that’s easy to use out of the box. It can be used to test many versions of many different mobile OSes. It’s a one-stop shop to ensure your users are on the same page, no matter the platform.

Installation and setup for Linux

General

We will be testing the To-Do List app from the Google Play Store. What we’re testing and for which platform isn’t important, since we’re here to learn about the Appium methodology that can be applied to any mobile app.

AVD Android emulator

We will be using an AVD (Android Virtual Device) to test our app. There are many out there but I recommend Android Studio’s.

Once it’s running, just click Configure > AVD Manager.

Either create a new AVD or use the default one and start it up.

Appium

Download Appium from GitHub.

Appium can be run through the command line but we’re going to use the desktop app here. This gives you the ability to record a session and capture elements for automated tests.

Once it’s running, all we have to do is click Start Server.

Ruby and RSpec

We will be using Ruby and RSpec to run our tests. At the top level of our project we need to add these lines to our Gemfile:

/Gemfile:

source 'https://www.rubygems.org'

gem 'appium_lib', '~> 11.2'
gem 'appium_lib_core', '~> 4.2'

Make sure Ruby is installed, then run:

$ gem install rspec
$ bundle install

We also need to configure RSpec to find the correct AVD and APK to test.

/spec/spec_settings.rb:

ANDROID_PACKAGE = 'io.appium.android.apis'
def android_caps {
  caps: {
    # These settings match the settings for your AVD. They can be found in the AVD Manager.
    platformName: 'Android',
    platformVersion: '11',
    deviceName: 'Pixel_3a_API_30_x86',
    #  This points to the apk you are testing
    app: './To-do_list.apk',
    automationName: 'UIAutomator2',
  },
  appium_lib: {
    wait: 60
  }
}
end

Finally we need to create our test. Since we don’t know the elements yet we can start with a blank template.

/spec/TaskCRUD:

require 'spec_settings'
require 'appium_lib'

describe 'Tests basic CRUD functions of Task application' do

  before(:all) do
    @driver = Appium::Driver.new(android_caps, true).start_driver
  end

  after(:all) do
    @driver&.quit
  end

  it '...' do

  end
end

Putting it all together

Let’s boot it up and make sure everything is running as expected.

Run an AVD from Android Studio
Start the Appium Server
Run rspec in the project root

Even though there is no test written it should still run and pass the template test. Running it the first time will save the APK into the AVD virtual memory. We can now access the app on the AVD emulator and record tests.

Recording a test with Inspector

Open the Appium window that has the server running and click Start Inspector Session:

Under Attach to Session... you will see a dropdown containing the RSpec test we just tried to run. If it’s not here try running rspec again. Select this and click the Attach to Session button.

We are now connected to the Android Emulator via the Inspector. We can click on elements to see their properties and interact with them.

If we click the top record button it will save our actions and allow us to import them into a test.

Running a test

Let’s take what we got from the Inspector and populate our template test.

/spec/TaskCRUD:

require 'spec_settings'
require 'appium_lib'

describe 'Tests basic CRUD functions of Task application' do

  before(:all) do
    @driver = Appium::Driver.new(android_caps, true).start_driver
  end

  after(:all) do
    @driver&.quit
  end

  it 'creates a task and verifies its name' do
   el1 = @driver.find_elements(:id, "todolist.scheduleplanner.dailyplanner.todo.reminders:id/zk")
    el1.click
    el2 = @driver.find_elements(:id, "todolist.scheduleplanner.dailyplanner.todo.reminders:id/xd")
    el2.click
    el3 = @driver.find_elements(:id, "todolist.scheduleplanner.dailyplanner.todo.reminders:id/wt")
    el3.send_keys "task_1"
    el4 = @driver.find_elements(:id, "todolist.scheduleplanner.dailyplanner.todo.reminders:id/wr")
    el4.click
    el5 = @driver.find_elements(:xpath, "/hierarchy/android.widget.FrameLayout/android.widget.LinearLayout/androidx.recyclerview.widget.RecyclerView/android.widget.LinearLayout[3]/android.widget.TextView")
    el5.click
    el6 = @driver.find_elements(:id, "todolist.scheduleplanner.dailyplanner.todo.reminders:id/wo")
    el6.click
    el7 = @driver.find_elements(:xpath, "/hierarchy/android.widget.FrameLayout/android.widget.LinearLayout/android.widget.FrameLayout/android.widget.LinearLayout/android.widget.FrameLayout/android.widget.RelativeLayout/androidx.recyclerview.widget.RecyclerView")
    el7.click
    el8 = @driver.find_elements(:id, "todolist.scheduleplanner.dailyplanner.todo.reminders:id/xl")
    expect(el8.text).to eql 'Test-text-1'
  end
end

If we run it with the rspec command we can watch the test in progress on the AVD and then we receive a success message!

What’s next?

Additional tests

Tests should be written to cover as many aspects of the app as possible. The main focus should be on parts of the app that don’t change very often. Tests written for something in progress or that is due for a facelift will need to be rewritten when the time comes.

Test with other devices

An app can look perfect on a Galaxy S20 but look awful on a Pixel 5. That’s why it’s important to try many different AVD versions for your app. Android allows you to create many phone types that run many different firmware versions.

CI/CD integration

Manual testing is great but nothing beats automation. These tests should ideally be integrated into a continuous integration and continuous delivery (CI/CD) platform. This way each build will be automatically vetted for bugs.

For more info, check out this guide for integrations with CircleCI.

Mobile Device and Application Management (MAM vs. MDM)

2017-12-20T00:00:00+00:00

Businesses of all sizes have been increasingly using mobile devices for all kinds of activities. Some of these activities are pretty common, like being able to read and respond to work email and manage work calendars. On the other hand, some companies are using mobile devices for more specific niche activities like checking in customers, using device cameras to read barcodes and UPC stickers, or even temporarily storing sensitive business related data.

As a result of the proliferation of mobile devices for work use, corporations and smaller businesses are finding the need the exhibit finer control over how their employees and customers use their devices. This is where mobile device management (MDM) and mobile application management (MAM) really shine and help solve many of these types of problems.

What is MDM?

Mobile device management (MDM) is a software solution that allows organizations to manage the maintenance, deployment, and configuration of mobile devices that are issued to members of the organization. All of this magic tends to be done via a store or portal application that users download onto their devices.

The app begins an enrollment process when the user enters their credentials that the organization previously issued to the user (usually the user’s email and password). After the device is enrolled, the user gets prompted to accept if the device should be managed as a work device. After the enrollment completes, the store app can push configuration, some device level policies for enforcement, and any required applications.

Some of the useful things you can do with MDM:

Install apps autonomously: Some corporations have their own suite of mobile applications that they require all employees to use. MDM allows organizations to push down required apps to a device. When a newer app is available, the new app gets pushed down to devices automatically. This makes it easier to deploy apps to all employees and ensure users have the latest apps on their devices.
Configuration: Push down sensitive or complex network configuration. Organizations can push down WiFi and VPN configurations. This is especially useful for allowing users to connect to work networks that have hidden SSIDs. You can also enforce use of PIN, and other security features.
Policy Enforcement: Set global policies that can affect all or a portion of devices; Prevent third party apps from being installed.
Auditing: See what devices have done, what versions of apps are deployed, and how a device has used your network.
Scale up: MDM scales up nicely for thousands of devices. If you find yourself updating devices one at time then you definitely need an MDM solution.

What is MAM?

Mobile application management (MAM) is a technology that primarily focuses on enforcing policies on mobile applications. To be able to have this finer level control over applications, an organization needs to wrap the application.

Wrapping is the process of injecting code into an application despite not even having access to the application’s source code. The injected code can then listen for events that are related to certain policies. For example, if an application is not allowed to open the camera application, then the injected code will listen for the corresponding events that will bring up the camera.

How this is done is different on Android and iOS because the platforms handle these kinds things quite differently.

Some of the useful things you can do with MDM:

Block certain applications from being able to handle certain types of data.
Enforce filesystem level encryption even if the application was never designed to use encryption.
Detect if an application is running on a rooted device and kill the app if desired.
Force an application to use a VPN all the time or when outside of the allowed networks.
Block devices from accessing the Internet or the local loop-back addresses (i.e. 127.0.0.1 or ::1).

What are some MAM and MDM vendors?

Some of the major vendors of MAM and MDM solutions are:

XenMobile and AirWatch are robust and mature MAM and MDM solutions. With respect to features, both offer single-sign on (SSO), a suite of productivity apps (email, browser, etc.), and mobile content management.

XenMobile’s email client is similar in capabilities to AirWatch’s email client. However, AirWatch also allows management of the native email clients on Android and iOS which tends to be buggier. Furthermore, AirWatch’s productivity apps may require additional VMware product licenses to unlock some of these capabilities.

In terms of the administration web app, XenMobile is a bit more complicated than AirWatch and may require a few tech support calls to get configured just right. Both products require mobile apps to be wrapped with a wrapping utility before they can be uploaded to the management console. And both offer SDKs that allow organizations to build apps that have MAM capabilities without needing to be wrapped.

Also, both products have great VPN capabilities. If your organization is already using Netscaler than it might make more sense to use XenMobile. Netscaler appears to be more feature-rich compared to VMware Tunnel, but Netscaler is also very hard to configure. With respect to price, AirWatch tends to be cheaper for smaller organizations than XenMobile because XenMobile offers fixed price tiers where as AirWatch has a per-device pricing model.

MobileIron is a bit less developed than XenMobile and AirWatch. However, this also makes it a bit more simpler and easier to administrate. In addition, MobileIron lacks a managed email application compared to XenMobile and AirWatch.

Need Help?

End Point has tons of experience with MAM and MDM. If your organization needs expert-level consulting then we are available to help you!

Reconciling Android source code

2017-12-19T00:00:00+00:00

Recently, a client came to us with an interesting problem. They needed some changes made to an internal-use Android app that had been created for them by another company, but they didn’t have up-to-date source code for the app, and they had no way of getting it. They gave us an old archive of source code, a more recent working build of the app, and asked us to figure it out.

The working version of the app they sent us was built in early 2016, and the app was compiled for Android SDK version 22, which is 5.1 Lollipop. It came out in March 2015, so it was a year old even when the app was created, and the code was using lots of features which have since been deprecated.

After putting this source code in a Git repository, I started by building the app from the source they’d sent and comparing it to the working version. It looked mostly the same, but a couple of features were broken. At the suggestion of a coworker, I used BytecodeViewer to decompile the APK and took a look around.

It was a little while before I was able to find any differences between the source we had and this decompiled code, but I did find a few logic differences. The source was also using a few old APIs that needed to be updated. With the needed changes made to the source code, I soon had a working build of the app that matched the functionality of the built APK we had.

This wasn’t the only thing wrong with the app, however. Another hurdle in picking up this project from its previous developers showed up when I had to fix a few odd problems reported by the users. One problem was on an information screen listing attributes of items. An example:

The “Quantity” field worked just fine for any non-zero value, but if it was 0, the app was displaying 16 instead. This turned out to be very simple to fix. Below is the layout code involved:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:text="16"
    android:textColor="@color/background_black"
    android:id="@+id/txt_info_quantity" />

The default text of that field was, likely as a placeholder, set to 16, and it wasn’t being overwritten when the given value was 0. So, all I had to do was replace it with 0, since it would be overwritten anytime there was a nonzero value.

This was a good reminder to somehow keep track of placeholders like this, for example, putting a todo comment or something similar, so bugs like this can be caught in code reviews.

Figuring out how to reconcile the source and binary of this app seemed like a daunting task, but it turned out to be very doable, and was a very interesting project.

Simplifying mobile development with Ionic Framework

2014-11-06T00:00:00+00:00

My high school math teacher used to say that mathematicians are the laziest people on Earth. Why? Because they always look for clever ways to simplify their work.

If you stop and think about it, all that technology is, is just simplification. It’s taking the infinitely complex world and turning it into something sterile and simple. It’s all about producing simple models with a limited number of elements and processes.

Today I’d like to walk you through creation of a mobile app that could be used on iOS, Android or Windows Phone. We’ll use a very cool set of technologies that allow us to switch from using multiple languages and frameworks (Objective-C for iOS, Java for Android and C# for Windows Phone) to just using HTML, CSS and JavaScript.

Let’s start turning complex into simple!

PhoneGap and Ionic Framework

Creating the project

In order to be able to start playing along, you need to get yourself a set of toys. Assuming that you’ve got NodeJS and Npm installed already, all you have to do is:

$ npm install -g cordova ionic

Now you should be able to create the project’s scaffold. We’ll be creating a simple app that will list all the latest cartoons from the xkcd blog. Let’s call it Cartoonic.

Ionic comes with a handy tool called ‘ionic’. It allows you to create a new project as well as perform some automated project-structure-management tasks. The project creation task accepts a ‘skeleton’ name that drives an initial layout of the app. Possible options are: ‘blank’, ‘tabs’ and ‘sidemenu’.

We’ll be creating an app from scratch so:

$ ionic start Cartoonic blank

The framework gives you an option of whether you want to use Sass or just plain old Css. To turn Sass on for the project run:

$ cd Cartoonic && ionic setup sass

All went well, but now let’s see if it works well. For this, Ionic gives you an ability to test your app in the browser, as if it were a screen of your mobile device. To run the app in the browser now:

$ ionic serve

Working with the app layout

We need to let all users know what a cool name we’ve chosen for our app. The default one provided by the scaffold wouldn’t work well. Also we’d like the color of the header to be blue instead of the default white.

In order to do so you can take a look at the CSS documentation for different aspects of the UI:

https://ionicframework.com/docs/components/#header

--- a/www/index.html
+++ b/www/index.html
@@ -21,8 +21,8 @@
     <ion-pane>
-      <ion-header-bar class="bar-stable">
-        <h1 class="title">Ionic Blank Starter</h1>
+      <ion-header-bar class="bar-positive">
+        <h1 class="title">Cartoonic</h1>
       </ion-header-bar>
       <ion-content>
       </ion-content>

So far so good, now let’s play with the list of cartoons:

--- a/scss/ionic.app.scss
+++ b/scss/ionic.app.scss
+.cartoon {
+  text-align: center;
+  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+  width: 96%;
+  margin-left: 2%;
+  margin-top: 2%;
+  margin-bottom: 2%;
+
+  img {
+    width: 90%;
+  }
+}

--- a/www/index.html
+++ b/www/index.html
+        <ion-list>
+          <ion-item class="item-divider">Where Do Birds Go</ion-item>
+          <ion-item class="cartoon">
+            <img src="http://imgs.xkcd.com/comics/where_do_birds_go.png" alt="">
+          </ion-item>
+          <ion-item class="item-divider">Lightsaber</ion-item>
+          <ion-item class="cartoon">
+            <img src="http://imgs.xkcd.com/comics/lightsaber.png" alt="">
+          </ion-item>
+        </ion-list>
       </ion-content>

Alright, we’ve got the list that’s looking quite nice. The data behind is static, but for now we just wanted to make sure the look&feel is good.

Using AngularJS to manage the app

Ionic is built around the fantastic AngularJS framework. That’s our means of developing the logic behind. We need to make the list of cartoons use real data from the Xckd blog RSS feed. We also need to enable tapping on images to see the picture in the browser (so it can be zoomed in).

Let’s start with making the UI use dynamically bound data that we can operate on with JavaScript. In order to do so, we need to add a controller for our view. We also need to specify the data binding between the markup we’ve created previously and the variable in the controller that we intend to use as our data store.

--- a/www/index.html
+++ b/www/index.html
     <script src="js/app.js"></script>
+    <script src="js/controllers.js"></script>
   </head>
-  <body ng-app="starter">
+  <body ng-app="starter" ng-controller="CartoonsCtrl">

(...)

       <ion-content>
         <ion-list>
-          <ion-item class="item-divider">Where Do Birds Go</ion-item>
-          <ion-item class="cartoon">
-            <img src="http://imgs.xkcd.com/comics/where_do_birds_go.png" alt="">
-          </ion-item>
-          <ion-item class="item-divider">Lightsaber</ion-item>
-          <ion-item class="cartoon">
-            <img src="http://imgs.xkcd.com/comics/lightsaber.png" alt="">
+          <ion-item class="item-divider" ng-repeat-start="cartoon in cartoons">{{ cartoon.title }}</ion-item>
+          <ion-item class="cartoon" ng-repeat-end>
+            <img ng-src="{{ cartoon.href }}" alt="">
           </ion-item>
         </ion-list>
       </ion-content>

--- a/www/js/app.js
+++ b/www/js/app.js
-angular.module('starter', ['ionic'])
+angular.module('starter', ['ionic', 'starter.controllers'])

--- /dev/null
+++ b/www/js/controllers.js
+angular.module('starter.controllers', [])
+
+.controller('CartoonsCtrl', function($scope) {
+  $scope.cartoons = [
+    {
+      href: "http://imgs.xkcd.com/comics/where_do_birds_go.png",
+      id: 1434,
+      title: "Where Do Birds Go"
+    },
+    {
+      href: "http://imgs.xkcd.com/comics/lightsaber.png",
+      id: 1433,
+      title: "Lightsaber"
+    }
+  ];
+});

You can notice that “ng-controller” directive has been added to the body element. It points at the newly created controller, which we’re loading with a script tag and making available to the rest of the app by including its module (starter.controllers) in the ‘starter’ module’s dependencies list.

Let’s implement opening the picture upon the tap:

--- a/www/index.html
+++ b/www/index.html
       <ion-content>
         <ion-list>
           <ion-item class="item-divider" ng-repeat-start="cartoon in cartoons">{{ cartoon.title }}</ion-item>
-          <ion-item class="cartoon" ng-repeat-end>
+          <ion-item class="cartoon" ng-repeat-end ng-click="openCartoon(cartoon)">
             <img ng-src="{{ cartoon.href }}" alt="">
           </ion-item>
         </ion-list>

--- a/www/js/controllers.js
+++ b/www/js/controllers.js
@@ -13,4 +13,8 @@ angular.module('starter.controllers', [])
       title: "Lightsaber"
     }
   ];
+
+  $scope.openCartoon = function(cartoon) {
+    window.open(cartoon.href, '_blank', 'location=no');
+  };
 });

That was simple wasn’t it? We’ve just added the ng-click directive making the click/tap event bound to the openCartoon function from the scope. This function in turn is using window.open passing ‘_blank’ as target. Et voilà!

Now, let’s implement loading images from the real feed:

--- a/www/index.html
+++ b/www/index.html
     <script src="cordova.js"></script>
+    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
+    <script type="text/javascript">
+      google.load("feeds", "1");
+    </script>

     <!-- your app's js -->
     <script src="js/app.js"></script>
     <script src="js/controllers.js"></script>
+    <script src="js/services.js"></script>
   </head>
   <body ng-app="starter" ng-controller="CartoonsCtrl">

--- a/www/js/app.js
+++ b/www/js/app.js
-angular.module('starter', ['ionic', 'starter.controllers'])
+angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

--- a/www/js/controllers.js
+++ b/www/js/controllers.js
-angular.module('starter.controllers', [])
+angular.module('starter.controllers', ['starter.services'])

-.controller('CartoonsCtrl', function($scope) {
-  $scope.cartoons = [
-    {
-      href: "http://imgs.xkcd.com/comics/where_do_birds_go.png",
-      id: 1434,
-      title: "Where Do Birds Go"
-    },
-    {
-      href: "http://imgs.xkcd.com/comics/lightsaber.png",
-      id: 1433,
-      title: "Lightsaber"
-    }
-  ];
+.controller('CartoonsCtrl', function($scope, cartoons) {
+  $scope.cartoons = [];

   $scope.openCartoon = function(cartoon) {
     window.open(cartoon.href, '_blank', 'location=no');
   };
+
+  $scope.$watch(function() {
+    return cartoons.list;
+  }, function(list) {
+    $scope.cartoons = list;
+  });
 });

--- /dev/null
+++ b/www/js/services.js
@@ -0,0 +1,26 @@
+angular.module('starter.services', [])
+
+.factory('cartoons', function($rootScope) {
+  var self = {
+    list: [],
+    url: "http://xkcd.com/rss.xml",
+
+    fetch: function() {
+      var feed = new google.feeds.Feed(self.url);
+      feed.load(function(result) {
+        $rootScope.$apply(function() {
+          if(result.status.code == 200) {
+            self.list = result.feed.entries.map(function(entry) {
+              return {
+                href: entry.content.match(/src="[^"]*/g)[0].substring(5, 100),
+                title: entry.title
+              }
+            });
+          }
+        });
+      });
+    }
+  };
+  self.fetch();
+  return self;
+});

Okay, a couple of comments here. You may wonder why have we loaded Google APIs? That’s because if we were to try to load the xml that comes from the blog’s feed, we would inevitably fail because of the “Same Origin Policy”. Basically, the Ajax request would not complete successfully and there’s nothing we can do locally about it.

Luckily, Google has created a service we can use as a middleman between our in-browser JavaScript code and blog’s web server. Long story made short: when you load the feed with Google’s Feed API - the data’s there and it’s also already parsed.

We’re also adding a custom service here. The service fetches the entries upon its initialization. And because the controller’s depending on this service - we’re guaranteed to get the data as soon as the controller is initialized. The controller is also using the $watch function to make sure it has the most recent copy of the entries list.

References:

Android Developer Tools via Google Chrome

2014-06-11T00:00:00+00:00

Recently I was working on a website on my Android phone, and I found myself needing Chrome’s Developer Tools. However, Developer Tools are not included in the Android version of Chrome for many reasons, including lack of screen real estate.

So, I looked around, and I found a solution: using a USB cable and ADB (Android Debug Bridge), you can do debugging on an Android device with Chrome’s Developer Tools from your desktop.

To show you exactly what I mean, here’s a short video demonstrating this:

So, how does one work this magic? There are several ways, but I’ll talk about the one that I used. For this method, you need to have Google Chrome version 31 or higher installed on both your Android device and your development machine.

First, you have to enable Android debugging on your device. From android.com:

On most devices running Android 3.2 or older, you can find the option under Settings > Applications > Development.

On Android 4.0 and newer, it’s in Settings > Developer options.

Note: On Android 4.2 and newer, Developer options is hidden by default. To make it available, go to Settings > About phone and tap Build number seven times. Return to the previous screen to find Developer options.

Next, connect your device with a USB cable and, on your development machine, go to about:inspect and check Discover USB Devices. After a second or two, your device should show up like this:

To open Dev Tools for a tab, just click “inspect” below it. The buttons next to “inspect” only appear for tabs open in Chrome, but you can open Developer Tools for any app that uses WebView, whether it’s in Chrome or not.

And there you go! Fully featured Chrome Developer Tools for your Android device on your development machine. More information, including a way to do this with earlier versions of Chrome, can be found at the Android Developer site.

CSS Conf US 2014 — Part Two

2014-06-04T00:00:00+00:00

More Thoughts on Getting Vertical, Testing and Icon Fonts

Without further ado I’ve written up another batch of my notes about three more great talks at CSS Conf US in Amelia Island, Florida last week.

Antoine Butler — Embrace the Vertical

Antoine shared his observation that vertical media queries are available to CSS developers but not often used. With the vast array of devices accessing the web today vertical media queries can be a useful tool to adapt your content effectively. Antoine walked us through a couple examples of how he applied this technique in a couple of his projects. The first was a prototype of WikiPedia. While they have gone with a separated mobile site (e.g. en.m.wikipedia.org/), he started with the HTML from the desktop site and applied some vertical media queries to make the content much more digestible. Take a look at his code to see how it works.

The second example Antoine demonstrated was for the navigation at Volkswagen. The client wanted to display an unlimited number of items in the secondary navigation. Once again Antoine applied vertical media queries to handle the varying number of navigation elements based on the device height. Check out his adaptive sticky vertical navigation code for a closer look.

Slides from this talk are available here: Embrace the Vertical.

Christophe Burgmer — If your CSS is happy and you know it…

This was a really interesting talk about testing your CSS visually with a tool Christophe has been developing called CSS Critic. Christophe covered some of the existing CSS/HTML testing tools like Selenium and found that while they worked well they didn’t meet his needs entirely. He wanted a way to visually diff the changes that were made and to be able to write tests for his UI code. For example, when the “accepted” version of the page changed visually, he wanted to be notified and decide whether or not to accept the proposed change.

Christophe demoed the tool for us and it was really cool to see a visual diff in the browser. For a change that was introduced, screenshots of the old, new and difference were displayed. The user then has the ability to accept / OK the change or reject it. You can view the tool in action on the CSS Critic site. Under the hood, CSS Critic uses some other nifty projects including Wraith, PhantomCSS, CasperJS and Hardy. Christophe also mentioned csste.st as a site which curates information on all of these topics and projects.

Slides from this talk are available here: If you CSS is happy and you know it…

Zach Leatherman — Bulletproof Icon Fonts

Zach wrote a great article on Bulletproof Accessible Icon Fonts earlier this year and his talk was along similar lines. He chronicled some of the challenges and pitfalls worth knowing about in order to support icon fonts in your sites and applications. Browser support varies a great deal and Zach cited John Holt Ripley’s Unify unicode support charts as a helpful reference. He works on the a-font-garde project which documents best (er. bulletproof) practices for working with icon fonts today.

Stay Tuned

Watch for one more post later this week with the last batch of talks from the conf!

Creating custom button graphics in Android

2013-06-07T00:00:00+00:00

In the Android timesheet app I’m working on, I have a scrollable layout of RadioButtons for the user to pick how much time they’ve spent on a project (see my earlier blog post about it), and for that I use custom button graphics to make it look nice. So, I’m going to show you how to do that with 9-patch PNGs and selector XML.

First, what’s a 9-patch PNG? A 9-patch is a special PNG image where you specify regions that can be stretched to make room for text. Android will automatically resize a 9-patch to best fit whatever contents you give it. The tool you need to create a 9-patch image is included in the Android SDK Tools, so download that if you haven’t already.

More information about 9-patch images can be found here.

Okay! I’ve got custom button graphics (72x72 for HDPI screens), drawn in the Gimp and saved in my project’s res/drawable-hdpi/ folder as button_selected.png and button_unselected.png:

To convert it to a 9-patch, browse to the tools/ directory of the Android SDK and run draw9patch. This will open a window with a graphical editor on the left, and a button preview on the right. The editor window is for specifying which parts of the image will be stretched. The top and left edges show this, and the right and bottom edges show which parts of the image can contain the text you put in the button.

When you’ve finished with draw9patch, save the images in the same place, but with .9.png as the file extension (in this case, res/drawable-hdpi/button_selected.png will be res/drawable-hdpi/button_selected.9.png). Make sure to delete the old images, because Android R (the generated resource class) doesn’t use file extensions, so it can’t tell the difference between our two image types.

Now, let’s try making a button with our custom graphics. Add a Button to your Activity XML, like so:

res/layout/activity_main.xml

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   tools:context=".MainActivity" >
   <Button
     android:id="@+id/button1"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:background="@drawable/button_selected"
     android:onClick="doStuff"
     android:text="@string/hello_world" />
 </RelativeLayout>

Now, when we run it, it looks like this:

So we have our custom background working, but it’s the same (red) whether or not you’re pushing it. To use different images for different states, we can use selector XML. With ours, we just have two images, so it’s simple:

res/drawable/button_selector.xml

 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android" >
   <!-- When selected, use this image -->
   <item android:drawable="@drawable/button_selected"
     android:state_pressed="true" />
   <!-- When not selected, use this image -->
   <item android:drawable="@drawable/button_unselected"
     android:state_pressed="false" />
 </selector>

Now, instead of pointing our Button at an image directly, we can reference the XML instead:

res/layout/activity_main.xml

 <font color="#969696">android:layout_height="wrap_content"</font>
 android:background="@drawable/button_selector"
 <font color="#969696">android:onClick="doStuff"</font>

And when we run it, it looks great (assuming you like bright red)!

This project is on GitHub, if you’d like to download it and try some stuff.

Dynamically adding custom radio buttons in Android

2013-05-09T00:00:00+00:00

I’ve been writing a timesheet tracking app for End Point. In working on various features of this app, I’ve had more than a few problems to work through, since this project is one of my first on Android and I’ve never used many of the Android features that I’m now using. One particularly fun bit was setting up a scrollable list of radio buttons with numbers from 0 – 23 (no, we don’t often have people working 23 hours on a project in a day, but just in case!) when the user is creating an entry, as a prettier and more backward-compatible alternative to using a number picker to indicate how many hours were spent on this particular job.

In Android, view layouts are usually defined in XML like this:

layout/activity_hour_picker.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent" >
  <Button android:id="@+id/button"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:onClick="doStuff"
    android:text="Hello World!" />
</RelativeLayout>

Simple. But, as you can imagine, not so fun when you’re adding a list of 24 buttons—so, I decided to add them dynamically in the code. First, though, a ScrollView and RadioGroup (ScrollView only allows one child) need to be defined in the XML, no point in doing that programmatically. Let’s add those:

layout/activity_hour_picker.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent" >
   <HorizontalScrollView
        android:id="@+id/hour_scroll_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fillViewport="true"
        android:scrollbars="none" >
        <RadioGroup
            android:id="@+id/hour_radio_group"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal">
            // This is where our buttons will be
        </RadioGroup>
    </HorizontalScrollView>
</RelativeLayout>

Okay. So, now, in our Activity, we need to override onCreate if we haven’t already and add the following code:

src/com/example/HourPickerActivity.java

@Override
public void onCreate(Bundle icicle) {
  super.onCreate(icicle);
  setContentView(R.layout.activity_hour_picker);  // This adds the views from the XML we wrote earlier
  ViewGroup hourButtonLayout = (ViewGroup) findViewById(R.id.hour_radio_group);  // This is the id of the RadioGroup we defined
  for (int i = 0; i < RANGE_HOURS; i++) {
    RadioButton button = new RadioButton(this);
    button.setId(i);
    button.setText(Integer.toString(i));
    button.setChecked(i == currentHours); // Only select button with same index as currently selected number of hours
    button.setBackgroundResource(R.drawable.item_selector); // This is a custom button drawable, defined in XML
    hourButtonLayout.addView(button);
  }
}

And this is what we get:

It scrolls horizontally like we want, but there’s a problem—we don’t want the default radio button selector showing up, since we’ve already got custom button graphics showing. And we can’t forget that we’re still missing the code to make everything within the RadioGroup work properly—In other words, the buttons won’t do anything when a user clicks them. So, let’s add a listener to each button as it’s created:

src/com/example/HourPickerActivity.java

<font color="#969696">button.setId(i);</font>
button.setBackgroundResource(R.drawable.item_selector); // This is a custom button drawable, defined in XML
button.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View view) {
            ((RadioGroup) view.getParent()).check(view.getId());
            currentHours = view.getId();
        }
    });
<font color="#969696">button.setText(Integer.toString(i));</font>

So now the currently selected value is ready in our static variable currentHours for whenever the user is finished. Now we need to get rid of the standard radio button graphics. The solution I found is to use selector XML, with just one item that points to a transparent drawable:

drawable/null_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
  <item android:drawable="@android:color/transparent" />
</selector>

Set each button to use it (and to center the text) like this (R.drawable.null_selector is our selector XML):

src/com/example/HourPickerActivity.java

<font color="#969696">button.setText(Integer.toString(i));</font>
button.setGravity(Gravity.CENTER);
button.setButtonDrawable(R.drawable.null_selector);
<font color="#969696">button.setChecked(i == currentHours); // Only select button with same index as currently selected number of hours  </font>

Now, let’s see how this all has pulled together.

There—that looks much better! And it works great.

API gaps: an Android MediaPlayer example

2011-03-02T00:00:00+00:00

Many programming library APIs come with several levels of functionality, including the low-level but flexible way, and the high-level and simpler but limited way. I recently came across a textbook case of this in Android’s Java audio API, in the MediaPlayer class.

We needed to play one of several custom Ogg Vorbis audio files in the Locate Express Android app to alert the user to various situations.

Getting this going initially was fairly straightforward:

In this simplified version of our PlaySound class we pass in the app resource ID of the sound file, and using the MediaPlayer.create() method is about as simple as can be.

We keep a map of playing sound files so that external events can stop all playing sounds at once in a single call.

We set an OnCompletionListener to clean up after ourselves if the sound plays to its end without interruption.

Everything worked fine. Except for a pesky volume problem in real-world use. MediaPlayer uses Android’s default audio stream, which seemed to be STREAM_MUSIC. That plays the audio files fine, but has an interesting consequence during the actual playing: You can’t turn the volume down or up because the volume control outside of any specific media-playing contexts affects the STREAM_RING volume, not the one we’re playing on. Practically speaking, that’s a big problem because if the music stream was turned up all the way and the alert goes off at full volume in a public place, you have no way to turn it down! (Not a hypothetical situation, as you may guess …)

Switching to STREAM_RING would be the obvious and hopefully simple thing to do, but calling the MediaPlayer.setAudioStreamType() method must be done before the MediaPlayer state machine enters the prepared state, which the MediaPlayer.create() does automatically. The convenience is our undoing!

Switching over to the low-level way of doing things turns out to be a bit of a pain because:

There’s no interface to pass an Android resource ID to one of the setDataSource() methods. Instead, we have to use a file path, file descriptor, or URI.
The easiest of those options seemed to be a URI, and doing a little research, the format comes to light: android.resource://package.name/resource_id
We have to handle IOException which wasn’t throwable using the higher-level MediaPlayer.create() invocation.

Putting it all together, we end up with:

It’s not so hard, but it’s not the one-line addition of MediaPlayer.setAudioStreamType() that I expected. This is an example of how the API lacking a MediaPlayer.setDataSource(Context, int) for the resource ID makes a simple change a lot more painful than it really needs to be—especially since the URI variation could easily be handled behind the scenes by MediaPlayer.

I later took a look at the Android MediaPlayer class source to see how the create() method does its work:

Instead of creating a URI, the authors chose to go the file descriptor route, and they check for exceptions just like I had to. It seems more cumbersome to have to open the file, get the descriptor, and manually call getStartOffset() and getLength() in the call to setDataSource, but perhaps there’s some benefit there.

This gap between low-level and high-level interfaces is another small lesson I’ll remember both when using and creating APIs.

There’s one final unanswered question I had earlier: Was STREAM_MUSIC really the default output stream? Empirically that seemed to be the case, but I didn’t see it stated explicitly anywhere in the documentation. To find out for sure we have to delve into the native C++ code that backs MediaPlayer, in libmedia/mediaplayer.cpp, and sure enough, in the constructor the default is set:

mStreamType = AudioSystem::MUSIC;

My experience with Android so far has been that it’s well documented, but it’s been very nice to be able to read the source and see how the core libraries are implemented when needed.

DROID 2 review

2011-01-24T00:00:00+00:00

I got a Motorola DROID 2 phone a couple of months ago and have assembled here my notes about how it has worked out so far. First, some background.

This is my second Android phone. My first was the Google Ion, basically the same as the HTC Magic. That was running standard Android 1.5 (Cupcake), while the DROID 2 runs Android 2.2 (Froyo) tweaked somewhat by Motorola. I’ve used several other Android phones belonging to friends and relatives.

Overall I like the Android operating system fairly well. Like everything, it can be improved. It’s been advancing at a fairly quick pace. It’s mostly free software. Too many phones are locked down and have to be broken into to change the operating system, but Android’s still a freer computing environment than most phones have and I hope the situation will improve over time.

I take for granted much of Android’s feature set: The excellent system-wide notification bar that many apps hook into and which is always easy to get to. The solid multitasking. Automatic screen adjustment for using the phone in landscape vs. portrait mode. The ability to mount the normal filesystem on the SD card from another computer via USB or by removing the SD card. The freedom to run any applications I want, downloaded from wherever, not just the Android Market.

For one of our clients, I’m currently developing an Android application in Java that uses geolocation, JSON web services, and Urban Airship’s AirMail Push for push notifications. So I’m using the phone both as my main mobile phone and as an app developer.

Keyboard

This is the first phone I’ve had with a full slide-out QWERTY keyboard. I wasn’t sure if I’d use it often or just stick with the touchscreen keyboard. So far I use the real keyboard most of the time. But it’s nice to be able to use either the hard keyboard or touchscreen keyboard, whichever’s more convenient.

I like the keyboard a lot, especially that its rows are offset like a normal keyboard and not a straight aligned grid:

The real keyboard makes using ssh (via the ConnectBot app) on the phone much easier than with the touchscreen keyboard, because the real keyboard doesn’t use up any screen real estate.

The biggest annoyance for me has been the keyboard’s microphone key which launches the voice commands function. I don’t use voice commands, so this has never been what I’ve wanted and is highly annoying when accidentally pressed.

Third-party alternative touchscreen keyboards for European languages, Hebrew, Arabic, and others work pretty well too.

Touchscreen

I really miss having physical buttons for menu, home, back, and search, as I had on the HTC Magic:

On the DROID 2 they’re touchscreen buttons and it’s annoying and error-prone to have to look at the phone and carefully press one. Much better to have real buttons for those core functions used by all apps.

However, good riddance to the trackball.

The DROID 2 screen itself is higher resolution, bright, and responds well to touch, swipe, and multitouch, as you’d expect.

Battery

Battery life on the DROID 2 is not great, especially when using GPS heavily. But that’s a problem on most phones.

I later got the optional extended-life battery. It isn’t much bigger or heavier, and does add a lot more life to the phone. It wouldn’t be necessary if I weren’t doing heavy GPS & web service interaction with my own Android app under development.

Audio

The DROID 2 has a normal 1/8" stereo headphone jack, which is nice. The HTC Magic needed a special adapter to use normal headphones, which was a pain.

Audio playback is usually fine, though on a couple of occasions it’s stuttered, presumably while contending with other apps for CPU. Audio playback when the screen is off doesn’t drain the battery much at all.

Calling and Contacts

There have been a few isolated incidents, perhaps involving switching off Bluetooth, where I couldn’t turn down the call volume in the middle of the call. That could’ve been either a generic Android problem, or the Motorola Android build; I’m not sure.

I didn’t much like the special Motorola apps that shipped on the phone, but simply not using them has made them no problem.

An exception to that is the Contacts app that integrates with Facebook and Twitter. That’s a lot more helpful than I imagined it would be, though when you have many contacts it can sometime slow down on opening an individual contact, when I imagine it tries to fetch the latest details from social networks.

The in-call screen’s “Mute” button is small and way too close to the “End call” button:

That’s led to me accidentally hanging up during conference calls a couple of times. The stock open source Android call screen is arguably less pretty, but equally-sized buttons makes it easier to use:

Because I’m using Verizon for the first time with this phone, I’ve been introduced to the sad problem of not being able to use voice and data at the same time on CDMA. I used to laugh about that when I was using AT&T because it seemed silly. Now I find it really does get in the way fairly often.

The normal Skype app doesn’t allow using a Bluetooth headset or using the cell network for calls (in the US). The special Verizon Skype app burns voice minutes and won’t let you use wifi for calling (in the US). The combination of proprietary software plus controlling phone carriers is bad for users! Because of the limitations I use Skype mostly for text chat on my phone.

GPS

As I mentioned, the GPS uses a lot of battery. But it works well. The GPS on my HTC Magic sometimes took a very long time to get a location fix, but on the DROID 2 it’s fast and works very well. Given the location-aware app I’m working on, I’ve had more opportunity to notice this than I otherwise might have.

There was one funny problem with the GPS, though. Once when the battery got down to 5% or so, the GPS started to report hilariously wrong data to my app, and thus to the web service it reported to. For example, it reported every second that my phone, which was sitting on my nightstand, was traveling at 121 m/s (270 mph), and the point in latitude and longitude moved quickly. This continued even after I’d plugged the phone back in. I haven’t seen it happen since, but it was strange.

Useful apps

I don’t spend a lot of time trying out new apps, but I’ve found several to be very useful: K-9 Mail for multiple mail accounts (reviewed yesterday on Ars Technica), Yaaic (an IRC client), 3G Watchdog (bandwidth monitor), TweetsRide (Twitter client), Google Sky Map, and My Tracks. I haven’t found a great music player yet, but the built-in Android Music app and Winamp are both fine.

Security

I’ve long used crypto filesystems on desktop and laptop computers, and feel the lack on Android. A phone needs a solid cryptofs option more than normal computers even, and I hope that’ll be available soon.

The end (for now)

I’m probably forgetting lots of things, but this is already longer than I’d expected, so I’ll stop now and put any afterthoughts in the comments. In short, I like the phone, but it’s hard to avoid looking forward to a brighter future when it comes to mobile devices.

Appium: Automated Mobile Testing

Installation and setup for Linux

General

AVD Android emulator

Appium

Ruby and RSpec

Putting it all together

Recording a test with Inspector

Running a test

What’s next?

Additional tests

Test with other devices

CI/​CD integration

Mobile Device and Application Management (MAM vs. MDM)

What is MDM?

What is MAM?

What are some MAM and MDM vendors?

Need Help?

Reconciling Android source code

Simplifying mobile development with Ionic Framework

PhoneGap and Ionic Framework

Creating the project

Working with the app layout

Using AngularJS to manage the app

Android Developer Tools via Google Chrome

CSS Conf US 2014 — Part Two

More Thoughts on Getting Vertical, Testing and Icon Fonts

Antoine Butler — Embrace the Vertical

Christophe Burgmer — If your CSS is happy and you know it…

Zach Leatherman — Bulletproof Icon Fonts

Stay Tuned

Creating custom button graphics in Android

Dynamically adding custom radio buttons in Android

API gaps: an Android MediaPlayer example

DROID 2 review

Keyboard

Touchscreen

Battery

Audio

Calling and Contacts

GPS

Useful apps

Security

The end (for now)

CI/CD integration