#106: Use BrowserStack for Live Web-Based Cross Browser Testing

There are many tools for showing you screenshots of websites in different browsers to help with testing. But a screenshot is lacking in so many ways: no clicking, no hovering, no typing, no resizing, no testing JavaScript or other interactive elements, nothing. Real cross-browser testing means opening those websites in real live browsers. Some people use virtual machines to do that testing, but that can be resource intensive in more ways than one.

BrowserStack is the holy grail of cross-browser testing. Real virtual machines that you can run and test with right in your browser, including localhost!

Comments

  1. User Avatar
    Renato Alves
    Permalink to comment#

    Great Screencast Chris. As always, bringing great content to the table. :)

  2. User Avatar
    Mark Mitchell
    Permalink to comment#

    This is really nice. I also like http://crossbrowsertesting.com which goes a step further adding iOS and Android platforms. Both are very good. Nice job Chris. I have been surprised how few people seem to know these solutions exist.

  3. User Avatar
    Michael Caputo
    Permalink to comment#

    It’s too bad they don’t have a referral system of some kind…

  4. User Avatar
    supprof
    Permalink to comment#

    thank you very mutch chris Coyer
    you are doing a great job here
    so i saw your screen cast number 100 titled : #100: Let’s Write Semantic Markup and it was awesome. may be you can show us how the right way to style this semantic Markup. and how to use css3 in safe way with javascript.
    thank you very mutch

  5. User Avatar
    antho
    Permalink to comment#

    Hi Chris, I’m visiting your site following your tweet from my android phone. I am now wondering why can t I see the video without downloading it? Is that a choice that you have made? If it’s the case, could you explain why?
    anyway, thank you for this great site!

  6. User Avatar
    Robbie Day
    Permalink to comment#

    Is your decision not to support IE 7 with any styling out of protest to encourage visitors to update their browser?

    If not, I’d love to hear what’s behind that call.

    Thanks a ton for the post, I’ve been looking around for a good browser testing environment like this one!

  7. User Avatar
    Gabe
    Permalink to comment#

    I like how they have a prepaid model in addition to their monthly subscription model. I try avoid monthly subscription services at all costs (so to speak). I have enough bills, and it’s too easy to wind up with a bunch of stuff that I only occasionally use but that I’m being charged for every month.

    If/when my business really takes off I may give this a shot, but I’m going to stick with Virtualbox/VM for my testing needs for now. It takes awhile to get VMs downloaded and set up, but once it’s all done it works great and it’s free.

    I work on a Mac, I followed this tutorial and have had good success: http://osxdaily.com/2011/09/04/internet-explorer-for-mac-ie7-ie8-ie-9-free/

  8. User Avatar
    Niall
    Permalink to comment#

    a second for crossbrowsertesting.com same idea but much more options for browsers, mobile & operating systems,

  9. User Avatar
    Jings
    Permalink to comment#

    Hey Chris,

    great Video. Just one Question. What Plugin do you use to log in to Browserstack?

    Thanks,
    Jings

  10. User Avatar
    Adam
    Permalink to comment#

    Great intro vid to what looks like a very handy tool.

    Hope you are getting a commission because I’m off to signup now (after I check out your MAMP video).

    Oh and kudos for the IE7 protest.

  11. User Avatar
    Hein Zaw Htet
    Permalink to comment#

    I want you to upload video file as .zip or .rar to reduce download time. Because connection in Myanmar is too bad.

    by the way, how to find topic ideas for CSS-Tricks?

  12. User Avatar
    VIP Airport
    Permalink to comment#

    Agree with Michael Caputo, referral would be great help.

  13. User Avatar
    Eddy
    Permalink to comment#

    Is it just me or does the downloadable video freeze at 4:32?

    • User Avatar
      Bert de Vries
      Permalink to comment#

      Here at 4:12
      Weird.
      On line the video doesn’t run at all.

  14. User Avatar
    dj
    Permalink to comment#

    @chris … What happend different in this screencast – ?change settings? I normally have no problem downloading and watching any of them. This one loads (seems like forever;but, really was 2 and 1/2 minutes) for a long time before starting; then, only plays about 4 seconds of material. Both screencasts before and after this one – seem to work fine! If you can tell from this explanation what changes – I’d really be interested in knowing to help understand the setting parameters better.

  15. User Avatar
    Neil
    Permalink to comment#

    Really useful thanks Chris, looks like Browserstack like your screencast too, on their homepage!

  16. User Avatar
    neuh
    Permalink to comment#

    Can you also test Samsung and/or LG’s Web TV browser? (message sent my TV…)

  17. User Avatar
    Krsiak Daniel
    Permalink to comment#

    hi,

    thanks for sharing this site

    btw, as guys mentioned above
    video was lagging and froze like 2 times

    no slow net on my side ;]
    watching on DOWN. 90Mb/s, UP. 65Mb/s, ping 14ms speed

  18. User Avatar
    Daniel
    Permalink to comment#

    I think this is a great solution, but has anyone else noticed how their time seems to be faster than everyone elses when you buy in hour blocks? hmmmm…. Silly trick to play, especially when a few of their features really need to be improved.

  19. User Avatar
    Adam Murphy
    Permalink to comment#

    Spoon.net is a GREAT means of actually testing virtual applications, you can test all major browsers and versions easily without much work at all, better prices and much much faster speed (nice you’re testing it locally), only downside is windows only :[

  20. User Avatar
    Devve Knulle
    Permalink to comment#

    In their FAQ on the BrowserStack site they say they run this on “Windows OS”, and I couldn’t tell from the vid whether you could select different Windows OS’es or just Windows 7. What if you need to see your site in Vista or XP, to see how poorly your otherwise great-looking web fonts get rendered? :)

  21. User Avatar
    Peteris Krumins
    Permalink to comment#

    Also see my startup Browserling that does the same!

  22. User Avatar
    Kevlar
    Permalink to comment#

    Seems the tech savvy here could easily just set up virtual machines for each platform. And, then you’re done.

    And, avoid paying fees to some vendor.

    That a dumb suggestion?

  23. User Avatar
    Mikw

    Awesome stuff, just a suggestion, would be awesome if you make your vid louder.

  24. User Avatar
    rgovind
    Permalink to comment#

    Any Chance that we get a headless IE for MAC? Would like to use it for mac . Or should we consider Browserstack?

  25. User Avatar
    Karl Kelman
    Permalink to comment#

    I like it also, but, as we move into The Responsive World of mobiles and 4K monitors, more resolutions would be helpful.

  26. User Avatar
    Ron Strilaeff
    Permalink to comment#

    Hi Chris,

    1.67 years later… are you still recommending browserstack?

    Thanks, Ron

    • User Avatar
      Chris Coyier
      Permalink to comment#

      I used it today a bunch! I still like it. Although, if I’m doing TONS of debugging I run Parallels on my Mac. VM with Windows right on my machine. It’s just a lot faster. Although that’s just IE stuff. Browserstack shines with all the mobile emulators and such.

    • User Avatar
      Ron Strilaeff
      Permalink to comment#

      Thanks… I’m not going to spend any time comparing it to crossbrowsertesting.com.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag