d dkdevelopmentkommunikationdesign

Welcome

Peter Foerger, Senior Developer @bauschan

Agenda

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

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

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

DalekJS Caveats

Webfonts (Phantom JS Issue) Mouse Events - TBA *.js only on *nix systems Error handling - TBA setUp/tearDown - TBA No HTTP Status Codes

Vagrant Base Box

Requirements !

Vagrant 1.6.x VirtualBox 4.3x

InstallationVagrant 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‘ from Fileserver

Add it as a base box: $ vagrant box add dalekjs /path/to/the/dalekjs.box

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

InstallationNode.js/DalekJS

Recommendation forUbuntu 12.04 LTS

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

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

DalekJS Overview

Assertions / Actions Phantom JS /Chrome/IE/Firefox/Safari Mobil Screenshots Resize Window Execute Javascript Driver Webdriver/ Sauce Labs

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']! }! }!!});!!/**! * Loads tasks located in the tasks directory.! */!grunt.loadTasks('tasks');!!grunt.registerTask('default', ['dalek']);!

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.sauce": {!! ! "user": "peter_foerger",!! ! "key": „yourSauceLabsKey"!! },!…!

Driver SauceLabs

"browsers": [{!! ! "iphone": {!! ! ! "platform": "Mac 10.6",!! ! ! "actAs": "iphone",!! ! ! "browserName": "iphone",!! ! ! "version": 5!! ! },!! ! "android": {!! ! ! "platform": "Linux",!! ! ! "actAs": "android",!! ! ! "version": 4.3!! ! }!! }],!! "browser": ["iphone"]!

Taking Screenshots

DalekJS -> PhantomJS

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

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_script:! - dalek test/*.js

Remote testing

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

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_script:! - dalek test/*.js

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 and Errors node server.js 2> error.log// Object contents console.dir(myObject); // Stacktrace console.trace();

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

Debugging Node.js

REPL- examining the current state

Watchers

watch("my_expression")!!watchers // prints active watchers!!unwatch("my_expression")!!!

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)

!

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

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

!

!

PhpStorm Node Debugger

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/

d dkdevelopmentkommunikationdesign

thank you.