How to take a video of an Android device from shell

If you develop for Android you might want to be able to capture your screen to show a bug or the differences between two things and ask for suggestions.
So to do so we need adb installed and configured.

First of all make sure that adb sees your device:


adb devices

Then you can launch the recording session:


adb shell screenrecord /sdcard/android-video-capture.mp4

adb shell screenrecord --help
Usage: screenrecord [options] 

Android screenrecord v1.2.  Records the device's display to a .mp4 file.

Options:
--size WIDTHxHEIGHT
    Set the video size, e.g. "1280x720".  Default is the device's main
    display resolution (if supported), 1280x720 if not.  For best results,
    use a size supported by the AVC encoder.
--bit-rate RATE
    Set the video bit rate, in bits per second.  Value may be specified as
    bits or megabits, e.g. '4000000' is equivalent to '4M'.  Default 4Mbps.
--bugreport
    Add additional information, such as a timestamp overlay, that is helpful
    in videos captured to illustrate bugs.
--time-limit TIME
    Set the maximum recording time, in seconds.  Default / maximum is 180.
--verbose
    Display interesting information on stdout.
--help
    Show this message.

Recording continues until Ctrl-C is hit or the time limit is reached.

Forcing Chrome to use the GPU to improve performances on redraw

In Chrome for Android I am working with large images. What we want it is the ability for the user to resize the image properly in a smooth way. For small images this works quite fine, however when it comes to large images, for example images captured from device’s camera, this operation is not really smooth.

To force Chrome to use the GPU, all we need is a CSS transform property applied to the image, for example:


transform: translate3d(0, 0, 0);

This will improve drastically the perceived smoothness of the image while working with it. Even if the CSS transform property it is not going to change anything on how the image is displayed or rendered, it will force the GPU to take care of the rendering, making the transition much smoother.

Include an extra library from Maven into an Android Project

To include an extra dependency into an Android project we need to:

  1. Go to file and select “Project Structure”:
    Android studio file project structure
  2. Next step it is to select the app section and then the Dependencies tap.
    Open the app tap
  3. At this point we click on the plus sign at the bottom of the window and then we select add library dependency:
    Add library dependency
  4. The last step it is to add the dependency we’re looking for, in my case it is to include the apache commons, so I search for org.apache.commons.io and I select on the package I am interested to and click OK.
    Add external library dependency into project android studio

Converting a Maven Project to a Gradle one

Working with Android Studio means that we need to use gradle projects, however it might happen that some of our old projects were made in pure Java and with Maven, this is actually quite likely.
Converting a project from one format to another is though quite easy to be done through the command line and the built init plugin.
In particular this tool allows us to convert not just from Maven but also from grails, java and scala.
Anyway, to move from Maven to gradle we just need to:


cd project
gradle init --type pom

At this point we can import the project into Android Studio quite easily.

A simple test with Seledroid

So now that we know that Selenium is working as we expect (I am a newbie here), we can try adding Seledroid. If you haven’t used Selendroid before, I strongly recommend you to follow the initial setup guide, available here. Basically you will need to have JAVA_HOME and ANDROID_HOME variables correctly set up in your system.
Continue reading A simple test with Seledroid

Getting ready to write our first Selenium Test in IntelliJ

Before getting into using Seledroid, it is probably a good idea to see if my old understandings of Selenium still apply. I haven’t used it in ages, so as a first step I will configure an IntelliJ project using Selenium.
Continue reading Getting ready to write our first Selenium Test in IntelliJ

Mobile Testing in Android with selendroid

It is always a problem automating testing in the mobile world, because the technologies used in the desktop world are not capable of the same level of testing, therefore we are looking for technologies that will allow us to at least do some level of mobile testing.

Selendroid

seledroid-logoThe first tool we are going to try is Selendroid, which seems to be the standard tool when it comes to Android mobile testing.

Selendroid uses the JSON Wire protocol, ready for Selenium 3. It makes possible to test native, hybrid applications and the mobile web. In our scenario we’re interested to the last two. Also Selendroid supports simulated devices as well as real ones.

The most efficient way to listen for a resize

In Android when the keyboard shows up, the size of the window will change triggering a resize event on the window.
When the resize event would get fired on a mobile device?

  • When the keyboard shows up
  • When rotating the device
  • When the browser window shrinks because the user uses a multiwindow view

Now we want to listen to this event just once and then act, avoiding to do too much because it would impact on the frame-rate of our application. I could argue here that the keyboard component will only fire one window resize event however this cannot be guaranteed; In the Android market there are literally thousands of different keyboards and might be that one of them is going to fire the resize event more than once, causing difficult to debug behaviors once they get reported by a user.

Also another scenario would be that two resize events are quite close for example when the user does some operations it will hide and show the keyboard quite quickly, firing the event at least twice in few milliseconds.

We need to use setTimeout and clearTimeout in a clever way:


function actionOnResize (e) {
  // do stuff
  console.log('do something');
};
var action;
window.addEventListener('resize', function (e) {
  clearTimeout(action);
  action = setTimeout(function () {
    actionOnResize(e);
  }, 50);
}, false);

A perfect delay

Depending on the application specifications you need to find a good delay for this to fire accordingly. In my scenario a delay of 50ms has been what I needed for.

Chrome leaves the autocorrect underline when tapping on different elements in a content editable element

I found this weird bug in Chrome for Android: in a content editable, using a keyboard with autocorrect capabilities such as the Google Keyboard or SwyftKey etc, the marking of the current word, made with an underline is left behind when the user taps different elements.
Continue reading Chrome leaves the autocorrect underline when tapping on different elements in a content editable element