class: center, middle # Richard Wilde ## CasperJs ### Ask me questions: @rippo ### https://github.com/rippo --- class: center, middle # Why test the UI? ## (end-to-end testing) # What did I try? ## Selenuim, Web Driver, Coypu and now CasperJS --- # What is PhantomJS? PhantomJS is a headless WebKit scriptable with a JavaScript API. It supports: DOM handling, CSS selector, JSON, Canvas, and SVG. * Full web stack * No browser required # What is CasperJS? CasperJS is a navigation scripting & testing utility written in Javascript that depends on PhantomJS. It provides methods & syntactic sugar for doing common tasks such as: * Testing your ui * Screen scraping including screen grabs --- # Wouldn't it be nice... ## to be able to UI test your code changes before you check into source! .center[![](/slides/benice.png)] --- # Agenda 1. Getting setup 2. Screen grab demo 3. Testing scenarios 4. Review Page Object Pattern (with typescript and @code) --- # Getting setup 1. You will need node http://nodejs.org/ 2. Download phantomjs from http://phantomjs.org/download.html `(copy it to %APPDATA%\npm)` 2. Open CMD prompt and install CasperJS (it bundles PhantomJs) ````DOS $ npm install casperjs -g ```` Edit the following file ````DOS $ notepad %APPDATA%\npm\casperjs.cmd ```` 3. To remove dependancy on Python and to use the latest version of Phantom ````DOS @ECHO OFF CLS SET PHANTOMJS_EXECUTABLE=%APPDATA%\npm\phantomjs.exe %~dp0\node_modules\casperjs\bin\casperjs %* ```` 4. Check casper and phantom are installed, it should return `1.1.4` and `2.1.1` ````DOS $ casperjs --version $ phantomjs --version ```` --- #Screen Grab * CasperJS is not just a testing tool it is also great at screen scraping! * It can also take screen shots at different resolutions ##Demo ````JavaScript { viewportSize: { width:1024, height:800 } } ```` --- #Test 01 - Our first test * Look at MVC Site ##Demo --- #Test 01 - Our first test ## What did we just do?## * we do not need to create a new casper instance (allows us to chain tests) ````JavaScript casper.test.begin('Home Page Tests', 3, function (test) { ```` * when the page loaded, we asserted the title was `Home - CasperJS Mvc` * we then asserted that two pieces of text existed * we ran the tests and informed CasperJS we were done ````JavaScript casper.run(function () { test.done(); }); ```` --- #Test 02 - Navigation test ##Demo ````css ul > li:nth-child(2) > a ```` OR ````css a[href='/home/about'] ```` --- #Test 03 - Fill in a form ##Demo #### Spoiler alert... ````JavaScript // assert a selector exists test.assertExists('form[action="/home/contact"]'); // fill in a form, note use fillSelectors NOT deprecated fill this.fillSelectors('form', { "input[name='ContactName']": 'Richard Wilde' }, true); // waits for a selector after a button has been clicked casper.waitForSelector('#EmailAddress', ... ```` --- #Test 04 - Evaluate ##Demo #### Spoiler alert... ````JavaScript // run some javascript/jquery code casper.thenEvaluate(... ```` --- #Test 05 - Command Line Args ##Demo #### Spoiler alert... ````DOS $ casperjs test --baseUrl="http://localhost:43504" test05.js ```` ````JavaScript casper.cli.options.baseUrl ```` --- #some useful pointers... ##Run all tests in a directory (includes sub dirs) ````DOS $ casperjs test --baseUrl="http://localhost:43504" . ```` ##XUnit output (good for TeamCity etc) ````DOS $ casperjs test --xunit=1.xml --baseUrl="http://localhost:43504" . ```` ##Fail fast ````DOS $ casperjs test --fail-fast --baseUrl="http://localhost:43504" . ```` --- #Page Object Pattern .center[![](/slides/Page.Object.png)] --- #Check out these useful links * ####Casper Docs - API documentation http://docs.casperjs.org/en/latest/modules/index.html * ####CasperJS Page Object Pattern - http://jsebfranck.blogspot.co.uk/2014/03/page-object-pattern-with-casperjs.html - http://martinfowler.com/bliki/PageObject.html - https://github.com/SeleniumHQ/selenium/wiki/PageObjects * ####Tell Don’t Ask vs Single Responsibility Principle - http://blog.thepete.net/blog/2013/09/13/assertions-in-page-objects/ * ####Git Repository - https://github.com/rippo/ --- class: center, middle #Questions? SPA's Animations and timings Events and listeners Failed test screen grabs Unit testing --- class: center, middle #Thanks ##Hope you found it useful! Ask me questions on twitter @rippo