cordova-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Aaron Charbonneau <>
Subject Cordova Screen Capture Plugin for Android
Date Tue, 12 Mar 2013 17:58:35 GMT
Greetings!  My name is Aaron Charbonneau, happy to be a new member of the
mailing list!

I have been developing a sceenshot plugin for Cordova to help facilitate
automation testing and debugging of Cordova apps, and I would love some
feedback on it.  Currently Cordova provides a bunch of native functions
that allow you to do some cool stuff, but not much functionality to test
the apps that make use of them.  Being able to take a capture of the screen
from within you app is a great way to automate testing or get additional
information for debugging an issue.  Since there is no
Javascript mechanism for taking screen captures the solution would have to
be native, which fits nicely into the "gap" that Cordova/Phonegap bridges.
 Any medium to large scale app can benefit greatly from automation testing
and any app can benefit from an extra debugging tool, and that is what I
hope this screenshot plugin can help achieve.

Currently the plugin offers 2 functions:

* Take a capture of the current view, write that capture to a .png file
with the specified file name and sub directory of the sdcard (fallback to
emulated sdcard in the case there isn't an sdcard mounted)
* Able to create a sub-screenshot with a specified rectangle in order to
block out ui elements that may be variable, and also save space.
* Can take captures of images/dom elements (including canvas) that are
lager than the actual screen size

* All the functionality of Capture()
* Perform a comparison between the captured image and a baseline image
located at the specified location in either the assets folder or the sdcard.
* User can specify per color channel tolerances as well as total pixel
tolerances to avoid false positives for the inevitable rendering
differences across devices.
* Optionally output a png file that contains the differences between the
actual and the baseline for debugging/triage purposes, two modes: binary
diff (all failing pixels appear as solid white) or the true differences
between pixels.

If you can spare some time, I would love it if you could take a look at the
api and parameters I have defined to make sure they adhere to Cordova
plugin best practices.  The most crucial part would be in the plugin itself
and captureAndCompare() are the two exposed functions)

I'm also interested to know you thoughts on it's usage.  I started with the
mobile-spec testing framework and put some quick rendering tests into the
Autotest section as a viable use case.  In order to get the WebView into
the state I wanted to capture, I had to implement a wait timer to allow the
view to update before taking the capture.  Once the wait function
completes, the capture can be taken and everything from there is callback
based.  I use the Jasmine waitsFor()/runs() blocks to make the tests run
synchronously.  For some validation testing I made a compare function in
Javascript to run against the native compare.  Turns out Java runs alot
faster than Javascript (surprise!) thus the native compare is about 2-5x
faster.  All in all the process is fairly quick, the full captureAndCompare
with 3 file io's takes about 233ms on a Nexus One, and ~100ms on a Nexus 10
(256x256 image size).

Anyways here is the usage:

And here's the JS wrapper for the plugin calls:

Thanks for your time, and I look forward to ANY feedback positive or


  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message