In the wonderful world of responsive web design, the walls have truly been broken down in terms of both who can access the web, and what they access the web on. The multitude of different mobile devices, tablet sizes, differing laptop form factors, and differing desktop screen sizes means that testing has required more browsers on more devices to be supported, simply because no assumptions can be made anymore about what your audience is accessing your web application on. In an effort to alleviate the pain of testing a website on several mobile devices separately, Adobe Shadow has entered the fray.
As part of a test suite at work, the was a necessity to include iPhone, iPad and Android device support. With another key player in automated browser testing not fully supporting mobile devices yet, I decided to have a go at setting up Adobe Shadow on the mobile devices in the test suite (it should be noted that it is still in beta at the time of writing).
As per the instruction page on the Adobe Shadow site, I downloaded the Shadow helper application, Chrome extension and then installed these on an iMac that's on the same wireless network as the mobile devices. Lastly, I installed the Adobe Shadow app on each mobile device (by navigating to the AppStore equivalent for each of the supported mobile devices):
Upon launching the app on one of the mobile devices, the connection to the host machine on which the Shadow helper app can be selected, and then a numeric code is generated. This needs to be entered when clicking the corresponding device connection in the Chrome extension to pair the devices (this only has to be done once, as the devices will automatically connect thereafter).
The video on how to set up Adobe Shadow can be found here.
Once devices are connected, a URL can be hit in Chrome on the host machine and all connected devices will hit the same URL. Very useful time saver for testing responsive designs on a multitude of devices!
Edit:
Adobe Shadow is now called Adobe Edge Inspect, and can be found at: http://html.adobe.com/edge/inspect/