SlideShare a Scribd company logo
1 of 49
LISBON 2018
DRUPAL DEVELOPER DAYS
Browser Testing
with Nightwatch.js
Salvador Molina - @salva_bg
www.adevfromtheplains.com
Diamond Sponsor
Platinum Sponsors
Gold Sponsors
About me...
Salva Molina
• PHP Developer.
• Drupal.org (slv_): field_type_generator,
nodejs_chat, entityreference_autocomplete…
• Working as freelance:
• Drupal & Symfony.
• Security Audits.
• Devops.
About me...
Nightwatch.js
• Introduction & Motivation
• 4 Artifacts to rule them all
• Tips & Tricks
Motivation
aka
The Watermelon Effect
Deploying to production (no tests)
Introduction
Introduction
• Test Runner with parallel execution support.
• JUnit-compliant XML reports.
• assert-like and expect-like validations.
• Hooks: before, beforeEach, after, afterEach.
• Unit Testing support
Main Features
"src_folders" : [
"./tests/nightwatch/tests/"
],
"output_folder" : "./tests/nightwatch/reports",
"custom_commands_path" : "./tests/nightwatch/commands",
"custom_assertions_path" : "./tests/nightwatch/assertions",
"page_objects_path" : [
"./tests/nightwatch/pages/example"
],
"globals_path" : "./tests/nightwatch/data/global.js",
First Stop: Nightwatch.json (I)
"selenium" : {
"start_process" : true,
"server_path" : "./tests/bin/selenium-server-standalone-3.13.0.jar",
"log_path" : "",
"port" : 34567,
"cli_args" : {
"webdriver.chrome.driver" : "./tests/bin/chromedriver"
}
},
First Stop: Nightwatch.json (II)
First Stop: Nightwatch.json (III)
"dev" : {
"launch_url" : "http://127.0.0.1:8000",
"selenium_port" : 9515,
"selenium_host" : "127.0.0.1",
"default_path_prefix" : "",
"desiredCapabilities": {
"browserName": "chrome"
}
}
Bonus! - Nightwatch.conf.js
var selenium = require('selenium-server');
var chromedriver = require('chromedriver');
module.exports = (function(settings) {
settings.selenium.server_path = selenium.path;
settings.selenium.cli_args["webdriver.chrome.driver"] = chromedriver.path;
return settings;
})(require('./nightwatch.json'));
4 Artifacts to rule them all
• Commands.
• Page Objects.
• Asserts.
• Global data.
Artifacts
Tests.
● Generic Actions across the site:
○ .closeWindow().
○ .getValue().
○ .saveScreenshot().
○ .useXpath().
● Custom commands. 2 Types:
○ Function-style.
○ Class-style.
Commands
Function-Style (commands/myCommand.js)
exports.command = function (selector, message) {
// Click and display a message for the action.
this.click(selector, function() {
if (this.globals.test_settings.disable_colors === true) {
console.log(' ✔ ' + message);
}
else {
console.log('033[92m ✔ 033[0m' + message);
}
});
return this;
};
● Simple Test
Demo 1
– Martin Fowler.
“Page objects are a classic example of
encapsulation - they hide the details of the
UI structure and widgetry from other
components (the tests).”
Page Objects (pages/myPage.js)
Page Objects (pages/myPage.js)
Page Objects (pages/myPage.js)
Page Objects (pages/myPage.js)
● Simple Test - (With Page Objects)
Demo 2
Assertions (assertions/myAssertion.js)
exports.assertion = function(selector, comparedValue, msg) {
this.message = msg || util.format('Testing if value of <%s> does not equal: "%s".',
selector, comparedValue);
this.expected = comparedValue;
this.command = function(callback) {};
this.value = function(result) {};
this.pass = function(value) {};
};
BDD Expect Assertions
checkFieldAttribute: function(fieldName, attr, Value) {
this
.expect.element(fieldName).to.have.attribute(attr).equals(Value);
return this;
},
● Language Chains: to, be, been, is, that, which, and, has,
have, with, at, does, of.
user: {
username: 'test3',
password: 'AcceptableUserPassword_-',
},
unexisting_user: {
username: 'nightwatch_' + Date.now(),
firstname: 'NW_First',
display_name: 'NW_First' + 'Surname' + Date.now(),
email: 'nightwatch_' + Date.now() + '@.example.net'
},
Global Data (data/global.js)
Dependencies in remote Server:
Demo 3: Remote Testing via Jenkins
Scenario
Scenario
1
Scenario
1
2
Scenario
1
2
3
Scenario
1
2
4
3
Scenario
Scenario
CI
"ci" : {
"launch_url" : "http://{http_auth_user}:{http_auth_pass}@127.0.0.1:8000",
"selenium_port" : 9515,
"selenium_host" : "127.0.0.1",
"default_path_prefix" : "",
"selenium" : {
"start_process": false
},
"desiredCapabilities": {
"browserName": "chrome",
"chromeOptions": {
"args": ["--headless"]
}
}
}
"test_workers": {
"enabled": true,
"workers": 2
}
Tips & Tricks: Parallel exec
nightwatch --env chrome,firefox
Tips & Tricks: Parallel exec (II)
"ci" : {
"desiredCapabilities": {
"browserName": "chrome",
"chromeOptions": {
"args": ["--headless", "window-size=1400,1000"]
}
}
}
Tips & Tricks: Remote, Headless
Tips & Tricks: Resources
● Official Docs: nightwatchjs.org.
● Starter Repo: https://github.com/salvamomo/nightwatch-starter.
● API CODE: https://github.com/nightwatchjs/nightwatch/tree/master/lib/api.
● All dependencies retrievable through npm.
● 4 Artifacts to rule them all.
● Good bye Selenium (mostly).
● Remote testing: Chrome + Nightwatch + Node.
● Almost fully extensible architecture.
Recap...
Nightwatch 1.0 is coming
Questions?
@Salva_bg
salva.momo[at]gmail.com
www.adevfromtheplains.com
Obrigado!
@Salva_bg
salva.momo[at]gmail.com
www.adevfromtheplains.com

More Related Content

What's hot

AngularJS for designers and developers
AngularJS for designers and developersAngularJS for designers and developers
AngularJS for designers and developers
Kai Koenig
 

What's hot (20)

AngularJS for designers and developers
AngularJS for designers and developersAngularJS for designers and developers
AngularJS for designers and developers
 
AngularJS Animations
AngularJS AnimationsAngularJS Animations
AngularJS Animations
 
Advanced Tips & Tricks for using Angular JS
Advanced Tips & Tricks for using Angular JSAdvanced Tips & Tricks for using Angular JS
Advanced Tips & Tricks for using Angular JS
 
Workshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte IWorkshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte I
 
Angularjs Basics
Angularjs BasicsAngularjs Basics
Angularjs Basics
 
Javascript first-class citizenery
Javascript first-class citizeneryJavascript first-class citizenery
Javascript first-class citizenery
 
AngularJS Framework
AngularJS FrameworkAngularJS Framework
AngularJS Framework
 
Patterns Are Good For Managers
Patterns Are Good For ManagersPatterns Are Good For Managers
Patterns Are Good For Managers
 
Angular js architecture (v1.4.8)
Angular js architecture (v1.4.8)Angular js architecture (v1.4.8)
Angular js architecture (v1.4.8)
 
Angular js routing options
Angular js routing optionsAngular js routing options
Angular js routing options
 
AngularJs
AngularJsAngularJs
AngularJs
 
Performance Optimization In Angular 2
Performance Optimization In Angular 2Performance Optimization In Angular 2
Performance Optimization In Angular 2
 
Angular js
Angular jsAngular js
Angular js
 
Why angular js Framework
Why angular js Framework Why angular js Framework
Why angular js Framework
 
Angular 2.0 Routing and Navigation
Angular 2.0 Routing and NavigationAngular 2.0 Routing and Navigation
Angular 2.0 Routing and Navigation
 
Writing testable js [by Ted Piotrowski]
Writing testable js [by Ted Piotrowski]Writing testable js [by Ted Piotrowski]
Writing testable js [by Ted Piotrowski]
 
Coffee@DBG - Exploring Angular JS
Coffee@DBG - Exploring Angular JSCoffee@DBG - Exploring Angular JS
Coffee@DBG - Exploring Angular JS
 
Workshop 9: BackboneJS y patrones MVC
Workshop 9: BackboneJS y patrones MVCWorkshop 9: BackboneJS y patrones MVC
Workshop 9: BackboneJS y patrones MVC
 
AngularJS Beginners Workshop
AngularJS Beginners WorkshopAngularJS Beginners Workshop
AngularJS Beginners Workshop
 
Workshop 13: AngularJS Parte II
Workshop 13: AngularJS Parte IIWorkshop 13: AngularJS Parte II
Workshop 13: AngularJS Parte II
 

Similar to Browser testing with nightwatch.js

Javascript unit testing, yes we can e big
Javascript unit testing, yes we can   e bigJavascript unit testing, yes we can   e big
Javascript unit testing, yes we can e big
Andy Peterson
 
Selenium with py test by Alexandr Vasyliev for Lohika Odessa Python TechTalks
Selenium with py test by Alexandr Vasyliev for Lohika Odessa Python TechTalksSelenium with py test by Alexandr Vasyliev for Lohika Odessa Python TechTalks
Selenium with py test by Alexandr Vasyliev for Lohika Odessa Python TechTalks
Lohika_Odessa_TechTalks
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
Fabio Franzini
 

Similar to Browser testing with nightwatch.js (20)

Automated acceptance test
Automated acceptance testAutomated acceptance test
Automated acceptance test
 
Browser testing with nightwatch.js - Drupal Europe
Browser testing with nightwatch.js - Drupal EuropeBrowser testing with nightwatch.js - Drupal Europe
Browser testing with nightwatch.js - Drupal Europe
 
Web UI test automation instruments
Web UI test automation instrumentsWeb UI test automation instruments
Web UI test automation instruments
 
Javascript unit testing, yes we can e big
Javascript unit testing, yes we can   e bigJavascript unit testing, yes we can   e big
Javascript unit testing, yes we can e big
 
Spring data requery
Spring data requerySpring data requery
Spring data requery
 
Javascript ui for rest services
Javascript ui for rest servicesJavascript ui for rest services
Javascript ui for rest services
 
Testing Ext JS and Sencha Touch
Testing Ext JS and Sencha TouchTesting Ext JS and Sencha Touch
Testing Ext JS and Sencha Touch
 
Quick tour to front end unit testing using jasmine
Quick tour to front end unit testing using jasmineQuick tour to front end unit testing using jasmine
Quick tour to front end unit testing using jasmine
 
Web ui testing
Web ui testingWeb ui testing
Web ui testing
 
Testing ASP.NET - Progressive.NET
Testing ASP.NET - Progressive.NETTesting ASP.NET - Progressive.NET
Testing ASP.NET - Progressive.NET
 
Selenium with py test by Alexandr Vasyliev for Lohika Odessa Python TechTalks
Selenium with py test by Alexandr Vasyliev for Lohika Odessa Python TechTalksSelenium with py test by Alexandr Vasyliev for Lohika Odessa Python TechTalks
Selenium with py test by Alexandr Vasyliev for Lohika Odessa Python TechTalks
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
 
Automation - web testing with selenium
Automation - web testing with seleniumAutomation - web testing with selenium
Automation - web testing with selenium
 
Grails unit testing
Grails unit testingGrails unit testing
Grails unit testing
 
Protractor framework architecture with example
Protractor framework architecture with exampleProtractor framework architecture with example
Protractor framework architecture with example
 
UI Testing Best Practices - An Expected Journey
UI Testing Best Practices - An Expected JourneyUI Testing Best Practices - An Expected Journey
UI Testing Best Practices - An Expected Journey
 
Unit Testing and Coverage for AngularJS
Unit Testing and Coverage for AngularJSUnit Testing and Coverage for AngularJS
Unit Testing and Coverage for AngularJS
 
Mastering Test Automation: How To Use Selenium Successfully
Mastering Test Automation: How To Use Selenium SuccessfullyMastering Test Automation: How To Use Selenium Successfully
Mastering Test Automation: How To Use Selenium Successfully
 
Pragmatic Parallels: Java and JavaScript
Pragmatic Parallels: Java and JavaScriptPragmatic Parallels: Java and JavaScript
Pragmatic Parallels: Java and JavaScript
 
Full Stack Unit Testing
Full Stack Unit TestingFull Stack Unit Testing
Full Stack Unit Testing
 

Recently uploaded

Recently uploaded (20)

Introduction to Machine Learning Unit-4 Notes for II-II Mechanical Engineering
Introduction to Machine Learning Unit-4 Notes for II-II Mechanical EngineeringIntroduction to Machine Learning Unit-4 Notes for II-II Mechanical Engineering
Introduction to Machine Learning Unit-4 Notes for II-II Mechanical Engineering
 
Intelligent Agents, A discovery on How A Rational Agent Acts
Intelligent Agents, A discovery on How A Rational Agent ActsIntelligent Agents, A discovery on How A Rational Agent Acts
Intelligent Agents, A discovery on How A Rational Agent Acts
 
RESORT MANAGEMENT AND RESERVATION SYSTEM PROJECT REPORT.pdf
RESORT MANAGEMENT AND RESERVATION SYSTEM PROJECT REPORT.pdfRESORT MANAGEMENT AND RESERVATION SYSTEM PROJECT REPORT.pdf
RESORT MANAGEMENT AND RESERVATION SYSTEM PROJECT REPORT.pdf
 
"United Nations Park" Site Visit Report.
"United Nations Park" Site  Visit Report."United Nations Park" Site  Visit Report.
"United Nations Park" Site Visit Report.
 
2024 DevOps Pro Europe - Growing at the edge
2024 DevOps Pro Europe - Growing at the edge2024 DevOps Pro Europe - Growing at the edge
2024 DevOps Pro Europe - Growing at the edge
 
Electrostatic field in a coaxial transmission line
Electrostatic field in a coaxial transmission lineElectrostatic field in a coaxial transmission line
Electrostatic field in a coaxial transmission line
 
Research Methodolgy & Intellectual Property Rights Series 2
Research Methodolgy & Intellectual Property Rights Series 2Research Methodolgy & Intellectual Property Rights Series 2
Research Methodolgy & Intellectual Property Rights Series 2
 
Arduino based vehicle speed tracker project
Arduino based vehicle speed tracker projectArduino based vehicle speed tracker project
Arduino based vehicle speed tracker project
 
Object Oriented Programming OOP Lab Manual.docx
Object Oriented Programming OOP Lab Manual.docxObject Oriented Programming OOP Lab Manual.docx
Object Oriented Programming OOP Lab Manual.docx
 
Theory for How to calculation capacitor bank
Theory for How to calculation capacitor bankTheory for How to calculation capacitor bank
Theory for How to calculation capacitor bank
 
ONLINE CAR SERVICING SYSTEM PROJECT REPORT.pdf
ONLINE CAR SERVICING SYSTEM PROJECT REPORT.pdfONLINE CAR SERVICING SYSTEM PROJECT REPORT.pdf
ONLINE CAR SERVICING SYSTEM PROJECT REPORT.pdf
 
ROAD CONSTRUCTION PRESENTATION.PPTX.pptx
ROAD CONSTRUCTION PRESENTATION.PPTX.pptxROAD CONSTRUCTION PRESENTATION.PPTX.pptx
ROAD CONSTRUCTION PRESENTATION.PPTX.pptx
 
Online book store management system project.pdf
Online book store management system project.pdfOnline book store management system project.pdf
Online book store management system project.pdf
 
Research Methodolgy & Intellectual Property Rights Series 1
Research Methodolgy & Intellectual Property Rights Series 1Research Methodolgy & Intellectual Property Rights Series 1
Research Methodolgy & Intellectual Property Rights Series 1
 
Diploma Engineering Drawing Qp-2024 Ece .pdf
Diploma Engineering Drawing Qp-2024 Ece .pdfDiploma Engineering Drawing Qp-2024 Ece .pdf
Diploma Engineering Drawing Qp-2024 Ece .pdf
 
Quiz application system project report..pdf
Quiz application system project report..pdfQuiz application system project report..pdf
Quiz application system project report..pdf
 
Filters for Electromagnetic Compatibility Applications
Filters for Electromagnetic Compatibility ApplicationsFilters for Electromagnetic Compatibility Applications
Filters for Electromagnetic Compatibility Applications
 
Seismic Hazard Assessment Software in Python by Prof. Dr. Costas Sachpazis
Seismic Hazard Assessment Software in Python by Prof. Dr. Costas SachpazisSeismic Hazard Assessment Software in Python by Prof. Dr. Costas Sachpazis
Seismic Hazard Assessment Software in Python by Prof. Dr. Costas Sachpazis
 
BURGER ORDERING SYSYTEM PROJECT REPORT..pdf
BURGER ORDERING SYSYTEM PROJECT REPORT..pdfBURGER ORDERING SYSYTEM PROJECT REPORT..pdf
BURGER ORDERING SYSYTEM PROJECT REPORT..pdf
 
Software Engineering - Modelling Concepts + Class Modelling + Building the An...
Software Engineering - Modelling Concepts + Class Modelling + Building the An...Software Engineering - Modelling Concepts + Class Modelling + Building the An...
Software Engineering - Modelling Concepts + Class Modelling + Building the An...
 

Browser testing with nightwatch.js