Click on any phrase to play the video from that point.
[CS Live Services Adobe® BrowserLab - Testing Websites with BrowserLab]
Adobe BrowserLab is an online hosted service that lets you test the pages of your website
across a variety of web browsers and operating systems.
The service works by taking screen shots of your web pages in different browsers
and then displaying them in the BrowserLab application window.
It works as a stand-alone service and is also integrated with Adobe Dreamweaver
Let me show you how it works.
In our other video, we showed you the BrowserLab interface, so now let's take a look at testing web pages.
We're comparing our local magazine website in a few different browsers.
One difference that I notice right away is that in the second browser this dynamic content hasn't finished loading completely.
Let's look at some of the other browsers.
The same thing happened in Chrome 9. Internet Explorer 9 looks okay.
Firefox on Windows looks okay, but in Chrome 10 and 9 it didn't have time to load before the screen shot was taken.
When this happens, simply crank up the delay value to 5 seconds and use the refresh button to request these screen shots again.
Now our dynamic content has fully loaded in all of our browsers.
Let's use the onion-skin view to overlay the second browser on the first to check alignments,
and you can see that we have some issues.
Let's go back to the two-up view and use the smart-align feature to set a single alignment point on the page.
Using the smart-align tool, we can chose a place in the logo that BrowserLab can use to align all of the screen shots.
Ideally, you want to chose a uniquely identifiable point on the page.
Select "smart align all to this region" and let BrowserLab calculate the alignment to that point.
Match percentages is the confidence rating BrowserLab has for aligning to that point.
In this case, it has a very high level of confidence that it was able to accurately align.
So let's return to testing and enter the onion-skin mode again.
Now all the screen shots have aligned on the logo, and we can see some minor alignment issues.
You'll see the browser name on the right updating as I use the "down arrow" key,
and, again, our reference browser--Firefox 3.6 on the left--stays the same.
So we're comparing Internet Explorer 9 and now Firefox 3.6 for Windows, which looks almost identical.
Everything looks pretty good, so let's move on.
BrowserLab has a new feature that allows you to follow links.
Here's how it works.
Roll over a link on your page. A tool tip pops up and shows the URL for that link.
Hold down the "ctrl" key in Windows, or "cmd" key if you're on Mac, and click.
BrowserLab will fetch screen shots of the pages for you.
This saves a lot of time when testing several pages within a site, eliminating the need to type or paste in URLs.
Another new feature is URL history.
As I've been testing, BrowserLab has been keeping track of the URLs that I've visited and shows them to you on this list.
I can use the "next" and "previous" buttons to very quickly go between the pages that I've been testing.
The test pages are reloading very fast, because these screen shots are being restored from a local cache
rather than having to be re-fetched from the internet.
This is yet another way that BrowserLab is speeding up your workflow.
Sometimes you might want to save your screen shots, and BrowserLab lets you do that very easily.
Right click with your mouse, or control click if you're on a Mac, and chose "save locally" from the menu,
choose a file name, location, click "save" and you're done.
Packed with lots of new time-saving features, Adobe BrowserLab is a fast and easy solution for cross-browser testing.
To get started, visit browserlab.adobe.com.
[Adobe - browserlab.adobe.com]
