How to Make BrowserShots Even Better

If you're in the business of creating websites, one of the more tedious tasks is testing your website with different combinations of web browsers and operating systems. In many cases, the testing cycle needs to be repeated over and over again until you're blue in the face. Fortunately, there's a really useful online tool, BrowserShots, that makes things easier. While BrowserShots doesn't go so far as to test functionality, it does simplify the the process of ensuring a design looks consistent regardless of browser and that a long is a huge time saver.

The process for using BrowserShots is as follows:

1. Go to the BrowserShots site
2. Type in a URL
3. Select the web browsers of interest
4. Set additional options such as screen depth, resolution, JavaScript support etc.
5. Click Submit
6. Wait a bit and then view your screenshots

As good as the system is, it still put up some roadblocks that have annoyed me ever since using it. The biggest roadblock is that the BrowserShots doesn't remember any of the options I've selected. And in all likelihood you're going to want to test using the same options repeatedly which means constantly checking and unchecking dozens of check boxes and selecting options from the drop-down boxes. Fortunately, I've come up with a quick shortcut too all of this.

Here are the instructions to make streamline BrowserShots:

1. Go to BrowserShots.org
2. Use your browser's Save As option to save a copy of the page to your hard drive
3. Open the HTML file yoe just saved in a text editor
4. Search for this code: action="/" and replace with action="http://browsershots.org/"
5. Replace all occurrences of checked="checked" with a space
6. Replace all occurrences of selected="selected" with with a space
7. Go through the source and look for check boxes you want to set. For example, if I wanted FireFox 3.0 on Windows I would change:

   <input type="checkbox" name="windows_firefox_3_0" id="id_windows_firefox_3_0" />

   to

   <input checked="checked" type="checkbox" name="windows_firefox_3_0" id="id_windows_firefox_3_0" />


8. 8. Go through the source and look for drop-down boxes you want to set. For example, if I wanted a screen width of 1024 pixels I would change:

   <option value="1024">1024 pixels wide</option>

   to

   <option value="1024" selected="selected">1024 pixels wide</option>

9. Save your file.
10. Load the saved file into a web browser. You should see all of the options you want already selected so you're good to go!