Being a Java developer is kinda hard these days. Java may not be dead yet<\/a>, but when keeping in sync with all the hipster JavaScript frameworks could make us feel a bit outside the playground. It\u2019s even hard to list<\/a> JavaScript<\/a> frameworks<\/a> with latest releases on one website.<\/p>\n In my current project, we are using AngularJS<\/a>. It\u2019a a nice abstraction of MV* pattern in frontend layer of any web application (we use Grails underneath). Here<\/a> is a nice article with an 8-point Win List of Angular way of handling AJAX calls and updating the view. So it\u2019s not only a funny new framework but a truly helper of keeping your code clean and neat.<\/p>\n But there is also another area when you can put helpful JS framework in place of plan-old-java one – functional tests. Especially when you are dealing with one page app with lots of asynchronous REST\/JSON communication.<\/p>\n In Java\/JVM project the typical is to use Selenium<\/a> with some wrapper like Geb<\/a>. So you start your project, setup your CI-functional testing pipeline and\u2026 after 1 month of coding your tests stop working and being maintainable. The frameworks itselves are not bad, but the typical setup is so heavy and has so many points of failure that keeping it working in a real life project is really hard.<\/p>\n Here is my list of common myths about Selenium: So I decided to try something different and introduce a bit of JavaScript tooling in our project by using CasperJS.<\/p>\n CasperJS<\/a> is simple but powerful navigation scripting & testing utility for PhantomJS<\/a> – scritable headless WebKit (which is an rendering engine used by Safari and Chrome). In short – CasperJS allows you to navigate and make assertions about web pages as they\u2019d been rendered in Google Chrome. It is enough for me to automate the functional tests of my application.<\/p>\n If you want a gentle introduction to the world of CasperJS I suggest you to read: I run my test suite via following script:<\/p>\n casper-angular.coffe<\/p>\n Sample pages.coffee:<\/p>\n End a test script:<\/p>\n Here is a list of CasperJS features\/caveats used here:<\/p>\nSelenium and Geb<\/h2>\n
\n* It allows you to record test scripts via handy GUI<\/em> – maybe some static request\/response sites. In modern web applications with asynchronous REST\/JSON communication your tests must contain a lot of \u201cwaitFor\u201d statements and you cannot automate where these should be included.
\n* It allows you to test your web app against many browsers<\/em> – don\u2019t try to automate IE tests! You have to manually open your app in IE to see how it actually bahaves!
\n* It integrates well with continuous integration servers like Jenkins<\/em> – you have to setup Selenium Grid on server with X installed to run tests on Chrome or Firefox and a Windows server for IE. And the headless HtmlUnit driver lacks a lot of JS support.<\/p>\nIntroduction<\/h2>\n
\n* Official website<\/a>, especially installation guide<\/a> and API<\/a>
\n* Introductionary article<\/a> from CasperJS creator Nicolas Perriault<\/strong>
\n* Highlevel testing with CasperJS<\/a> by Kevin van Zonneveld<\/strong>
\n* grails-angular-scaffolding<\/a> plugin by Rob Fletcher<\/strong> with some working CasperJS tests<\/a><\/p>\nFull example<\/h2>\n
casperjs test --direct --log-level=debug --testhost=localhost:8080 --includes=test\/casper\/includes\/casper-angular.coffee,test\/casper\/includes\/pages.coffee test\/casper\/specs\/\r\n<\/pre>\n<\/div>\n
casper.test.on \"fail\", (failure) ->\r\n casper.capture(screenshot)\r\n\r\ntesthost = casper.cli.get \"testhost\"\r\nscreenshot = 'test-fail.png'\r\n\r\ncasper\r\n .log(\"Using testhost: #{testhost}\", \"info\")\r\n .log(\"Using screenshot: #{screenshot}\", \"info\")\r\n\r\ncasper.waitUntilVisible = (selector, message, callback) ->\r\n @waitFor ->\r\n @visible selector\r\n , callback, (timeout) ->\r\n @log(\"Selector [#{selector}] not visible, failing\")\r\n withParentSelector selector, (parent) ->\r\n casper.log(\"Output of parent selector [#{parent}]\")\r\n casper.debugHTML(parent)\r\n @echo message, \"RED_BAR\"\r\n @capture(screenshot)\r\n @test.fail(f(\"Wait timeout occured (%dms)\", timeout))\r\n\r\nwithParentSelector = (selector, callback) ->\r\n if selector.lastIndexOf(\" \") > 0\r\n parent = selector[0..selector.lastIndexOf(\" \")-1]\r\n callback(parent)\r\n<\/pre>\n<\/div>\nx = require('casper').selectXPath\r\n\r\nclass EditDocumentPage\r\n\r\n assertAt: ->\r\n casper.test.assertSelectorExists(\"div.customerAccountInfo\", 'at EditDocumentPage')\r\n\r\n templatesTreeFirstCategory: 'ul.tree li label'\r\n templatesTreeFirstTemplate: 'ul.tree li a'\r\n closePreview: '.closePreview a'\r\n smallPreview: '.smallPreviewContent img'\r\n bigPreview: 'img.previewImage'\r\n confirmDelete: x(\"\/\/div[@class='modal-footer']\/a[1]\")\r\n\r\ncasper.editDocument = new EditDocumentPage()\r\n<\/pre>\n<\/div>\ntesthost = casper.cli.get \"testhost\" or 'localhost:8080'\r\n\r\ncasper.start \"http:\/\/#{testhost}\/app\", ->\r\n @test.assertHttpStatus 302\r\n @test.assertUrlMatch \/\\\/fakeLogin\/, 'auto login'\r\n @test.assert @visible('input#Create'), 'mock login button'\r\n @click 'input#Create'\r\n\r\ncasper.then ->\r\n @test.assertUrlMatch \/document#\\\/edit\/, 'new document'\r\n @editDocument.assertAt()\r\n @waitUntilVisible @editDocument.templatesTreeFirstCategory, 'template categories not visible', ->\r\n @click @editDocument.templatesTreeFirstCategory\r\n @waitUntilVisible @editDocument.templatesTreeFirstTemplate, 'template not visible', ->\r\n @click @editDocument.templatesTreeFirstTemplate\r\n\r\ncasper.then ->\r\n @waitUntilVisible @editDocument.smallPreview, 'small preview not visible', ->\r\n # could be dblclick \/ whatever\r\n @mouseEvent('click', @editDocument.smallPreview)\r\n\r\ncasper.then ->\r\n @waitUntilVisible @editDocument.bigPreview, 'big preview should be visible', ->\r\n @test.assertEvalEquals ->\r\n $('.pageCounter').text()\r\n , '1\/1', 'page counter should be visible'\r\n @click @editDocument.closePreview\r\n\r\ncasper.then ->\r\n @click 'button.cancel'\r\n @waitUntilVisible '.modal-footer', 'delete confirmation not visible', ->\r\n @click @editDocument.confirmDelete\r\n\r\ncasper.run ->\r\n @test.done()\r\n<\/pre>\n<\/div>\n\n
--direct --log-level=debug<\/code> from commandline for best results. Logging is essential here since Phantom often exists without any error and you do want to know what just happened.<\/li>\n--includes<\/code> switch.<\/li>\nlog<\/code> statement. In my version I also look for a parent selector and debugHTML<\/code> the content of it – great for debugging what is actually rendered by the browser.<\/li>\n@editDocument.assertAt()<\/code>.<\/li>\n:first<\/code> and :last<\/code> selectors. I cannot get them working (but maybe I\u2019m doing something wrong?). But in CasperJS you can also use XPath selectors which are fine for matching n-th child of some element (x(\"\/\/div[@class='modal-footer']\/a[1]\")<\/code>).\n
![may not be dead yet<\/a>, but when keeping in sync with all the hipster JavaScript frameworks could make us feel a bit outside the playground. It\u2019s even hard to](\"http:\/\/1.bp.blogspot.com\/-GLkCsR5eEIA\/TXELWvpXsEI\/AAAAAAAAACc\/Oym-S4t7nSc\/s1600\/java-is-dead.png\"){kind=link}