More Related Content
What's hot
What's hot (20)
Similar to DalekJS Workshop at T3DD14
Similar to DalekJS Workshop at T3DD14 (20)
Recently uploaded
Recently uploaded (20)
DalekJS Workshop at T3DD14
- 3. Welcome Peter Foerger, Senior Developer @bauschan
- 4. Agenda
- 5. Agenda Part 1 Introduction Vagrant Box / Trello Accounts Install NodeJS - Caveats / Best Practises Install DalekJS Run firsts test Documentation Trello Board Issues BREAK ~10 min
- 6. Agenda Part 2 Work on the issues Code Reviews Integrate tests on CI Server The fun stuff Grunt plugin Remote Testing / Run tests in the cloud Debugging CI/CD
- 7. DalekJS Why? Relies on Standards - WebDriver/JSON-Wire Only dependency in Node.js Abstraction layer for PhantomJS with a testing API on top Writing tests feels natural
- 8. DalekJS Caveats Webfonts (Phantom JS Issue) Mouse Events - TBA *.js only on *nix systems Error handling - TBA setUp/tearDown - TBA No HTTP Status Codes
- 10. Installation Vagrant VM Add the dalekjs base box Initialize Vagrant Adapt Vagrantfile Start the Box
- 11. Installation Vagrant Box Requirements VirtualBox 4.3.x Vagrant ~> 1.0.x preferably 1.6.3 Installation Copy dalekjs.box‘ from Fileserver Add it as a base box: $ vagrant box add dalekjs /path/to/the/dalekjs.box
- 12. Installation Vagrant Box Installation Initialize the dalek box $ vagrant init dalekjs! Enable the GUI $ vi Vagrantfile Uncomment the VirtualBox configuration! Start the VM $ vagrant up
- 14. Installation Node.js Add repository / install package sudo apt-get update sudo apt-get install python-software-properties python g++ make sudo add-apt-repository ppa:chris-lea/node.js sudo apt-get update sudo apt-get install nodejs ! Set local node prefix echo prefix = ~/.node >> ~/.npmrc echo 'export PATH=$HOME/.node/bin:$PATH' >> ~/.bashrc . ~/.bashrc ! Verify that everything’s in place node -v // v0.10.28 npm -v // 1.4.9
- 15. Installation DalekJS Create a directory and cd into Create a package.json file { "name": "t3ddDalekJS", "description": "Tests for typo3.org", "version": "0.0.1" } ! $ npm install dalek-cli -g $ npm install dalekjs --save-dev
- 16. DalekJS Overview Assertions / Actions Phantom JS /Chrome/IE/Firefox/Safari Mobil Screenshots Resize Window Execute Javascript Driver Webdriver/ Sauce Labs
- 17. Grunt Javascript Taskrunner used for automation & more
- 18. grunt -dalek Inside projects folder $ npm install grunt-dalek --save-dev ! Gruntfile.js grunt.loadNpmTasks('grunt-dalek');!
- 19. grunt -dalek Example Configuration grunt.initConfig({ dalek: {! dist: {! src: ['test/example/test-github.js']! }! }! ! });! ! /**! * Loads tasks located in the tasks directory.! */! grunt.loadTasks('tasks');! ! grunt.registerTask('default', ['dalek']);!
- 20. SauceLabs Dalek driver Run your tests within the sauce cloud
- 21. Driver SauceLabs Installation $ npm install dalek-driver-sauce --save-dev! Dalekfile.json {! ! "driver": ["sauce"],! ! "driver.sauce": {! ! ! "user": "peter_foerger",! ! ! "key": „yourSauceLabsKey"! ! },! …!
- 22. Driver SauceLabs "browsers": [{! ! ! "iphone": {! ! ! ! "platform": "Mac 10.6",! ! ! ! "actAs": "iphone",! ! ! ! "browserName": "iphone",! ! ! ! "version": 5! ! ! },! ! ! "android": {! ! ! ! "platform": "Linux",! ! ! ! "actAs": "android",! ! ! ! "version": 4.3! ! ! }! ! }],! ! "browser": ["iphone"]!
- 24. Screenshots ! ! ! // creates 'my/folder/my_file.png'! test.screenshot(‚my/folder/my_file');! ! // creates 'my/page/in/safari/homepage.png'! test.screenshot(‚my/page/in/:browser/homepage');! ! // creates 'my/page/in/safari_6_0_1/homepage.png'! test.screenshot(‚my/page/in/:browser_:version/homepage');! ! // creates 'my/page/in/safari_6_0_1/on/osx/homepage.png'! test.screenshot('my/page/in/:browser_:version/on/:os/homepage');! !
- 26. CI/CD Jenkins ! Junit reporter $ npm install dalek-reporter-junit —save-dev $ dalek your_test.js -r console,junit ! ! ! !
- 27. CI/CD Travis CI .travis.yml language: node_js! node_js:! - "0.10"! before_script:! - npm install -g dalek-cli! after_script:! - dalek test/*.js
- 28. Remote testing
- 29. Test against remote machines Remote Server dalek —remote Remote connection is ready on IP: 10.1.3.3:9020 ! Local Machine {! ! "browsers": [{! ! ! "ieWin": {! ! ! ! "actAs": "ie",! ! ! ! "type": "remote",! ! ! ! "host": "10.1.3.3",! ! ! ! "port": "9020"! ! ! }! ! }]! }!
- 30. Test against remote machines Run your test ! $ dalek tests/exists.js -b ieWin! ! ! ! !
- 31. CI/CD Travis CI .travis.yml language: node_js! node_js:! - "0.10"! before_script:! - npm install -g dalek-cli! after_script:! - dalek test/*.js
- 32. Debugging Outputting debugging information Node’s built-in debugger Node Inspector PHPStorm Node’s debugger
- 33. Debugging Node.js Console Module ! // Arguments can be printf()-style: console.log('Counter: %d', counter); ! // Warnings and Errors node server.js 2> error.log // Object contents console.dir(myObject); // Stacktrace console.trace();
- 34. Debugging Node.js Built-in debugger ! Call node with the ‚debug‘ keyword node debug someFile.js! ! Statement ‚debugger‘ http.createServer(function (req, res) {! debugger;! handleRequest(req, res);! }).listen(1337, '127.0.0.1');! !
- 35. Debugging Node.js REPL- examining the current state Watchers watch("my_expression")! ! watchers // prints active watchers! ! unwatch("my_expression")! ! !
- 36. Debugging Node.js Stepping cont, c - Continue execution next, n - Step next step, s - Step in out, o - Step out pause - Pause running code (like pause button in Developer Tools) !
- 37. Debugging Node.js Breakpoints setBreakpoint(), sb() - Set breakpoint on current line setBreakpoint(line), sb(line) - Set breakpoint on specific line setBreakpoint('fn()'), sb(...) - Set breakpoint on a first statement in functions body setBreakpoint('script.js', 1), sb(...) - Set breakpoint on first line of script.js
- 38. Node Inspector Installation $ npm install -g node-inspector Run app in debug mode $ node --debug-brk myApp.js Start Node Inspector $ node-inspector Open a WebKit Browser http://127.0.0.1:8080/debug?port=5858 ! !