Web-BasedComputing @ NCSU: Announcement: How to test local and private content with Adobe BrowserLab

Testing Private or Local content in BrowserLab
A recurring question we get on the BrowserLab User Forums is “How can I test pages that I have on my local machine and/or behind my firewall?”
A public URL is normally necessary because BrowserLab generates screen shots by visiting the page and taking snapshots of it in the actual browser. There are, however, three alternative methods for using BrowserLab that will allow you to test pages that are not publicly available.

BrowserLab for Firebug

The most versatile option is to use the BrowserLab for Firebug add-on for Firefox. Currently the BrowserLab for Firebug add-on supports Firefox versions 3.x to 6.x and will be extended as new versions of Firefox are released. For our add-on to work, you must have the correct versions of Firefox, our add-on and Firebug installed. Fortunately, Firefox does a really good job of helping you stay current and in sync.
The BrowserLab for Firebug add-on allows you to test private content by selecting the “Preview Local Source” option from the BrowserLab for Firebug menu in Firefox. You can also test publicly available content by selecting “Preview URL,” which simply sends the current URL to BrowserLab. When you choose the “Preview Local Source” option the add-on uploads the HTML content and assets from your machine to a private directory on Adobe’s servers, which only BrowserLab has access to. Once the files are uploaded, BrowserLab can take screen shots from that secure server. Please note, you must select the Options menu item and ensure that the read-only permission option has been set to “Allow.” You are able to test private websites and intranet pages by first navigating to the page in your browser and entering any username/passwords, once you choose “Preview Local Source” the local content from your browser is uploaded and screen shots are generated.
For more information on the precautions taken to ensure content uploaded to Adobe’s secure server for screen shots is inaccessible to any other user, please read our tech note.

Because the page is running in your Firefox browser, this also allows for some limited interactive testing of your pages. For example, if you have dynamic menus, dropdowns or similar elements on your page, you can select the “Freeze JavaScript” option, interact with your page to display those elements, and then request screen shots of the page in that state either by selecting the “Preview Local Source” menu option or pressing the hotkey combination for it (Ctrl-Shift-F12 in Windows, Command-Shift-F12 on Mac OS X)).
When using Preview Local Source, another option to be aware of is the “Preserve CSS Hacks” setting. When a website uses a browser-specific CSS hack that Firefox doesn’t recognize, it is stripped out of the final page displayed in Firefox. Since “Preview Local Source” uploads the content that is currently in your browser, it can cause previews of the page in other browsers to display incorrectly if non-Firefox hacks specific to those browsers were removed. The “Preserve CSS Hacks” can fix this by merging those missing hacks back into the content that is uploaded to our servers for testing.

Please note, the purpose of this post isn’t to cover every possible situation you can run into, but if you’re having problems getting “Preview Local Source” to work correctly, make sure to check the “Freeze JavaScript” and “Preserve CSS Hacks” options, and try bumping up the screen shot Delay setting to allow more time for the page to finish loading before screen shots are captured.
If you’d like to see all of this in action, watch our BrowserLab for Firebug video on AdobeTV.

BrowserLab for Dreamweaver

If you use Dreamweaver CS5 or CS5.5 you can test private content using the BrowserLab for Dreamweaver extension, which is included in the product.

To begin, you should first ensure that you have the most up-to-date version of Dreamweaver by choosing Help > Updates from the menu and installing any available updates. Once you have finished updating (and restarting your computer if needed), open the BrowserLab panel by choosing Window > Extensions > Adobe BrowserLab from the Dreamweaver menu. You can use the dropdown control in the panel to switch between testing private (“Local/Network”) content and public (“Server”) content. This blog post will only focus on testing private content.
The extension allows you to test private content by creating a secure tunnel between your network and a private directory on Adobe’s servers, which only BrowserLab can access and take screen shots from. (See Data Privacy Concerns, above, for more information about how your data is kept private.) For this to function properly you should have a site set up within Dreamweaver (Site > Manage Sites) with the Local Site Folder field pointing to the root of your local site. Next, in the BrowserLab panel, select the list icon to open the extension menu, choose “Permission Settings”, and make sure the Allow option is selected. These two settings allow the BrowserLab for Dreamweaver extension to know the location of your pages and related assets, and will permit it to upload them to Adobe’s servers.
We’ve taken every precaution to keep your data safe, secure, and inaccessible from any other user. If you are still concerned about the security of your files when uploading them to BrowserLab, please take a look at our tech note on this subject.
Once you’ve followed these steps, activate the site you want to test in Dreamweaver by selecting it from the Sites menu in the Files panel. When the page you want to test is displayed, select the Preview button in the BrowserLab panel. Your page and all necessary assets will be uploaded to our servers, BrowserLab will open in your default browser, and screen shots will be returned (you’ll be asked to log in if BrowserLab was not running already). In addition to allowing you to test your local pages, this integration allows you to test interactive states of the page such as rollovers and tabs by switching to Live View in Dreamweaver, interacting with your page, choosing Freeze JavaScript to freeze the page state, and then clicking the Preview button in the BrowserLab panel to generate screen shots for that state in all your selected browsers.
If you’d like to see BrowserLab for Dreamweaver in action, watch our BrowserLab for Dreamweaver video on AdobeTV.

Allow BrowserLab Egress IP access
The final option for testing private content with BrowserLab is simply to allow BrowserLab to direct access to your content by granting permission to BrowserLab’s egress IP addresses. You can find more details in our blog post covering this topic. To reiterate our warning from that post - If you have confidential information then it may be best not to use this method for testing secure content, or to only allow our IP addresses access while you are actively testing. The primary reason for port forwarding would be if you have a webserver at home or in a small office and don’t have access to a staging server on the Internet. In most cases, this should not be done unless you know what you are doing.

Conclusion
BrowserLab is a versatile and easy to use testing tool to help you achieve cross-browser consistency and can be used with private, local and public content. It is fast and secure, and takes the hassle out of cross browser testing. Once you start using it, you might wonder how you ever got along without it.
Mark Rausch
BrowserLab Engineer