1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
Testing websites across today's myriad browsers and devices can be overwhelming.
There are roughly [18,700 unique Android devices](http://opensignal.com/reports/2014/android-fragmentation/) on the market. There are somewhere around 14 browsers, powered by several different rendering engines available for each of those devices. Then there's iOS, Windows Mobile and scores of other platforms to consider.
Trying to test everything is impossible at this point.
The good news is that you don't need to worry about every device on the web. Don't make testing harder than it needs to be.
Don't test more, test smarter.
Before you dive into testing, consult your analytics and narrow the field based on what you know about your traffic. Find out which devices and browsers the majority of your visitors are using. Test on the platform/browsers that make up the top 80 percent of your visitors. Once you're confident you've got a great experience for the majority of your visitors you can move on to the more obscure cases.
If you're launching something new you'll need to do some research about which devices your target audience favors. That way you'll know, for example, that your target market tends to favor iOS devices and you'll want to spend some extra time testing on various iPhone/iPad configurations.
Once you know what your visitors are actually using, you can start testing smarter.
Let's say you know that the majority of your visitors come from 8 different device/browser configurations. You also know from studying the trends in your analytics that you're making headway in some new markets overseas and traffic from Opera Mini is on the rise, so you want to pay special attention to Opera Mini.
Armed with information like that you're ready to start testing. Old school developers might fire up the virtual machines at this point. There's nothing wrong with that, but these days there are better tools for testing your site.
### Introducing BrowserStack
[BrowserStack](http://www.browserstack.com/) is a browser-based virtualization service that puts nearly every operating system and browser combination under the sun at your fingertips.
BrowserStack also offers mobile emulators for testing almost every version of iOS, Android and Opera Mobile (sadly, at the time of writing, there are no Windows Mobile emulators available on BrowserStack).
You can also choose the screen resolution you'd like to test at, which makes possible to test resolution-based CSS media queries if you're using them. BrowserStack also has a dedicated [Responsive Design testing service](http://www.browserstack.com/responsive).
BrowserStack is not just a screenshot service. It launches a fully interactive virtual machine in your browser window. That means you can interact with your site just like you would if you were using a "real" virtual machine or had the actual device in your hand. It also means you can use the virtual browser's developer tools to debug any problems you encounter.
### Getting Started With BrowserStack
Getting started with BrowserStack is simple, just sign up for the service and then log in. A free trial account will get you 30 minutes of virtual machine time. Pick an OS/browser combination you want to test, enter your URL and start up your virtual machine.
<figure>
<img src="browserstack01.jpg" alt="Configuring BrowserStack Virtual Machine">
<figcaption><b>1</b> Configuring your virtual machine.</figcaption>
</figure>
BrowserStack will then launch a virtual machine in your browser window. Now you have a real virtual machine running, in this case IE 10 on Windows 7.
<figure>
<img src="browserstack02.jpg" alt="BrowserStack Virtual Machine">
<figcaption><b>2</b> Testing sifterapp.com using IE 10 on Windows 7.</figcaption>
</figure>
Quick tip: to grab a screenshot of a bug to share with your developers, just click the little gear icon, which will reveal a camera icon.
<figure>
<img src="browserstack03.jpg" alt="Taking a screenshot in BrowserStack">
<figcaption><b>3</b> Taking a screenshot in BrowserStack.</figcaption>
</figure>
Click the camera and BrowserStack will generate a screenshot that you can annotate and share with your team. You could, for example, download it and add it to the relevant issue in your bug tracker.
<figure>
<img src="browserstack04.jpg" alt="Screenshot annoations in BrowserStack">
<figcaption><b>4</b> Annotating screenshots in BrowserStack.</figcaption>
</figure>
### Local Testing with BrowserStack
If you're building a brand new site or app, chances are you'll want to do your testing before everything is public. If you have a staging server you could point BrowserStack to that URL, but there's another very handy option -- just point BrowserStack to local files on your computer.
To do this BrowserStack will need to install a browser plugin, but once that's ready to go testing a local site is no more difficult than any other URL.
Start by clicking the "Start local testing" button in the sidebar at the left side of the screen. This will present you with a choice to use either a local server or a local folder.
<figure>
<img src="browserstack05.jpg" alt="Setting up local testing in BrowserStack">
<figcaption><b>5</b> Setting up local testing in BrowserStack.</figcaption>
</figure>
If you've got a dynamic app, pick the local server option and point BrowserStack to your local URL. Alternately, just point BrowserStack to a folder of files and it will serve them up for you.
<figure>
<img src="browserstack06.jpg" alt="Testing a local folder in BrowserStack">
<figcaption><b>6</b> Testing a local folder of files with BrowserStack.</figcaption>
</figure>
That's it! Now you can edit files locally, make your changes and refresh BrowserStack's virtual machine to test across platforms without ever making your site public.
### Beyond the Basics
Once you start using BrowserStack you'll wonder how you ever did without it.
There's also a good bit more than can be covered in a short review like this, including [automated functional testing](https://www.browserstack.com/automate), a responsive design testing service that can show your site on multiple devices and browsers, an [automated screenshot service](http://www.browserstack.com/screenshots) and more. You can even [integrate it with Visual Studio](http://www.hanselman.com/blog/CrossBrowserDebuggingIntegratedIntoVisualStudioWithBrowserStack.aspx).
BrowserStack offers a free trial with 30 minutes of virtual machine time, which you can use for testing. If you decide it's right for you there are a variety of reasonably priced plans starting at $49/month.
|
