I just watched the panel on Testing and Tools for front-end web development, from the 2013 Edge Conference, and there’s some really juicy links in there to sink your teeth into. Here are most of them, though I may have missed a few.From the intro
From the site itself “This site collects the current techniques and tools available for CSS testing to provide both a simple starting point and a general reference for future development.”
Fighting Layout Bugs
This one looks like a pretty good tool for testing layout issues (such as text butting up against elements, all automagically.
Paraphrased from the about page: “Travis CI is a hosted continuous integration service for the open source community. It is integrated with GitHub and offers first class support for [all the languages!!]”
Automated performance testing for the client-side aspects of your project. Won’t verify “correctness”, but rather provide performance benchmarks and assessments. It requires a checkout of the hefty Chromium code base (about 5gb, but might be worth it for your needs).
A nifty toolkit for automated endurance testing - basically, this tool will help you analyse how well your app or site holds up over repeated use.
Wow how the heck did I miss this? A wicked-sweet tool for previewing websites (local or hosted) on a huge array of devices. browsers, OSes. Definitely a worthy addition to your utility belt.
- Mixture.io Currently in preview and development, but looks like a pretty good collection of front-end development tools. Paul talks about the cross-device testing capabilities in his intro, but there seems to be much more to Mixture than that. I’ll be keeping an eye on this one!
- DeviceAnywhere Test remotely on real devices, simulates touch events and gestures, and looks like a good suite for cross-device testing. They appear to offer a free plan alongside their premium packages.
- Google Tracing Framework It’s kind of a tease to be linking or mentioning this because it’s not available for public consumption yet, but since it was in the presentation it’s going in this list. It appears to be a pretty comprehensive set of testing tools to track performance, regressions, and other stuff. Another one I’ll be keeping an eye on.
- Aaand then of course, there’s the Chrome Dev Tools (awww yisssss!). I have to link to this section of the video, because Paul shows some pretty sweet stuff here.
Uses PhantomJS, ImageDiff.js and ImageMagick (which David talks about using in the BBC testing and integration process). Along the same lines, Needle appears to provide similar functionality, testing screenshots of your site against a set of known “good” screenshots.
Simon Stewart (creator of Selenium) talks about a few testing tools such as Selenium WebDriver API, which is now in the process of being standardised, as well as iOS and device solutions, Appium from SauceLabs, and Francois Reynaud’s iOS Driver. These tools can help you automate the testing of your your site, testing functionality as a user might use it.
From a package management perspective, Paul points to a few tools that we can use to keep our packages up to date. The now-defunct Ender.js gets a mention, and gives way to perhaps more robust solutions such as Twitter’s Bower, a nifty boilerplate/package-management-combo called Volo.js, and of course there’s always npm which you can mash together with Browserify for a client-side package management solution.
And finally, when you need to test out varying network conditions, there are a couple of tools you can employ. The first is Charles Proxy, which can simulate a bunch of different network conditions (packet loss, throttled bandwidth, etc)., and there is the Network Link Conditioner for Xcode in Apple OSX (Lion or greater). This can be found in System Preferences. If anyone has a decent docs link or write-up on this, I’d love to put it up.
Of course, if there’s anything I missed, or you have a link to add to this, gimme a shout on twitter or some other place.