dalekjs workshop at t3dd14
DESCRIPTION
Introduction to Cross-Browser-Testing with DalekJS at the TYPO3 Developer Days 2014TRANSCRIPT
![Page 1: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/1.jpg)
d dkdevelopmentkommunikationdesign
![Page 2: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/2.jpg)
![Page 3: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/3.jpg)
Welcome
Peter Foerger, Senior Developer @bauschan
![Page 4: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/4.jpg)
Agenda
![Page 5: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/5.jpg)
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
![Page 6: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/6.jpg)
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
![Page 7: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/7.jpg)
DalekJS Why?
Relies on Standards - WebDriver/JSON-Wire Only dependency in Node.js Abstraction layer for PhantomJSwith a testing API on top Writing tests feels natural
![Page 8: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/8.jpg)
DalekJS Caveats
Webfonts (Phantom JS Issue) Mouse Events - TBA *.js only on *nix systems Error handling - TBA setUp/tearDown - TBA No HTTP Status Codes
![Page 9: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/9.jpg)
Vagrant Base Box
Requirements !
Vagrant 1.6.x VirtualBox 4.3x
![Page 10: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/10.jpg)
InstallationVagrant VM
Add the dalekjs base box Initialize Vagrant Adapt Vagrantfile Start the Box
![Page 11: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/11.jpg)
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
![Page 12: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/12.jpg)
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
![Page 13: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/13.jpg)
InstallationNode.js/DalekJS
Recommendation forUbuntu 12.04 LTS
![Page 14: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/14.jpg)
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
![Page 15: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/15.jpg)
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
![Page 16: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/16.jpg)
DalekJS Overview
Assertions / Actions Phantom JS /Chrome/IE/Firefox/Safari Mobil Screenshots Resize Window Execute Javascript Driver Webdriver/ Sauce Labs
![Page 17: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/17.jpg)
Grunt
Javascript Taskrunner used for automation & more
![Page 18: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/18.jpg)
grunt -dalek
Inside projects folder$ npm install grunt-dalek --save-dev !Gruntfile.js grunt.loadNpmTasks('grunt-dalek');!
![Page 19: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/19.jpg)
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']);!
![Page 20: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/20.jpg)
SauceLabs
Dalek driver Run your tests within the sauce cloud
![Page 21: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/21.jpg)
Driver SauceLabs
Installation $ npm install dalek-driver-sauce --save-dev!
Dalekfile.json {!! "driver": ["sauce"],!! "driver.sauce": {!! ! "user": "peter_foerger",!! ! "key": „yourSauceLabsKey"!! },!…!
![Page 22: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/22.jpg)
Driver SauceLabs
"browsers": [{!! ! "iphone": {!! ! ! "platform": "Mac 10.6",!! ! ! "actAs": "iphone",!! ! ! "browserName": "iphone",!! ! ! "version": 5!! ! },!! ! "android": {!! ! ! "platform": "Linux",!! ! ! "actAs": "android",!! ! ! "version": 4.3!! ! }!! }],!! "browser": ["iphone"]!
![Page 23: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/23.jpg)
Taking Screenshots
DalekJS -> PhantomJS
![Page 24: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/24.jpg)
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');!!
![Page 25: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/25.jpg)
CI/CD
Jenkins Travis
![Page 26: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/26.jpg)
CI/CD
Jenkins !Junit reporter $ npm install dalek-reporter-junit —save-dev$ dalek your_test.js -r console,junit
!
!
!!
![Page 27: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/27.jpg)
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
![Page 28: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/28.jpg)
Remote testing
![Page 29: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/29.jpg)
Test against remote machines
Remote Server dalek —remoteRemote 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"!! ! }!! }]!}!
![Page 30: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/30.jpg)
Test against remote machines
Run your test !$ dalek tests/exists.js -b ieWin!!
!
!!
![Page 31: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/31.jpg)
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
![Page 32: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/32.jpg)
Debugging
Outputting debugging information Node’s built-in debugger Node Inspector PHPStorm Node’s debugger
![Page 33: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/33.jpg)
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();
![Page 34: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/34.jpg)
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');!!
![Page 35: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/35.jpg)
Debugging Node.js
REPL- examining the current state
Watchers
watch("my_expression")!!watchers // prints active watchers!!unwatch("my_expression")!!!
![Page 36: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/36.jpg)
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)
!
![Page 37: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/37.jpg)
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
![Page 38: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/38.jpg)
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 Browserhttp://127.0.0.1:8080/debug?port=5858
!
!
![Page 39: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/39.jpg)
PhpStorm Node Debugger
![Page 40: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/40.jpg)
Further Readings
http://dalekjs.com/pages/documentation.html https://saucelabs.com https://github.com/node-inspector/node-inspector https://wiki.jenkins-ci.org/display/JENKINS/HTML+Publisher+Plugin http://gruntjs.com/
![Page 41: DalekJS Workshop at T3DD14](https://reader037.vdocument.in/reader037/viewer/2022110118/554f5d65b4c9058a148b457d/html5/thumbnails/41.jpg)
d dkdevelopmentkommunikationdesign
thank you.