This week & # x27; s guest blog post comes from Peter Braden. Peter is a beginner atFrozen Ridge- a full-stack consultancy that particularize in work hard job for businesses and provides services around node.js, Continuous Integration and Databases. Frozen Ridge are Sauce Labs mate and are available for training and high point consultancy about Continuous Integration and Front-End testing.

--- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -

At a recent training, I gave a talking on integration testing Front-End code with Webdriver. The tools to test Front-End codification have improved a lot recently, so I thought I & # x27; d write a blog position about the current province of the art. Luckily browsers hold get a long way in the last few geezerhood, and many of us are no longer forced to support decades-old browsers like the dreaded IE6. But a lot of the time when working on complex UI & # x27; s or web applications, we & # x27; re working with DOM heavy codification that isn & # x27; t well unit testable. And without some forethought, it & # x27; s easy to get stuck in the nightmare of click-testing your code. Luckily it doesn & # x27; t have to be this way. One of the problems with examine front-end codification is that a lot of the clobber we require to try doesn & # x27; t readily fit into a discrete & # x27; unit & # x27; of codification, so unit testing is often laborious. When each test ask an elaborate sequence of steps to be set up, it is oftentimes easy to justify merely cliking your way through examination, at least while you acquire the code. Test-First development is unmanageable on the front-end and when you & # x27; re trying to unit-test, it can get indefensible.

As a event, I & # x27; ve stop writing front-end unit tests. I don & # x27; t cerebrate unit testing is a model that fits for most front-end scenario. Instead I write integration tests for specific flows. I think this model fits a lot more nicely.

Integration Testing with Chromedriver

The first thing we & # x27; re going to need to write front-end test is a browser that we can well script. For CI I use browser in the cloud with Sauce Labs, but when I & # x27; m exactly writing codification, I want the browser to run locally so I can well debug any errors that occur.

The easiest way I & # x27; ve found is to useChromedriver locally.

Run Chromedriver Daemon:

1. Install Chromedriver

2.Run the Chromedriver Daemon:

chromedriver -- url-base=wd/hub -- verbose=1

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

(There & # x27; s a bug with chromedriver on OSX Mavericks that can be fixed by running in verbose way)

Spawn a browser

Now that we feature the Chromedriver daemon running, we need to spawn a browser programatically.

We & # x27; re going to be writing our tests in node.js using thewd module:

npm install wd

And in test.js:

var wd = require (& # x27; wd & # x27;)
var browser = wd.promiseChainRemote ({hostname: & quot; localhost & quot;, port: 9515})
browser.init ({browserName: & quot; chrome & quot;, & quot; version & quot;: & quot; & quot;}, function () {
browser.get (& quot;https: //www.google.com/")
// Your trial here ...
.fin (function () {
browser.quit ()
    })
    .done()
})

As you can see if you run the above code, a chrome browser will be run, will navigate to google, and will then defeat itself.We & # x27; re nearly there.

Test your flows

When you are writing a web application, you typically think in price of stream the sequence of actions and events that a exploiter will perform in use of a feature.For example, you may receive a & # x27; forgot password & # x27; flow: - User clicks & # x27; forgot password & # x27; link - Link redirects to & # x27; /password/forgot & # x27; - Page hold descriptor with email speech battlefield - User typecast email into field - User submits form - Email should be sent check reset codeEssentially, we want to test transposition of this stream by feign a exploiter performing each action. It & # x27; s not really a & # x27; unit & # x27; to be tested, but nonetheless knowing that this flow works is important.Webdriver makes it fairly little to simulate user activity:

browser.get (& # x27; /login & # x27;)
.elementById (& # x27; forgot-password & # x27;)
.click()

.waitForVisibleById (& # x27; forgot-password-form & # x27;)
.elementById (& # x27; email-address & # x27;)
.type (& # x27;hi @ test-email.com')

.elementById (& # x27; submit-forgot & # x27;)
.click (purpose (err, res) {
// The sort should get been state - we can then assure our database to see if
// a reset codification has be generated:
assert.isNull (err)
mydb.reset_codes.find ({e-mail: & quot;hi @ test-email.com& quot;}, function (err, res) {
assert.isNull (err)
assert.ok (res)
})
})

And as simply as that we & # x27; ve simulated a user locomote through the flow. Because setting up test users with fixtures etc. is a slight boring, I prefer to make my flow test moderately long and imply, and check that thing haven & # x27; t failed periodically throughout the execution. Because the flow tryout will fail as soon as_anything_breaks, you won & # x27; t necessarily get any subsequent examination, but when I & # x27; m testing front-end codification, I & # x27; m far more interested in get comprehensive smoke tests, because if anything breaks, I want to test the total flow anyhow. Because webdriver can also use cloud-based browser, these tests can be run in your CI scheme in multiple browsers very easily, meaning that you can evolve with a test-first mentality, and have that easily transfer into a CI surroundings.