All these testing things are really helpful, but it will be even better if we are able to run a real browser and control it. With DalekJS, this is possible. It's really a nice Node.js module that comes with the command-line interface tool and submodules for the major browsers such as Google Chrome, Firefox, and, Internet Explorer.
Let's install the Dalek CLI:
$ npm install -g dalek-cli
DalekJS supports several browsers including Google Chrome, so we will use it. Of course, we should have it installed onto our system. Once the Dalek CLI is installed, let's create a folder for our test and put package.json there with the following content:
{
"name": "DalekJS-Test",
"description": "DalekJS Test Description",
"version": "0.0.1",
"devDependencies": {
"dalekjs": "*",
"dalek-browser-chrome": "*"
}
}A quick npm install command will create the node_modules directory with both dependencies inside.
Tip
DalekJS has a good documentation at http://dalekjs.com/pages/documentation.html.
On this site, we can find methods to load the pages, fill forms, click on buttons, query DOM, and so on.
In our test file, we will add the following testing code:
var url = 'http://localhost:1841/';
var title = 'DalekJS test';
module.exports = {
'should interact with the application': function (test) {
test
.open(url)
.assert.title().is('Imaginary')
.wait(500)
.assert.text('#takePhotoBtn', 'Take Photo', 'The title on the button "Take Photo"')
.click('#takePhotoBtn')
.wait(500)
.assert.text('#retakePhotoBtn', 'Retake', 'The title on the retake button "Retake"')
.assert.text('#savePhotoBtn', 'Save', 'The title on the save button "Save"')
.assert.text('#closePhotoBtn', 'Close', 'The title on the close button "Close"')
.done()
}
};Here, we requested http://localhost:1841/, which should be running by Sencha web server. Once our test loads the application, we checked whether the title of the page is as expected. After that, we waited for 500 milliseconds to be sure that all our Sencha components are loaded. After timeout, we checked the text on the Take Photo button and clicked on it. Then, we waited for the popup to appear. After timeout, we did several UI checks again.
To run the test, we simply need to run the following command in the console:
$ dalek test.js -b chrome
It will start the Chrome browser and execute all the tests. The test run results should look like this:
Running tests Running Browser: Google Chrome OS: Mac OS X 10.10.3 x86_64 Browser Version: 43.0.2357.130 RUNNING TEST - "should interact with the application" ▶ OPEN http://localhost:1841/ ✔ TITLE ▶ WAIT 500 ms ✔ TEXT The title on the button "Take Photo" ▶ CLICK #takePhotoBtn ▶ WAIT 500 ms ✔ TEXT The title on the retake button "Retake" ✔ TEXT The title on the save button "Save" ✘ TEXT 0 EXPECTED: Close 0 FOUND: [object Object] 0 MESSAGE: The title on the close button "Close" ✘ TEST - "should interact with the application" FAILED 4/5 assertions passed. Elapsed Time: 4.01 sec
As you can see, we got one assertion failing. This is because we put the wrong selector for the Close button. Let's fix it. Take the following line of code:
.assert.text('#closePhotoBtn', 'Close', 'The title on the close button "Close"')We need to change it to this line of code:
.assert.text('#cancelPhotoBtn', 'Close', 'The title on the close button "Close"')After the test run, we will see that all the tests passed:
✔ TEST - "should interact with the application" SUCCEEDED 5/5 assertions passed. Elapsed Time: 3.46 sec
We could even make screenshots of the current browser's screen:
var url = 'http://localhost:1841/';
var title = 'DalekJS test';
module.exports = {
'should interact with the application': function (test) {
//...
.screenshot('./screen.jpg')
.done()
}
};Here, we took a screenshot of the second screen (popup).