Automated Mobile Web Testing with Canoo Webtest – we’re impressed
Over the last couple of months we’ve started to use Canoo Webtest to functionally test our mobile web sites. We now use it for both product deployment cycles (we spin up a full version of bemokoLive and test a sample site prior to packaging up the platform) and site development.
What has particular impressed us about Canoo is the way we can rapidly create clean and succinct tests that address all of the functional aspect of a mobile web site that we can need to automatically test. There is a rich set of functions in Canoo to click around a site, interact with a page and test functionality and content of a page. We write all our scripts in Groovy which provides a language that is light on scaffolding syntax (i.e. code just what you want to do), allows us to dig into misc Java libraries as we choose and provides a functional language that is human readable (well to us techies).
For example, take the following test script:
package com.bemoko.webtest.live
import com.bemoko.commons.test.webtest.BemokoWebtest
import com.bemoko.commons.test.webtest.WebtestXmlParser
import com.bemoko.live.devices.data.conf.HeroDevices
import com.canoo.webtest.engine.StepFailedException
/**
* Test that welcome pages are rendered correctly to the hero devices
*/
class PagesTest extends BemokoWebtest {
void test() {
def parser=new WebtestXmlParser()
// (1) Iterate over HeroDevices
new HeroDevices().all.each { deviceData ->
webtest("PageTests : ${profile} : ${deviceData.id}") {
config(liveConfig) {
deviceData.evidence.each() {
header(name:it.key, value:it.value)
}
}
// (2) Invoke the welcome page and verify some of the content
invoke "/welcome/i",
description: "Index page : ${profile} : ${deviceData.id}"
verifyTitle "bemokoLive - i"
verifyLinkedContent
xpath:"/html/head/link[@rel='stylesheet']/@href",
accept:"text/css"
verifyLinkedContent
xpath:"//img/@src | //input[@type='image']/@src",
accept:"image/gif;image/png;image/jpeg"
// (3) Validate document using an XML parser
groovy {
parser.parseText(step.context.currentResponse
.webResponse.contentAsString)
}
}
}
}
}
The bemokoLive test suite provides a collections of devices that allow you to easily simulate requests from particular devices. The HeroDevices class, in the script above, provides a collection of around 10 devices that provide a representative coverage of different types of devices. We (1) iterate over this collection and pass in the evidence for the device, i.e. the HTTP headers, into the webtest configuration. We then (2) invoke a particular page, test its title and verify that the linked content is good. Finally (3) we validate the document against the DTD in the document – great for making sure nothing bad has slipped into the page.
Reports get generated with a full break down on the tests and any step failures along with a quick summary, for example the following screen shot shows the summary of test run of 431 tests which we ran against one of our customer sites. I’ve deliberately included a report with failures to make the summary a little more interesting:
There’s much more you can do with canoo and the Groovy scripting approach – take a read of automated testing on our bemoko wiki for some more pointers.
With this approach we can build up a robust set of scripts that verify our deliver and provide great foundations for our real device testing – no more burning time on real device testing dealing with functional issues that could have been caught earlier in development. This is also good black box test, so whether you’re using bemokoLive or a.n.other approach it’s equally applicable. If you’ve got a mobile web site that you want us to test, or help you get started to run this testing yourself just get in touch.
Posted in: mobile | No Comments »
Add Shadow and Border to Images with ImageMagick
We’ve started using a quick ImageMagick script to add shadows and borders to images. Useful for making screen shots stand out a little clearer on our blog and wiki.
For example, in a unix shell, create the function below (either by cutting and pasting the code into your shell window or adding to you shell init scripts) :
image-shadow () {
out=${1%.*}-shadow.${1#*.}
in=$1
echo "Converted file : $out"
if [ ! -z $2 ] ; then
convert $in -frame $2 $out
in=$out
fi
convert $in \( +clone -background black -shadow 60x5+10+10 \) \
+swap -background white -layers merge +repage $out
}
and then run
image-shadow myimage.png
to add a shadow to the image … or run
image-shadow myimage.png 6x6
to add a shadow and 6 pixel border.
Very simple to get images like …
Tweaking input mode on mobile web – dealing with device variation
Form input modes are an important design pattern when it comes to requesting information from a mobile user. If you want to collect numeric data, you can constrain the input mode of the users’ device so that only numbers can be entered – this both simplifies data entry for the user and reduces the validation issues.
One of the challenging things on mobile is that the input mode is implemented in a variety of ways – see input mode. Just tonight I created an example of how we can make it easy for a site developer to use this input mode feature across a wide variety of devices. I thought I’d share it with you as a great example of how powerful bemoko tweakers are.
As with all bemoko site development, we create sites in standard XHTML markup. There’s an attribute – called “inputmode” – that was added to XHTML Basic v1.1, but still has limited supported. Much more likely is that a device will support the WCSS style “-wap-input-format:'*N'” or the OpenWave “format” attribute. As a site developer you shouldn’t have to care – and bemoko can take the pain away.
A site developer can specify the input mode in an input element using the XHTML Basic v1.1 notation in a standard way, e.g.
<input name="digits" value="" type="text" inputmode="digits"/>
bemoko can (behind the scenes) apply the following tweaker to optimise the markup for the given device and generate the correct input mode controls in the markup:
class ImputModeTweaker extends AbstractTweakerPlugin {
void tweakMarkup(Node node) {
node.'**'.findAll { it.@inputmode == 'digits' }.each { tag ->
switch (platform.activeUser.device.inputModeSupport) {
case "useWCSS":
tag.@class=(tag.@class ? tag.@class + " " : "") + "digits"
break
case "useFormatAttribute":
tag.@format="NNNNN"
break
}
}
}
}
Note that this example uses the inputModeSupport DDR vocabulary to get the preferred input mode support. This particular piece of DDR vocabulary will be available in the next bemokoLive release.
Although a site developer shouldn’t have to care about this behind the scenes tweaking, the unique approach to mobile rendering that bemoko have taken, means that a site developer can care if they want. In particular they can take full control of the situation. This has huge advantages – you can build on the solid foundations on the maturing set of plugins and best practices that bemoko provides as well as being able to react and deliver quickly.
Mobilising a web site – screen scraping and semantic HTML
A lot of people come to us and say that they already have a web site and want a mobile version. Their web site is driven by a back office – perhaps a database, CMS and any other data or business logic. They’ve already invested in creating a web experience and they want to see a mobile version – and they don’t want to see a large up front integration effort.
We at bemoko believe that you need to design for mobile – but that does not necessarily mean a lot of effort. It means being aware of the functions that a mobile user benefits from, creating a UI that looks good on their choice of phone and a general rounded well delivered end-to-end user experience.
Both these desires – the desire for an efficient delivery, driven from their existing web site investment and the desire to create a focused, relevant and elegant mobile UX – can be met using the bemoko approach.
Take a read of a recent article on our bemoko wiki – Semantically Tuning a Web Site – to give you an idea of how we can use your existing web site today to deliver a “designed for mobile” user experience, without having to follow the generic transcoding approach or blindly squeezing your PC web site onto a mobile. Since this mobile site is driven by your web site, if you make updates to you web site the mobile web site will follow. We’ll shortly be releasing an article on how you can deploy bemokoLive to support this PC website transformation approach as well as a few case studies of some people who were pretty happy with what they saw. Give us a call if you want to know more and we’ll get a live demonstration up for you.
Twitter Weekly Updates for 2009-06-21
- bemokoLive 1.2.3.3 released – http://bit.ly/2mjyN6 #
- Interestingly Acer (3rd largest PC maker) has announced that in future it will ship notebooks with Android not MS #
- We’re working on a plugin to allow bemokolive to deliver WRT widgets to phones that support them #
Powered by Twitter Tools.
iPhone 3.0 geolocation javascript API
With the iPhone 3.0 firmware released today, I thought I’d show you how to access one of the features I’ve been most looking forward to – support for the geolocation API in Safari means I can now create location aware websites.
This will be just a quick demo to retrieve and display the current longitue and latitude of your phone, along with a googlemap so we can see if the results are right. The more interesting applications will come….
To do this we’ll use javascript and the newly added Navigator.Geolocation interface to call the getCurrentPosition() function to retrieve the current longitude and latitude of the phone, which we’ll display and pass to the googlemaps API.
The code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>iPhone 3.0 geolocation demo</title>
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport"/>
<script>
function handler(location) {
var message = document.getElementById("message");
message.innerHTML ="<img src='http://maps.google.com/staticmap?center=" + location.coords.latitude + "," + location.coords.longitude + "&size=300x200&maptype=hybrid&key=YOURGOOGLEAPIKEY' />";
message.innerHTML+="<p>Longitude: " + location.coords.longitude + "</p>";
message.innerHTML+="<p>Latitude: " + location.coords.latitude + "</p>";
message.innerHTML+="<p>Accuracy: " + location.coords.accuracy + "</p>";
}
navigator.geolocation.getCurrentPosition(handler);
</script>
</head>
<body>
<div id="message">Location unknown</div>
</body>
</html>
The results:
-
- iPhone OS 2.2.1
-
- iPhone 3.0
-
- iPhone 3.0 – I am here!
Try it for yourself by pointing your Safari browser at http://bemoko.com/blog/iphonegeo.
Twitter Weekly Updates for 2009-06-14
- Preparing for the early train to London tomorrow – what odds are you offering on me getting a seat? #
- Just released latest version of bemokoLive (http://bemoko.com/wiki) – nice to finally get device repository independence. #
- Looking forward to sharing some interesting stuff from our marathon board meeting yesterday #
Powered by Twitter Tools.
Twitter Weekly Updates for 2009-06-07
- Good to see 3 improving network data bundles. http://tinyurl.com/mphzrv #
Powered by Twitter Tools.
Twitter Weekly Updates for 2009-05-31
- Some interesting results from the mobile survey we ran at MEX – http://tinyurl.com/pfznd6 #
- We’re in the local rag! http://tinyurl.com/km36r6 – luckily they didn’t include my mugshot on the web article! #
- Aaagh, they must be following this as they’ve put the picture up now. #
Powered by Twitter Tools.
Twitter Weekly Updates for 2009-05-24
- @whenimmobile hope you’re enjoying the music tech summit. Looks a great one. If you connect I’ll DM you my skype details and we can chat. in reply to whenimmobile #
- Just getting settled to start session 1 at #mex09 #
- Current top answer on #mex09 mobile survey for preferred app store rev share is 80/20 split. Next talk on app stores: see if answer changes. #
- Slightly disappointed with the lack of conversation and ideas around the web on devices at #mex09. (via @bryanrieger) #
- Just filled in the marathon form to enter bemokoLive for Vodafone Mobile Clicks. Fingers crossed! Looking forward to the long weekend now! #
Powered by Twitter Tools.