d dkdevelopment
kommunikation
design
Welcome
Peter Foerger, Senior Developer
@bauschan
Agenda
Agenda Part 1
Introduction
Vagrant Box / Trello Accounts
Install NodeJS - Caveats / Best Practises
Install DalekJS
Run fir...
Agenda Part 2
Work on the issues
Code Reviews
Integrate tests on CI Server
The fun stuff
Grunt plugin
Remote Testing / Run...
DalekJS

Why?
Relies on Standards - WebDriver/JSON-Wire
Only dependency in Node.js
Abstraction layer for PhantomJS

with a...
DalekJS

Caveats
Webfonts (Phantom JS Issue)
Mouse Events - TBA
*.js only on *nix systems
Error handling - TBA
setUp/tearD...
Vagrant
Base Box
Requirements
!
Vagrant 1.6.x
VirtualBox 4.3x
Installation

Vagrant VM
Add the dalekjs base box
Initialize Vagrant
Adapt Vagrantfile
Start the Box
Installation Vagrant Box
Requirements
VirtualBox 4.3.x
Vagrant ~> 1.0.x preferably 1.6.3

Installation
Copy dalekjs.box‘ f...
Installation Vagrant Box
Installation
Initialize the dalek box

$ vagrant init dalekjs!
Enable the GUI

$ vi Vagrantfile

...
Installation

Node.js/DalekJS
Recommendation for

Ubuntu 12.04 LTS
Installation Node.js
Add repository / install package
sudo apt-get update
sudo apt-get install python-software-properties ...
Installation DalekJS
Create a directory and cd into
Create a package.json file

{
"name": "t3ddDalekJS",
"description": "T...
DalekJS

Overview
Assertions / Actions
Phantom JS /Chrome/IE/Firefox/Safari Mobil
Screenshots
Resize Window
Execute Javasc...
Grunt

Javascript Taskrunner

used for automation & more

grunt -dalek
Inside projects folder

$ npm install grunt-dalek --save-dev
!
Gruntfile.js
grunt.loadNpmTasks('grunt-dalek')...
grunt -dalek
Example Configuration

grunt.initConfig({
dalek: {!
dist: {!
src: ['test/example/test-github.js']!
}!
}!
!
})...
SauceLabs

Dalek driver

Run your tests within the sauce cloud

Driver SauceLabs
Installation
$ npm install dalek-driver-sauce --save-dev!


Dalekfile.json


{!
! "driver": ["sauce"],!
!...
Driver SauceLabs
"browsers": [{!
! ! "iphone": {!
! ! ! "platform": "Mac 10.6",!
! ! ! "actAs": "iphone",!
! ! ! "browserN...
Taking
Screenshots

DalekJS -> PhantomJS
Screenshots
!
!
!
// creates 'my/folder/my_file.png'!
test.screenshot(‚my/folder/my_file');!
!
// creates 'my/page/in/safa...
CI/CD

Jenkins
Travis
CI/CD
Jenkins
!
Junit reporter
$ npm install dalek-reporter-junit —save-dev
$ dalek your_test.js -r console,junit



!
!
!...
CI/CD
Travis CI


.travis.yml

language: node_js!
node_js:!
- "0.10"!
before_script:!
- npm install -g dalek-cli!
after_sc...
Remote testing

Test against remote machines
Remote Server
dalek —remote

Remote connection is ready on IP: 10.1.3.3:9020
!
Local Machine
...
Test against remote machines
Run your test
!
$ dalek tests/exists.js -b ieWin!
!
!
!
!
CI/CD
Travis CI


.travis.yml

language: node_js!
node_js:!
- "0.10"!
before_script:!
- npm install -g dalek-cli!
after_sc...
Debugging

Outputting debugging information
Node’s built-in debugger
Node Inspector
PHPStorm Node’s debugger
Debugging Node.js
Console Module
!
// Arguments can be printf()-style:
console.log('Counter: %d', counter);
!
// Warnings ...
Debugging Node.js
Built-in debugger
!
Call node with the ‚debug‘ keyword
node debug someFile.js!
!
Statement ‚debugger‘
ht...
Debugging Node.js
REPL- examining the current state
Watchers
watch("my_expression")!
!
watchers // prints active watchers!...
Debugging Node.js
Stepping
cont, c - Continue execution
next, n - Step next
step, s - Step in
out, o - Step out
pause - Pa...
Debugging Node.js
Breakpoints
setBreakpoint(), sb() - Set breakpoint on current
line
setBreakpoint(line), sb(line) - Set b...
Node Inspector
Installation

$ npm install -g node-inspector
Run app in debug mode

$ node --debug-brk myApp.js
Start Node...
PhpStorm Node Debugger
Further
Readings
http://dalekjs.com/pages/documentation.html
https://saucelabs.com
https://github.com/node-inspector/node-...
d dkdevelopment
kommunikation
design
thank you.
DalekJS Workshop at T3DD14
Upcoming SlideShare
Loading in …5
×

DalekJS Workshop at T3DD14

1,497 views

Published on

Introduction to Cross-Browser-Testing with DalekJS at the TYPO3 Developer Days 2014

Published in: Software, Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,497
On SlideShare
0
From Embeds
0
Number of Embeds
56
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

DalekJS Workshop at T3DD14

  1. 1. d dkdevelopment kommunikation design
  2. 2. Welcome Peter Foerger, Senior Developer @bauschan
  3. 3. Agenda
  4. 4. 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
  5. 5. 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

  6. 6. 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
  7. 7. DalekJS
 Caveats Webfonts (Phantom JS Issue) Mouse Events - TBA *.js only on *nix systems Error handling - TBA setUp/tearDown - TBA No HTTP Status Codes
  8. 8. Vagrant Base Box Requirements ! Vagrant 1.6.x VirtualBox 4.3x
  9. 9. Installation
 Vagrant VM Add the dalekjs base box Initialize Vagrant Adapt Vagrantfile Start the Box
  10. 10. 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
  11. 11. 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
  12. 12. Installation
 Node.js/DalekJS Recommendation for
 Ubuntu 12.04 LTS
  13. 13. 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
  14. 14. 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
  15. 15. DalekJS
 Overview Assertions / Actions Phantom JS /Chrome/IE/Firefox/Safari Mobil Screenshots Resize Window Execute Javascript Driver Webdriver/ Sauce Labs
  16. 16. Grunt
 Javascript Taskrunner
 used for automation & more

  17. 17. grunt -dalek Inside projects folder
 $ npm install grunt-dalek --save-dev ! Gruntfile.js grunt.loadNpmTasks('grunt-dalek');!
  18. 18. 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']);!
  19. 19. SauceLabs
 Dalek driver
 Run your tests within the sauce cloud

  20. 20. Driver SauceLabs Installation $ npm install dalek-driver-sauce --save-dev! 
 Dalekfile.json 
 {! ! "driver": ["sauce"],! ! "driver.sauce": {! ! ! "user": "peter_foerger",! ! ! "key": „yourSauceLabsKey"! ! },! …!
  21. 21. Driver SauceLabs "browsers": [{! ! ! "iphone": {! ! ! ! "platform": "Mac 10.6",! ! ! ! "actAs": "iphone",! ! ! ! "browserName": "iphone",! ! ! ! "version": 5! ! ! },! ! ! "android": {! ! ! ! "platform": "Linux",! ! ! ! "actAs": "android",! ! ! ! "version": 4.3! ! ! }! ! }],! ! "browser": ["iphone"]!
  22. 22. Taking Screenshots
 DalekJS -> PhantomJS
  23. 23. 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');! !
  24. 24. CI/CD
 Jenkins Travis
  25. 25. CI/CD Jenkins ! Junit reporter $ npm install dalek-reporter-junit —save-dev $ dalek your_test.js -r console,junit
 
 ! ! ! !
  26. 26. 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
  27. 27. Remote testing

  28. 28. 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"! ! ! }! ! }]! }!
  29. 29. Test against remote machines Run your test ! $ dalek tests/exists.js -b ieWin! ! ! ! !
  30. 30. 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
  31. 31. Debugging
 Outputting debugging information Node’s built-in debugger Node Inspector PHPStorm Node’s debugger
  32. 32. 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();
  33. 33. 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');! !
  34. 34. Debugging Node.js REPL- examining the current state Watchers watch("my_expression")! ! watchers // prints active watchers! ! unwatch("my_expression")! ! !
  35. 35. 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) !
  36. 36. 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
  37. 37. 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 ! !
  38. 38. PhpStorm Node Debugger
  39. 39. 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/
  40. 40. d dkdevelopment kommunikation design thank you.

×