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

1. d dkdevelopment
kommunikation
design

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

9. Vagrant
Base Box
Requirements
!
Vagrant 1.6.x
VirtualBox 4.3x

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

13. Installation
Node.js/DalekJS
Recommendation for
Ubuntu 12.04 LTS

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"]!

23. Taking
Screenshots
DalekJS -> PhantomJS

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');!
!

25. CI/CD
Jenkins
Travis

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
!
!

39. PhpStorm Node Debugger

40. 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/

41. d dkdevelopment
kommunikation
design
thank you.