Sunday, November 30, 2008

use you own vnc client software at crossbrowsertesting

Now you can use your own software installed on your own machine to work on crossbrowsertesting.com. You can still use the java applet if you choose.

The clients that we recommend for Windows is TightVNC. For Ubuntu it works great with Vinagre (the default). And for the macs we like Chicken of the VNC.

For it work you need to first start your client software on your machine then go to CrossBrowserTesting.com. Sign in a go to the 'My Account' page. Click on the red checkbox that says "Beta! Use local VNC Client instead of web based Applet" and then click on the launch button. Pick your session type and you will see an alert to remind you to start your local VNC client.

Now you will see an IP address, port and password that you will use in your local VNC client.

When you are done running you session remember to click on the Stop Session in the web browser window.

My main development machine is a somewhat slower Ubuntu box and the local client has made a *huge* difference in my performance. We think that performance for all platforms will be better with the local client. Check it out and see if you agree.

Wednesday, November 5, 2008

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