For many of you work in the web UX development, the testing part is one of the biggest challenges you need to address in order to ship your feature good and efficient.
Among the many ways of testing,
Selenium Webdriver becomes one of the most popular methods to drive the web testing. For those who are not familiar with the
Webdriver concept, checkout the Selenium office website.
The webdriver concept is very straightforward that you write some script to driver the browser’s behavior like a monkey. You can mimic a user’s behavior like click buttons, scroll down. You can check certain DOMs exist or not.
In case you need multiple web browser testing, webdriver provides many browser’s driver like Chrome, Firefox and Safari etc. You can use one script to test on as many web browsers as possible. The reality, however, is that the same code may not always work due to different browser’s tricky parts.
The integration with Visual Studio and Visual Studio Online is very good as well. So you can easily bring this UX testing into the your testing workflow before you ship your feature.
Option No.2 takes the UX testing steps even further. A headless browser does not require a foreground browser to show up. All the rendering is done in the background process. In other words, I usually treat it as the
That means, if the page you are navigating has jQuery, then you can use it. The concept looks exactly like your F12 window. However, PhantomJS does provide ways to inject any JS library if you need it.
To operate on PhantomJS, you need to know a little of Node.js as well, especially the
fs, etc. PhantomJS uses
WebKit to render the page, so it might be a little different from real browsers. But 99% should be the same as usual.
A simple evaluate on Google’s page title is the following.
var page = require('webpage').create();
There are many headless testing framework as you can see it from here.
CasperJS is one of the them I feel it works pretty well with PhantomJS.
CasperJS provides a good pattern for you to explore your testing step-by-step.
Promise.then() is the approach CasperJS takes. In addition, CasperJS wraps some common usage APIs like
waitForSelector(), etc. for you so you do not need to worry too much.
As a result, you can quickly experience CasperJS via the following code snippet.
var casper = require('casper').create();
Since CasperJS/PhantomJS is headless rendering it does not require you to install Chrome or Firefox on your computer. This opens a big door for continuous integration. CI services like
Visual Studio Online can run CasperJS without a problem. Selenium is different, you need the existance of certain browser in order to test on the page.
Final words, choose your best tool to help you!