Screenshots and slideshows

We have added to the site to make it easier for you to document the work you perform while using CrossBrowserTesting.com. As you know, a picture is worth a thousand words, so we have made taking snapshots easier and added the ability to create a presentation of several screenshots via a slideshow. Here are some of the new capabilities:

Hot key 'Alt+p' while in a testing session will take a snapshot. Sometimes, it is necessary to have the mouse over a certain element to show an interaction, and you would like to take a snapshot at that moment. Before, you had to move the mouse up to the snapshot button and ... you see the problem?!? Now, you can hit the 'Alt+p' (p for photo) key, sort of. The browser window has to have focus for this to work, not the java vnc remote desktop client. The easiest way to do this is to get the screen exactly where you want it, then click somewhere on the blue bar above the remote desktop - this will give the browser window the focus. You can then move the mouse over the element you wish to highlight. Press the 'Alt+p' key to capture a screenshot. If you click anywhere in the remote desktop window, it will have focus and the 'Alt+p' hotkey will not work.

You can now document your photos. Add a company name or project name to them, select or type in the browser or software you were using, and take your notes.

Usage screen shows list of photos. While viewing the history of sessions you have run, you can now see the number of screenshots you took for a particular testing session and drill down to those screenshots.

Slideshows. Ok, SLIDESHOWS!!! You can now produce a web based slideshow. There are several potential uses for this:
- Document all the issues with a site with the screenshots, then create a slideshow of them and send a link to the developer telling him to GET BUSY!
- Create a deliverable for your customer. If your contract for a web site specifies that you will insure it is cross browser compatible, create a slideshow showing the site with screenshots from multiple os's and browsers. Include a link to this slideshow as the proof that you have met this deliverable.
- Create a tour of your site, and embed it on your site. You can use the comments to discuss the benefits and flow of your site.
- Add slideshows to your portfolio demonstrating some of the work you have done for your client, and showing screenshots from a variety of browsers and operating systems. Let them know that you are a professional and thoroughly test the sites you build.

To create a slideshow, log in and scroll to the bottom of your my account page. You will see a 'Slideshow' area - hit Create Slideshows.


Here is an example of an embedded slideshow. You can hit the full screen button at the bottom right to make it larger. When creating screenshots, you have full control over the height and width.




Pick an OS - Pick a Browser - Test a Website at CrossBrowserTesting.com


We were already big fans of jQuery, but we used a bunch of jQuery's UI's components with this project to handle all the drag and drop functionality - these UI components are really becoming nice. The people working on that project are doing amazing work. Check it out at http://ui.jquery.com/.

Thanks,
Ken