Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

UPDATE: We no longer partner directly with CrossBrowserTesting. You can still use it effectively to test your work, it’s just there is no one-click system for clicking over to it or free testing.

What does that thing you’re building look like in IE 8? Does that functionality work in Android 4.2? CodePen is pretty useful for that kind of thing, since you can slap together a Pen and go take a look in that browser to see. But do you have live, testable version of every single browser/platform/version/device handy? I sure don’t.

Even if you are into having your own little device lab and running virtual machines and emulators, it would be a huge time commitment to get coverage over all the necessary combos. That’s what’s so great about Cross Browser Testing. From the comfort of your normal desktop browser, you have access to do live testing on a huge array of browsers on all sorts of platforms. They run the machines for you, and you just interact with them. It’s kinda magical.

We now have an integration with them that makes it easier to pop over there and test Pens. Just click over from the View Switcher:

Check out this quick video showing it off:

The best part

It’s free! CrossBrowserTesting has a free trial, but beyond that, when you click over from CodePen and log in / sign up there, you’ll always be able to test Pens for free.

What view should you test?

You can test in any view you like.

If you’re PRO, we’ll by default send you to the Live View URL. That’s nice because you can update the original in real time and see the changes even right there in CrossBrowserTesting. But as a PRO, you might want to use Debug View too, which is a completely untouched version of your Pen.

If you’re on a free account, we’ll send over the Full Page View URL, which should be perfectly fine for testing, you just need to refresh changes. You can also just use the editor itself if needed, although remember our browser support for the editor doesn’t go very deep.

Other Great Stuff about CrossBrowserTesting

  • While Live Testing, you can record a video of what you’re seeing/doing. I find this useful in customer support where I can clearly demonstrate something in a particular browser.

  • You can enable a local connection, meaning you can test sites on your localhost. I use this to test my local CodePen dev site!

  • You can take screenshots in a whole bunch of browsers at once, for quick testing across a wide variety of browsers.

  • You can run Selenium tests in a variety of different browser contexts.

  • It’s speedy and reliable

Enjoy! And if you love it and want to test other sites, go for one of their plans. It’s a lot more cost and time effective than trying to manage all this stuff yourself.