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.

Application testing

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.

Figure A

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. 

Figure B

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.

Figure C

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.

Figure D

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.

Figure E

TechRepublic loaded via BrowserStack on iPad 3. (See an enlarged view of this image.)

One of the many cool options of the BrowserStack service is the
ability to test local sites. This is achieved by setting up a local tunnel (see the bottom left of Figure A), which can be handled via the command line or via a web
interface. It allows you to test local or internal servers (sites or just local
folders with HTML/CSS/JavaScript files) remotely via the BrowserStack
interface. I have used this option extensively on a current project with great
results.

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.

Figure F

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.