Cross browser checks of pages behind a user name / password

Screenshots are a great way to check your site for layout/appearance issues. You can set up a test in just a minute, let it run, then scan through the results to see if there are problems. If you see a problem, you can use the 'live test' link to launch a vnc session to the particular configuration you have the issue in, and work in a live session to correct it... Very nice, and a great workflow!

We have found from our own use of the system (yes, we eat our own dog food), that we really needed to be able to take screenshots of our internal, logged in areas. In fact, we had an IE6 problem two weeks ago that prevented customers using IE6 from launching tests in the 'My Testing Center' page. We did not have the ability to easily screen this 'authenticated' page using the screenshot tool, so we selected a few browsers using the live test to make sure things were ok. Well, we did not check IE6 specifically, and it was not ok (read more).

After this event, we prioritized enabling the screenshot system to verify pages that were behind both basic and form based authentication. We now have this in production. We know this will help us ensure that our 'inside' pages render properly, and we believe it will help you.

How do you take advantage of this new functionality? Go and launch a new automated screenshot. After entering the url to a secured page, click on the setup login profile link shown below:

You will see several options. You can select to 'use basic authentication' (where the browser pops up the user name / password information in a separate box), or, more likely, 'define a new form based login profile'. Once you select to define a form based login profile, the system will automatically look at the remote site and try to determine 3 things:
1) Which field the user name should be placed in
2) Which field the password should be placed in
3) What button or graphic should be clicked to submit the login form

If it can find the proper fields, you will see the username, password, and submit locators are all set. If not, you will need to change the locators manually. Once the locators are set, enter the user name and password you want the screenshot system to use when logging into your site. This should be a test account, not a primary user's account. We store the password in clear text so we can use it to log into your system (ie we cannot one way encrypt it as we would normally do with a password), so bear this in mind. When finished, name your login profile. You can use this profile repeatedly when taking screenshots of other pages on your site which require login.

As an example, I have taken a couple screenshots of BasecampHQ, a site we use for project management. First, here is the information I entered to setup the login profile (minus my real password ;>):

Below are two screenshots of the global settings page (http://crossbrowsertestingcom.basecamphq.com/global/settings) at Basecamp. One was taken without a login profile, and one with:

Without a login profile

With a login profile

We have been using the login profiles to check interior pages on CrossBrowserTesting.com for a couple of weeks now. It is quick to run a test, so we tend to do cross browser checks more often on these pages and across more browsers than we use to when we were just relying on the live testing. This is helping us to catch errors - we believe it can help you also.

Thanks
Ken, Mike, and Tony