Work in BrowserLab

Adobe® BrowserLab is an online hosted service that lets you test the pages of your web site 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.

You can use BrowserLab as a standalone service, or integrated with Dreamweaver CS5 and later. The standalone service lets you test pages that you've posted to a server within the context of a web browser. If you use BrowserLab as an integrated service with Dreamweaver, you can test your pages from within Dreamweaver without publishing your pages to a server.

Note: Choose Help > About after logging into BrowserLab to see the most up-to-date list of supported browsers.

If you have a question about BrowserLab that's not answered by these Help topics, you can check the troubleshooting documentation on adobe.com, or post your question to the Adobe BrowserLab Forum.

    Log in to BrowserLab

    1. Browse to http://browserlab.adobe.com.

    2. Enter your Adobe ID and password, and click Sign In.

      Note: Your Adobe ID is your e-mail address, and the same ID you use to log into all other Adobe web services, as well as the Adobe on-line store. If it’s your first time logging into BrowserLab, you’ll need to click the link in the verification email before you can log in.

    3. If you are logging into BrowserLab from Dreamweaver, click CS Live in the Application bar and sign in.

    Test a page

    Testing a page in BrowserLab is as simple as browsing to the page.

    1. Sign in to the BrowserLab service.

    2. Click the Test link at the top of the application window.

    3. In the URL text box, enter the URL of the page you want to test.

      BrowserLab loads the page with a screen shot. To see a screen shot from a different browser in the default Browser Set, click the Browser pop-up menu at the upper-left hand corner of the application window, and choose the browser.

    Compare pages

    BrowserLab lets you compare side-by-side screen shots of your page as it appears in different browsers. By default, BrowserLab loads comparison screen shots from the top two browsers in the default Browser Set, but you can compare versions of pages in any of the available browsers.

    BrowserLab also gives you the ability to compare screen shots one on top of another.

    1. Sign in to the BrowserLab service.

    2. Click the Test link at the top of the application window.

    3. In the URL text box, enter the URL of the page you want to test.

    4. Choose one of the following options from the View menu (to the right of the URL text box):

      2-up View
      places two screen shots side-by-side. To change the browser for a given screen shot, click the Browser pop-up menu at the upper-left corner of the application window, and choose the browser you want.

      Onion Skin View
      superimposes one screen shot over another. To change the browser for a given screen shot, click the Browser pop-up menu at the upper-left or upper-right corner of the application window, and choose the browser you want. The slider at the top middle of the page controls the transparency of the two screen shots. Moving the slider to the left will make the left-selection browser's screen shot more visible. Moving the slider to the right will make the right-selection browser's screen shot more visible.

    Navigate pages

    1. To navigate back and forth between pages, use the Back and Forward buttons next to the URL text box, just as you would in a browser. You can also select pages from the history pop-up menu by clicking the arrow on the right side of the URL text box, and selecting a page from the history.

      Note: The history maintains the history of distinct pages; it does not maintain the history of different versions of the same page.

    2. To follow active links on a page, Control-click (Windows) or Command-click (Mac OS) the link.

      Note: Only links to other web pages are clickable. Links such as email links, links to executable files, and so forth, are not clickable.

    Edit Browser Sets

    BrowserLab tests the appearance of your page in a default Browser Set. You can change the default Browser Set, as well as create custom Browser Sets of your own.

    Change the default Browser Set

    1. In BrowserLab, click the Browser Sets link at the top of the application window.

    2. Select the Default Browser Set if it isn't already selected.

    3. Add or delete browsers from the Browser Set by making selections in the Available Browsers column.

    4. (Optional) Change the browser order (i.e. the order in which BrowserLab displays screen shots of your tested pages) by dragging the browsers in the Browser Order column up or down.

    Create a custom Browser Set

    1. In BrowserLab, click the Browser Sets link at the top of the application window.

    2. Click Add New Browser Set.

    3. Type a name for your custom Browser Set and press Enter/Return.

    4. Add or delete browsers from the Browser Set by making selections in the Available Browsers column.

    5. (Optional) Change the browser order (i.e. the order in which BrowserLab displays screen shots of your tested pages) by dragging the browsers in the Browser Order column up or down.

    Edit an existing Browser Set

    1. In BrowserLab, click the Browser Sets link at the top of the application window.

    2. Select the Browser Set you want to edit.

    3. Add or delete browsers from the Browser Set by making selections in the Available Browsers column.

    4. (Optional) Change the browser order (i.e. the order in which BrowserLab displays screen shots of your tested pages) by dragging the browsers in the Browser Order column up or down.

    Delete an existing Browser Set

    1. In BrowserLab, click the Browser Sets link at the top of the application window.

    2. Select the Browser Set you want to delete.

    3. Click the delete button (red X) and confirm that you want to delete the Browser Set.

    Rename an existing Browser Set

    1. In BrowserLab, click the Browser Sets link at the top of the application window.

    2. Select the Browser Set you want to rename.

    3. Click the Rename This Set button (pencil), type the new name, and press Enter/Return.

    Test a page in a particular browser

    You can test a page in an available browser at any time. That is, the browser that you test in does not need to be part of a Browser Set.

    1. Sign in to the BrowserLab service.

    2. Click the Test link at the top of the application window.

    3. In the URL text box, enter the URL of the page you want to test.

    4. Click the Browser pop-up menu at the upper-left hand corner of the application window, and choose a browser. The browser can be from the default Browser Set, from your list of custom Browser Sets, or from the list of all available browsers.

    Refresh screen shots

     To refresh a screen shot, click the Refresh the Screenshots button next to the URL text box.

    Note: You can also use the Refresh button to refresh cached screenshots that the URL history might be maintaining.

    Change magnification

     To change the magnification of a page, click the Magnification pop-up menu in the upper-right corner of the application window and use the slider to select a magnification.

    Set screen shot delay time

    By default, BrowserLab loads the web page you're interested in and takes screen shots immediately after the page is loaded. You can, however, set a delay time so that BrowserLab loads the page, but does not take the screen shot until after a specified time. This is particularly useful if you have moving or animated elements on the page (such as Flash files or AJAX elements) that might take a few extra seconds to load completely.

     To set a screen shot delay time, type or use the arrow controls to specify a number in the Delay box. (It's to the right of the URL text box.) The minimum delay you can set is 0 seconds, and the maximum delay is 10 seconds.

    Work with rulers and guides

    Rulers and guides can help you make pixel-perfect comparisons between images.

    Display rulers

     To toggle rulers on or off, press the R key on your computer keyboard. The ruler displays pixel units.

    Create a horizontal or vertical guide

    • To create a horizontal or vertical guide, drag from the corresponding ruler, and release the mouse button when you've reached the desired position. You can always readjust the guide by dragging it again.

    • To remove a guide, drag the guide back to its corresponding ruler until it disappears.

    • To remove all guides, double-click the box at the upper-left corner of the ruler.

    Note: Guides are retained when you refresh screen shots.

    Adjust screen shot alignment

    Because different browsers align page content differently, even when the content is “the same,” it can sometimes be difficult to get an idea of how page elements relate to one another, particularly when using Onion Skin view. For example, the below screen shot shows you the same area on a page in Firefox - Windows and Safari - OSX, as displayed in Onion Skin view.

    View full size graphic
    Firefox Windows and Safari OSX screen shots as displayed in Onion Skin view.

    In the above example, it’s almost impossible to compare the text areas in Onion Skin view because the default alignments of each browser are slightly different. BrowserLab, however, gives you the ability to adjust the default alignment of your screen shots, allowing you to do focused testing on specific areas within a web page, even when the alignments are “off.”

    View full size graphic
    The two screen shots in Onion Skin view after alignment adjustment.

    BrowserLab gives you the option of aligning screen shots individually, or aligning all of your screen shots (“smart aligning”) to adjust to a particular point that you specify.

    Align screen shots individually

    1. Display a screen shot or screen shots in 1-up view or 2-up view. (The alignment feature is deactivated in Onion Skin view.)

    2. Click the Align On/Off button. (It’s next to the View menu, to the right of the URL text box.)

      Note: You can also turn Align on and off by pressing A on your computer keyboard.

      The Align square appears at the upper-left corner of your screen shot.

    3. Drag the Align square to an area on the page where you want to set the new alignment point. You can use the large square at the center of the Align square to focus in on the general area.

      Once you release the mouse the viewing area of the Align square magnifies the area of the screen shot underneath. The magnification allows you to select a new alignment point with pixel-perfect precision.

      Note: If you drag the Align square from the space within the square rather than from its border, the area underneath is magnified as you drag.

    4. Select a new alignment point by choosing a pixel and clicking it. You’ll see that as you drag your cursor over the magnified area, a second pair of cross hairs and a selection point appear.

    5. Click Align Current Screen Shot Here.

      When you align a screen shot individually, the new alignment point you’ve specified moves to the upper-left corner of the screen shot interface.

    6. (Optional) If you’re in 2-up view, align the second screen shot as necessary.

    Smart align all screen shots

    The Smart Align feature lets you specify an alignment point on one screen shot, and then align all of your other screen shots to that point.

    1. Display a screen shot or screen shots in 1-up view or 2-up view. (The alignment feature is deactivated in Onion Skin view.)

    2. Click the Align On/Off button. (It’s next to the View menu, to the right of the URL text box.)

      Note: You can also turn Align on and off by pressing A on your computer keyboard.

    3. Drag the Align square to an area on the page where you want to set the new alignment point.

    4. Select a new alignment point by choosing a pixel and clicking it.

      Note: The alignment point you choose must be unique in order for BrowserLab to successfully match the corresponding point on all screen shots. It is best to select distinct colors or elements (for example, the dark corner of an image) when specifying the alignment point.

    5. Click Smart Align All to this Region.

      BrowserLab shows you the Smart Align progress. Click Return to Testing to close the Align square and return to testing, or click Return to Alignment to leave the Align square open and try again.

    Save screen shots to desktop

     To save a screen shot to your local desktop system, right-click (Windows) or Control-click (Mac OS) the screen shot in the BrowserLab application window, and select Save Locally.

    Use hot keys

    BrowserLab comes with a number of built-in hot keys to help you work more efficiently. The following table lists the available hot keys:

    Key

    Action

    Down arrow

    Changes the screen shot to the next browser in the selected Browser Set

    Up arrow

    Changes the screen shot to the previous browser in the selected Browser Set

    Plus sign

    Zooms in on the screen shot

    Minus sign

    Zooms out from the screen shot

    1

    Displays the screen shot in 1-up View

    2

    Displays screen shots from two browsers in 2-up View (side-by-side)

    3

    Displays the screen shot in Onion Skin view

    Left arrow

    In Onion Skin view, increases the visibility of the left-selected browser screen shot.

    Right arrow

    In Onion Skin view, increases the visibility of the right-selected browser screen shot.

    R

    Shows or hides rulers

    Control/Command

    Lets you follow active links on the page

    H

    Turns the cursor into a pan tool (hand), allowing you to drag the page

    Shift

    Creates a "ghost cursor" (i.e. duplicate cursor) on the right or left image in 2-up view

    A

    Turns Alignment mode on or off

    A list of hot keys is also accessible from the BrowserLab interface. Click the Hot Keys link in the upper-right corner of the application window to access the list at any time.

    If a hot key isn't working as expected, you might have one of the application controls selected. Click the main image in the application window to reset all controls and try using the hot key again.

    Change application window language

    You can change the language of the BrowserLab application window. Currently BrowserLab supports English, French, German, Japanese, Italian, and Spanish application windows.

    • To change the language of the application window, select a language from the Language pop-up menu. (It’s in the upper-right corner next to the Hot Keys link.)