The maturation of web standards like CSS and HTML makes it easier to build robust applications, but support and implementation of those standards is not uniform, so thorough testing is necessary to ensure applications perform as expected. The vast number of browsers and devices used in this always connected world, as well as the rapid product development cycle, make this testing a challenge.
This is where the BrowserStack service enters the picture. BrowserStack provides a way to test web applications on different browsers and operating systems via an easy-to-use web interface.
When I started building web applications back in the days of Netscape Navigator, I had multiple computers with different operating systems and browser flavors and versions to make sure everything worked for all users. Nowadays, this isn't feasible because of the various available devices and browsers, although virtual machine technology makes it doable or at least theoretically possible.
A common approach for testing web applications is to test for the majority of your audience. For example, 98% of users may be using some version(s) of Chrome, Firefox, and Internet Explorer, so you focus on those browsers and don't worry about that lone wolf using Lynx or even AOL. There are a number of resources where you can find browser statistics — W3Counter is one example.
Everything you need for testing
The BrowserStack service provides everything you need to properly test your application (local or publicly available) on all common browsers and platforms. BrowserStack offers a virtual, interactive environment within your browser, as well as a virtual machine with all of the necessary browsers (including developer tools) loaded so you can test a web application in real time.
To get up and running with BrowserStack, you start by setting up an account. (There is a free trial, and there are various pricing plans to consider when the trial period ends.) When you log in, you will see the BrowserStack interface (Figure A). The page's main area allows you to specify a public address or even use it to test internal applications on your network. The dropdown menus on the upper left of Figure A allow you to choose the operating system and browser.
BrowserStack's opening page for testing web applications. (See an enlarged view of this image.)
Figure B shows the current operating system options, which includes desktop and mobile. The second dropdown is populated based on the operating system selected.
Current list of operating systems available via BrowserStack. (See an enlarged view of this image.)
Figure C shows desktop browser options when Windows 7 is selected.
Desktop browser options for testing Windows 7 via BrowserStack. (See an enlarged view of this image.)
Figure D shows mobile browser options for testing with iOS.
Mobile browser options for testing with iOS via BrowserStack. (See an enlarged view of this image.)
Figure E gives you a look at how testing works with the TechRepublic site loaded in iOS 6.0 on iPad 3. You can change your configuration on the fly and update the environment via the Update button (in Figure E, the selections on the left menu show Windows 7 because the Update button has not been clicked yet). Also, you can change the screen resolution when testing desktop environments — this is the third dropdown visible in Figure E.
TechRepublic loaded via BrowserStack on iPad 3. (See an enlarged view of this image.)
Another notable feature is the ability to generate screenshots of what a site looks like on specific browsers and platforms, allowing you to quickly get a feel for browser compatibility and where issues may exist. Figure F shows the options available for generating these screenshots.
BrowserStack can generate screenshots to test compatibility. (See an enlarged view of this image.)
Visual Studio integration
For those using Visual Studio 2012, a free BrowserStack extension is available via the Visual Studio Gallery — it requires ASP.NET and Web Tools 2012.2. This allows you to use BrowserStack features without leaving the Visual Studio environment.
Testing made easy
BrowserStack is a must for those developing public web applications. It gives you everything necessary to interactively test a web application in real time.
BrowserStack has been embraced by Microsoft and many other companies. Microsoft even partnered with BrowserStack with its modern.IE site with the goal to simplify Internet Explorer testing.
Give BrowserStack a try on your next project, and then report back in the discussion to share your thoughts about the service.
Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a production environment on a daily basis.