Practical Ecommerce

How to Test a Website on Different Browsers

There are many widely used web browsers, including Internet Explorer, Firefox, Chrome, Safari and Opera. And there are dozens of mobile browsers available, with more in development as each new device arrives on the shelves. But, not all browsers, and versions of those browsers, work the same. A merchant’s website may not look or function identically on each one, which can lead to lost revenue.

Thankfully, there are many browser compatibility-testing tools on the web. Some of these are free, like Browser Shots, and some cost money, like Gomez.com, Sauce Labs, PowerMapper or Perfecto Mobile.

These tools can test speed and function across operating systems and geographies, at high and low traffic levels. We’ll be taking a look at BrowserShots Browser Compatibility Test, Gomez.com Cross-Browser Compatibility Test, PowerMapper.com SortSite Test and PerfectoMobile.com Handset Cloud Test.

BrowserShots Cross-Browser Test

BrowserShots’ free cross-browser solution tests approximately 80 versions of widely used browsers. BrowserShots is a simple tool that allows merchants to see screenshots of a given web page in different operating systems (OS) including Linux, Windows, Mac and open-sourced Berkeley Software Distribution (BSD). All of the major browsers are available, with the (major) exception of Internet Explorer (IE). However, IE is testable in the Gomez.com test below.

  1. When you first go to BrowserShots.org, you’ll see almost all of the available browsers are pre-selected. If you want to test all available operating systems and browser versions, simply enter your website URL into the open field and click “Submit.”

    Browser Shots test results of all browsers on all operating systems.

    Browser Shots test results of all browsers on all operating systems.

  2. If you want to be more specific about your testing, simply click the “None” button at the bottom of the webpage and clear out all the check boxes. Then, check off each box for each browser for each OS you’d like to test.

  3. The test can take anywhere between 3 minutes and 2 hours, depending on the amount of browsers selected. You can bookmark the page and come back at anytime to see how the tests are progressing.

  4. Merchants can even set the screen size, color depth, enable or disable code, or run a specific version of code.

  5. As each browser test completes, a screenshot will appear in your “queue” on the BrowserShots’ webpage. Click any thumbnail and see a large screenshot of your webpage running on various operating systems and browser pairings.

The downside to using BrowserShots is the default 30-minute queue timeframe. Once a browser test has begun, a 30-minute clock counts down. When the time runs out the queue expires and the test is discarded. The time can be extended continually by clicking the “Extend” button, but it must be clicked manually.

BrowserShots.org "Extend" button.

BrowserShots.org "Extend" button.

Gomez Cross-Browser Compatibility Test

Gomez.com offers a set of tools that it calls the “Instant Test Center” with tests including, Cross-Browser Compatibility, Multi-Browser Performance and array of speed tests. Although the test center is called “instant,” in reality the results can take up to 24 hours to receive. In this case, the test results generally came back within an hour of entering in the URL.

We’ll be using Gomez.com’s free Cross-Browser Compatibility Test for this example, using Practical eCommerce’s URL as a test subject. The test will provide screenshots on how the website looks using Windows 7, Vista, XP and Mac OS X 10.4 on four of the major web browsers: Internet Explorer, Firefox, Safari and Chrome.

  1. Begin testing by going to the Gomez.com Instant Test Center at the top of the “Resources” drop-down. Or copy and past this URL to access directly: http://www.gomez.com/resources/instant-test-center.

  2. Next, you’ll find six tests that can be performed for free. For this example, we’ll be using the Cross-Browser Compatibility Test. Click the “Take a Free Test Now” link under that test thumbnail.

  3. Simply fill out the required information in the test form on the right of the screen and click “Submit.” You will receive an email from Gomez within 24 hours with access to the test results.

  4. When the email is received, click the “View Results” link. The test results will appear in your browser at Gomez.com, click on the thumbnails to see a large screenshot of how your website looks on four different operating systems running four different browsers.

Gomez.com Cross-Browser Test results.

Gomez.com Cross-Browser Test results.

PowerMapper SortSite Test

This simple test works very similar to the desktop browser test, but gives much more useful data than just a screenshot. The “SortSite” test checks accessibility, broken links, browser code compatibility, search engine optimization and other usability issues on ten pages of a given website. When the testing is complete, a report is generated with graphs of the issues discovered during testing.

  1. To begin, simply go to PowerMapper.com and find the “Products” header. You’ll see two tools “PowerMapper and “SortSite.” For this example, we’ll be using SortSite. Click the “SortSite” button. From the SortSite page, you can test your website quickly with the online trial, download a free 30 day trial or buy the full version. We’ll be looking at the free online SortSite test.

  2. Click the “Try SortSite Online” button on the right of the screen and enter a website URL and email address into the open fields. The results will appear in your browser and the report will also be emailed to you.

  3. The free trial will give a good idea of what issues a website may have, with further data available from the purchase of the full version.

PowerMapper test results graph.

PowerMapper test results graph.

Perfecto Mobile Handset Test

Perfecto Mobile is a testing service that allows merchants to test a website for mobile compatibility across hundreds of real mobile devices. Merchants can also test across geographical locations, including the United States, United Kingdom, Canada, France and Israel.

  1. To begin, go to PerfectoMobile.com, set up and log in to your account.

  2. Select the handset from multiple device models from most of the major brands.

    Perfecto Mobile handset selection menu.

    Perfecto Mobile handset selection menu.

  3. You’ll make a reservation for a testing session on a specific date and time for testing across the selected variety of mobile devices.

  4. Once your testing session begins, you can control the devices you have selected and test your website’s look and function across these multiple device platforms.

Once mobile browser testing is complete, Perfecto Mobile also offers testing of individual apps in the same cloud testing environment across the same geographical locations.

Search Terms

Practical Ecommerce
Practical Ecommerce
Bio  |  RSS Feed


Get the Practical Ecommerce RSS feed

Comments ( 9 )

  1. mikevoxcap December 16, 2010 Reply

    Thanks Matt! Ill be curious to try out Perfecto Mobile. The biggest hinderance to Mobile IMHO is the amount of plaforms + lack of test harness tools.

    These type of crawler test tools can be nice for simple use cases on a site; however, most eCommerce sites need to deal with authentication, variable test data fixtures and payed checkout, at a minimum. How do these tools stand up when needing to test cross-browser compatibility for these more difficult use cases?

  2. Chris Hedick December 16, 2010 Reply

    How times have changed. Back in 2000 when I was hired to produce 6 e-commerce sites in an all Mac shop I asked for a Windows 95 machine with IE so I could test our sites from work and not from home at night. Request took over a year to fulfill.

  3. DSanchez December 16, 2010 Reply

    Great list of resources. But you’ve missed the big one out of the list for the mobile world – DeviceAnywhere. They’ve been around for longer than any of the others and every mobile developer I’ve dealt with uses them or knows them at least.

    @Mikevoxcap I’ve tried Perfecto and I’m not convinced. They just use a camera to give you a photo of what’s happening on the device. It’s kind of amateurish.

  4. mikevoxcap December 16, 2010 Reply

    Thanks DSanchez.

    Also, if you like a bit more of an adventurer on the technical side, you can use Selenium (http://seleniumhq.org/). It supports recording tests, including the test data (test user login info, test payment details, etc). The recording happens as part of a Firefox browser add-on.

    Then, you can replay those tests in IE 7, 8; Safari 2, 3; Opera 8,9; Firefox 3. You will need to know something about JavaScript and can extend it further with Java knowledge.

    You will find some shortcomings and difficulties, such as having to tweak think time (real feel time between user interactions) and timeouts. Also, it is not as simple as the tools mentioned in this article, but powerful still.

  5. DSanchez December 16, 2010 Reply

    @mikevoxcap You’re welcome! I hadn’t come across Selenium but I’ll definitely check it out.

  6. avitaltr December 19, 2010 Reply

    Nice post Matt.

    My 2 cents, –
    I agree DA should be in the list, they are a leading player in the mobile testing market, however, having tried both extensively I must say that Perfecto Mobile is my preferred solution – cheaper, more than enough devices supported, no software download required (while DA takes forever to download) and better automation platform.

    Another note @DSanchez (I’ve tried Perfecto and I’m not convinced. They just use a camera to give you a photo of what’s happening on the device. It’s kind of amateurish. ) – using a camera isn’t amateurish at all, it gives you the most accurate picture when it comes to mobile testing. The system also allows you to take digital screenshots, videos and share them.

  7. Matt Ferner December 20, 2010 Reply

    Great feedback, everyone – thanks! I’m putting together a mobile browser focused piece that covers much of what you are commenting about here. Thanks for reading and engaging.

    Best,
    Matt

  8. Delia Wilson Lunsford December 21, 2010 Reply

    I don’t have the time to wait! I use IE tester that shows IE on the pc – you can browse sites in whatever version of IE you want. It works best on a pc that has had IE7 installed on it- otherwise that version crashes in short time. It’s a buggy little program but it is free and generally lets me see the sites.

    Also, adobe browserlabs can be used for screenshots and it’s faster than anything you list.

  9. JeffJudgeDev January 5, 2011 Reply

    @Matt Ferner: Saw your article today on testing websites on mobile browsers with these same three companies. I would love to read your take on Deviceanywhere and Selenium. Thanks for this article!

    @avitaltr: I would have to disagree. I’ve been a developer for 15 years and have used used Perfecto, Gomez and Deviceanywhere among others and my go-to solution DA mainly because of the live feedback (not screenshots or emulators) and automation.

    @mikevoxcap: Haven’t heard of Selenium before. I’ll check them out. Thanks!

Email Newsletter Signup

Sign up to receive EcommerceNotes,
our acclaimed email newsletter.

And receive a free copy of our ebook
50 Great Ecommerce Ideas