Sie sind auf Seite 1von 95

Testing Angular JS Applications

with
Jasmine & Karma
Testing Angular JS Applications with Jasmine & Karma Training Workshop

© Copyright 2016 by Zenergy Technologies, Inc. All rights reserved.

This material may not be reproduced, displayed, modified or distributed without the
express prior written permission of Zenergy Technologies, Inc. For permission, contact
info@zenergytechnologies.com.

If you have comments or questions regarding this document please send them via e-mail
to: chris.lawson@zenergytechnologies.com

Zenergy Technologies, Inc.


306 Pomona Dr., Suite F
Greensboro, North Carolina 27407
Telephone: 877-375-7041
Fax: 336-358-4974
Course Resources A Testing Partner You Can Trust

Ø  You can download the course material at the following location:


www.zenergytechnologies.com/qai-training-resources/
Password: allaboutQAI

Copyright © 2016 Zenergy Technologies, Inc.


Course Outline A Testing Partner You Can Trust

Ø  Introduction
•  Overview of course
•  Logistics
•  Expectations

Ø  Core Testing Concepts


•  Levels of testing
•  Testing practices
•  BDD and TDD overview

Copyright © 2016 Zenergy Technologies, Inc.


Course Outline A Testing Partner You Can Trust

Ø  Working with Jasmine and Karma


•  Overview
•  Syntax, setup, teardown and matchers
•  Stubs, spies and mocks
Ø  Testing with Angular JS
•  Configuration
•  Concepts
•  Directives
•  Filters
•  Two-way data binding
•  Example tests
Copyright © 2016 Zenergy Technologies, Inc.
Course Outline A Testing Partner You Can Trust

Ø  Protractor & Selenium WebDriver


•  Configuration and framework components
•  Using ‘element’ & ‘by’
•  Finding Page Objects
•  Utilizing Promises

Ø  Advanced Topic Conversations


•  Continuous integration
•  Code coverage
•  Remote/distributed testing

Ø  Recap, Case Studies and Exercises


Copyright © 2016 Zenergy Technologies, Inc.
Introduction
Overview A Testing Partner You Can Trust

Ø  Course Overview

Ø  Logistics

Ø  Expectations

Copyright © 2016 Zenergy Technologies, Inc.


Core Testing Concepts
Levels of Tes4ng A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.


Levels of Tes4ng A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.


Tes4ng Prac4ces A Testing Partner You Can Trust

Ø  Reviews and Inspections

Ø  Entry and Exit Criteria

Ø  Functional

Ø  Exploratory

Copyright © 2016 Zenergy Technologies, Inc.


What is TDD? A Testing Partner You Can Trust

Ø  Test-Driven Development is a
programming technique that
requires you to write actual code
and automated test code
simultaneously. This ensures that
you test your code and enables
you to retest your code quickly
and easily, since it's automated.

Copyright © 2016 Zenergy Technologies, Inc.


TDD Process A Testing Partner You Can Trust

•  Test-Driven Development
process means taking the
following steps:
•  Red: Write your test first and
see it fail
•  Green: Write just enough
code to make your test pass
•  Refactor: Using your tests to
keep you safe, refactor your
code to be more elegant,
understandable and
maintainable.
Copyright © 2016 Zenergy Technologies, Inc.
TDD Process A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.


BDD & TDD Process A Testing Partner You Can Trust

Ø  TDD invests in
automated unit tests

Ø  BDD invests in
automated
acceptance tests

Copyright © 2016 Zenergy Technologies, Inc.


Jasmine and Karma
What is Karma? A Testing Partner You Can Trust

Ø  JavaScript command line tool that can be used to spawn a web


server, which loads application source code and executes tests

Ø  Can be configured to run against a number of browsers, which


is useful for ensuring application works on all supported
browsers

Ø  Has command line execution options that display the test


results once they have run in the browser

Ø  Runs on Node.js and is available as NPM package

Copyright © 2016 Zenergy Technologies, Inc.


What is Node JS? A Testing Partner You Can Trust

Ø  JavaScript runtime built on Chrome V8 JavaScript engine

Ø  Uses an event-driven, non-blocking I/O model that makes it


lightweight and efficient

Ø  It’s package ecosystem (NPM) is the largest ecosystem of open


source libraries in the world

Copyright © 2016 Zenergy Technologies, Inc.


Node JS Install A Testing Partner You Can Trust

Ø  Must be installed before you are able to install Karma


•  https://nodejs.org/en/

Ø  Click on either the Download prompt on the homepage for


Windows or go to the Download tab and select the
corresponding version for Apple or Linux
Ø  Select and run the installer in order to complete set up

Copyright © 2016 Zenergy Technologies, Inc.


Karma Setup A Testing Partner You Can Trust

Ø  Open a command window


Ø  Enter – npm install karma –g
Ø  Enter – npm install karma-jasmine
Ø  Enter – npm install karma-cli
Ø  Enter – npm karma init
Ø  Enter – karma start – to launch karma server
Ø  Enter – karma run – to run tests

Copyright © 2016 Zenergy Technologies, Inc.


Karma Configura4on Setup A Testing Partner You Can Trust

Ø  Karma needs to know about your project in order to test, which


is done via a configuration file
Ø  Configuration file can be written in JavaScript and is loaded as
a regular Node.js module
Ø  Unless provided as argument, the Karma CLI will look for a
configuration file at the following locations and in this order:
•  ./karma.conf.js
•  ./karma.conf.coffee
•  ./.config/karma.conf.js
•  ./.config/karma.conf.coffee
Copyright © 2016 Zenergy Technologies, Inc.
Running – Ini4a4ng Tests A Testing Partner You Can Trust

Ø  Open a new command window

Ø  Enter – npm

Ø  Enter – karma init

Ø  The command window will prompt a series of questions

Ø  For testing framework select Jasmine

Ø  Select browser plug in – PhantomJS tests without loading a browser

Ø  The finished file will be saved as karma.conf.js – find and load in IDE

Ø  In the command window – karma start – loads karma.conf file

Copyright © 2016 Zenergy Technologies, Inc.


Tes4ng Hello World A Testing Partner You Can Trust

Ø  Create a new JavaScript


file
Ø  Add that file path to the
karma.conf.js file
Ø  Save both files

Ø  Initiate with karma start


in the command window
(should pass)

Ø  Change the variable


value to see the test fail

Copyright © 2016 Zenergy Technologies, Inc.


What is Jasmine? A Testing Partner You Can Trust

Ø  Behavior-driven development framework

Ø  Does not depend on any other JavaScript frameworks

Ø  Specifications for your JavaScript code

Ø  Write expectations

Ø  Uses matchers

Copyright © 2016 Zenergy Technologies, Inc.


Jasmine Setup A Testing Partner You Can Trust

Ø  The first thing you’ll


need to do is
download Jasmine
“standalone” from
GitHub
•  https://github.com/
jasmine/jasmine/releases

Ø  Extract the contents


of the zip file into the
folder you’d like to
use for the project
Copyright © 2016 Zenergy Technologies, Inc.
Basic Jasmine Syntax A Testing Partner You Can Trust

Ø  Make a suite of tests


for a particular
subject by creating a
describe function
with the first
argument as the
subject and the
second as an
anonymous function

Copyright © 2016 Zenergy Technologies, Inc.


Basic Jasmine Syntax A Testing Partner You Can Trust

Ø  The anonymous
function block can
either be more
specific with nested
describe blocks or an
it function

Copyright © 2016 Zenergy Technologies, Inc.


Basic Jasmine Syntax A Testing Partner You Can Trust

Ø  The it function takes


a string as the first
argument about
what it is testing and
an anonymous
function that
contains an expect
function that
compares your code
to the expected
outcome
Copyright © 2016 Zenergy Technologies, Inc.
Basic Jasmine Syntax A Testing Partner You Can Trust

Ø  Multiple tests can be


added to the describe
function (test suite) by
adding additional it
blocks

Copyright © 2016 Zenergy Technologies, Inc.


Setup and Teardown A Testing Partner You Can Trust

Ø  Test suites may also


have beforeEach and
afterEach blocks,
which will run before
or after each it block
regardless of whether
the block passes or
fails

Ø  The beforeAll and


afterAll functions are
also available
Copyright © 2016 Zenergy Technologies, Inc.
Matchers A Testing Partner You Can Trust

Ø  Jasmine passes or fails


a test based on a
matcher boolean
comparison between
the actual value and
the expected value

Copyright © 2016 Zenergy Technologies, Inc.


Pass or Fail? A Testing Partner You Can Trust

Ø  Evaluate this user


sort test

Ø  What would be the


result?

Copyright © 2016 Zenergy Technologies, Inc.


Disabling Suites and Tests A Testing Partner You Can Trust

Ø  Suites can be disabled by placing


an x in front of describe block (i.e.
xdescribe). These suites and any
specs inside them are skipped
when run and their results will not
appear in the results.

Ø  Pending specs do not run, but their


names will show up in the results
as pending. Any spec declared
with an x in front of it block (i.e.
xit) is marked as pending

Copyright © 2016 Zenergy Technologies, Inc.


Try It A Testing Partner You Can Trust

Ø  Go to:
•  http://jasmine.github.io/2.4/introduction.html
•  http://tryjasmine.com

Ø  Develop tests that contain the following


matchers:
•  evaluates to a negative assertion
•  evaluates a regular expression
•  compares against null
•  evaluates booleans

Copyright © 2016 Zenergy Technologies, Inc.


Spies A Testing Partner You Can Trust

Ø  One of the primary aims of unit testing is to isolate a


method or component that you want to test and see how
it behaves under a variety of circumstances.

Ø  These might include calls with various arguments, none


at all, or whether it calls other methods as it should

Ø  Many methods and/or objects have dependencies on


other methods and/or objects, such as network
connections, data sources, files and even previously
executed methods

Ø  This is where mocks come in, which Jasmine refers to as


Spies
Copyright © 2016 Zenergy Technologies, Inc.
Spies A Testing Partner You Can Trust

Ø  A spy (aka mock) is a fake object that poses as the real thing in order to
satisfy the inherent dependencies without having to go through the
overhead of creating the real object

Ø  Spies can create a proxy object that takes the place of the real object

Ø  We can define what methods are called and their returned values from
within our test method

Copyright © 2016 Zenergy Technologies, Inc.


Spies A Testing Partner You Can Trust

Ø  Spies can be utilized to retrieve run-time statistics on the spied function


such as:
•  How many times the spied function was called
•  The value that the function returned to the caller
•  How many parameters the function was called with

Ø  There are two ways to create a spy in Jasmine:

•  spyOn() - can only be used when the method already exists on the object

•  jasmine.createSpy() - will return a brand new function

Copyright © 2016 Zenergy Technologies, Inc.


Using Spy Methods A Testing Partner You Can Trust

Substitute a fake getName() for the real one

Copyright © 2016 Zenergy Technologies, Inc.


Angular JS
App Tes4ng with Angular A Testing Partner You Can Trust

Ø  You will need the angular mocks library Note: The file order
does matter, load
Ø  Install the files in your command window with:
angular libraries first,
•  npm install angular –save followed by your
•  npm install angular-mocks --save-dev filter, and then the
file you wish to test
// list of files / patterns to load in the browser

files: [ File path


'node_modules/angular/angular.js', wherever the
'node_modules/angular-mocks/angular-mocks.js',
file is saved
'/Users/TempUser/Desktop/test/Filters/app.js',

'/Users/TempUser/Desktop/test/Filters/test.js’

],
Copyright © 2016 Zenergy Technologies, Inc.
Tes4ng An Angular App A Testing Partner You Can Trust

Ø  Using the Angular library you are able to test Angular applications
Ø  Example of what a basic Angular Application looks like:

Copyright © 2016 Zenergy Technologies, Inc.


Angular Applica4on Test A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.


Configuring Angular Applica4on A Testing Partner You Can Trust

•  Using Angular you have to import the Angular Mocks library in order to
test
•  The libraries need to be imported before the application and the
application needs to be inserted before the test

This is the unique file


path where the individual
project is saved.

Copyright © 2016 Zenergy Technologies, Inc.


Angular JS A Testing Partner You Can Trust

Ø  A client-side JavaScript framework for adding interconnectivity to


HTML
Ø  Directives – A marker in an HTML tag that triggers or tells Angular
to reference some area of JavaScript code. (How you bind behavior)
Ø  Modules – Where you declare your dependencies, which keeps your
code encapsulated (Where application components live)
Ø  Example: var app = angular.module(‘store’, [ ])

AngularJs App Dependency


Name List
Copyright © 2016 Zenergy Technologies, Inc.
Angular JS Concepts A Testing Partner You Can Trust

Controllers
Where we define the function/applications behavior by
defining functions and values (Where we add behavior)

Expression
How values get displayed in the page

Direc4ves
Common directive commands:
•  ng-app : attach application module
•  ng-controller : attach a controller function to the page
•  ng-show / hide : controls display based on the value
•  ng-repeat : cycles through an array
Copyright © 2016 Zenergy Technologies, Inc.
Direc4ves A Testing Partner You Can Trust
<html ng-app="gemStore">

<head>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />

<script type="text/javascript" src="angular.min.js"></script>

<script type="text/javascript" src="app.js"></script>


</head>

<body class="container" ng-controller="StoreController as store">

<div ng-hide="store.product.soldOut" class="product row">


Directive will hide the
product if soldOut = true
<h3>

{{store.product.name}}

<em class="pull-right">${{store.product.price}}</em> Directive will only show


</h3> if the value of the button
<button ng-show="store.product.canPurchase">Add to Cart</ is set to true (controlled
button> by ng-show)
</div>

</body>
Copyright © 2016 Zenergy Technologies, Inc.
</html>
Filters A Testing Partner You Can Trust

Ø  AngularJS provides filters to transform data:


•  currency - Format a number to a currency format
•  date - Format a date to a specified format
•  filter - Select a subset of items from an array
•  json - Format an object to a JSON string
•  limitTo - Limits an array/string into a specified number of elements/characters
•  lowercase - Format a string to lower case
•  number - Format a number to a string
•  orderBy - Orders an array by an expression
•  uppercase - Format a string to upper case
Example:
Currency filter after the “pipe” formats
<h3> everything being called before the
{{product.name}}
“pipe”…in this case product.price

<em class="pull-right">{{product.price | currency}}</em>

</h3> Copyright © 2016 Zenergy Technologies, Inc.


Two-Way Data Binding A Testing Partner You Can Trust

Ø  Expression is re-evaluated when a property changes


Ø  Example: When ng-click changes a value on the page, the
expression automatically updates

Copyright © 2016 Zenergy Technologies, Inc.


Tes4ng a Controller A Testing Partner You Can Trust

Controller Test
angular.module('app', []) describe('PasswordController', function() {
beforeEach(module('app'));

.controller('PasswordController', function var $controller;


PasswordController($scope) {
beforeEach(inject(function(_$controller_){
// The injector unwraps the underscores (_) from around the parameter names when matching
$scope.password = ''; $controller = _$controller_;
}));
$scope.grade = function() {
describe('$scope.grade', function() {
var size = $scope.password.length; var $scope, controller;

if (size > 8) { beforeEach(function() {


$scope = {};
controller = $controller('PasswordController', { $scope: $scope });
$scope.strength = 'strong'; });

} else if (size > 3) { it('sets the strength to "strong" if the password length is >8 chars', function() {
$scope.password = 'longerthaneightchars';
$scope.strength = 'medium'; $scope.grade();
expect($scope.strength).toEqual('strong');
} else { });

it('sets the strength to "weak" if the password length <3 chars', function() {
$scope.strength = 'weak'; $scope.password = 'a';
$scope.grade();
} expect($scope.strength).toEqual('weak');
});
}; });
});
}); Copyright © 2016 Zenergy Technologies, Inc.
Tes4ng a Filter A Testing Partner You Can Trust

Filter Test
myModule.filter('length', function() { describe('length filter', function() {
return function(text) {
return ('' + (text || '')).length; var $filter;
}
}); beforeEach(inject(function(_$filter_){
$filter = _$filter_;
}));

it('returns 0 when given null', function() {


var length = $filter('length');
expect(length(null)).toEqual(0);
});

it('returns the correct value when given a string of chars',


function() {
var length = $filter('length');
expect(length('abc')).toEqual(3);
});
});
Copyright © 2016 Zenergy Technologies, Inc.
Tes4ng a Direc4ve A Testing Partner You Can Trust

Directive Test
app.directive('aGreatEye', function () { describe('Unit testing great quotes', function() {
return { var $compile,
$rootScope;
restrict: 'E',
replace: true, // Load the myApp module, which contains the directive
template: '<h1>lidless, wreathed in flame, {{1 + 1}} beforeEach(module('myApp'));
times</h1>'
}; // Store references to $rootScope and $compile
// so they are available to all tests in this describe block
}); beforeEach(inject(function(_$compile_, _$rootScope_){
// The injector unwraps the underscores (_) from around the parameter names
when matching
$compile = _$compile_;
$rootScope = _$rootScope_;
}));

it('Replaces the element with the appropriate content', function() {


// Compile a piece of HTML containing the directive
var element = $compile("<a-great-eye></a-great-eye>")($rootScope);
// fire all the watches, so the scope expression {{1 + 1}} will be evaluated
$rootScope.$digest();
// Check that the compiled element contains the templated content
expect(element.html()).toContain("lidless, wreathed in flame, 2 times");
});
});

Copyright © 2016 Zenergy Technologies, Inc.


Protractor
&
Selenium WebDriver
What is Protractor? A Testing Partner You Can Trust

Ø  An end-to-end test framework for AngularJS


applications
Ø  Built on top of Selenium WebDriverJS and runs tests
against applications running in a real browser
interacting with it as a user would

Copyright © 2016 Zenergy Technologies, Inc.


Example Basic Page A Testing Partner You Can Trust

// spec.js

describe('Protractor Demo App', function () {

it('should add one and two', function () {

browser.get('http://juliemr.github.io/protractor-demo/');

element(by.model('first')).sendKeys(1);

element(by.model('second')).sendKeys(2);

element(by.id('gobutton')).click();

expect(element(by.binding('latest')).getText()).

toEqual('3');

});

});
Copyright © 2016 Zenergy Technologies, Inc.
Protractor Framework A Testing Partner You Can Trust

Ø  Less code
duplication
Ø  Readable
Ø  Maintainable

Copyright © 2016 Zenergy Technologies, Inc.


Protractor Implementa4on A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.


What are Page Objects? A Testing Partner You Can Trust

A design pattern that models a web application based on its pages


and/or sections of pages.

Ø  Allow for reusability of elements


Ø  Establish a single point of maintenance
Ø  Provide an intuitive organizational model

Copyright © 2016 Zenergy Technologies, Inc.


Page Object PaTerns A Testing Partner You Can Trust

Ø  Keep all the WebDriver interactions in one place


Ø  Adds a layer of abstraction between WebDriver implementation and
website/application functionality
Ø  When underlying source of pages change, updates only need to be
made in one place
Ø  Allows script writers to focus on tests, not on details of WebDriver
interactions

Copyright © 2016 Zenergy Technologies, Inc.


Page Object A Testing Partner You Can Trust

Ø  Should contain elements


and functions
Ø  Should not contain
assertions or expects
Ø  Represents a single page or
a section in a page
Ø  Should have a “.page”
postfix (e.g. home.page.js)

Copyright © 2016 Zenergy Technologies, Inc.


Spec A Testing Partner You Can Trust

Ø  Should only contain assertions and


expects

Ø  Should not contain function or element


declaration

Ø  Should only access web elements using


page-object functions

Ø  Should have a “.spec” postfix (e.g.


home.spec.js)

Ø  Reference to a page-object should have a


“Page” postfix (e.g var HomePage =
require(‘../page_objects/home.page.js) )

Copyright © 2016 Zenergy Technologies, Inc.


Spec A Testing Partner You Can Trust

Ø  Should only
access web
elements
using page
object
functions

Copyright © 2016 Zenergy Technologies, Inc.


Helper A Testing Partner You Can Trust

Ø  Should contain test data


Ø  Should contain common scripts
Ø  Should contain constants
Ø  Should contain anything that is repeated or consumed multiple times
(regex, login/logout, requires, ...)
Ø  When something changes you only have to change one thing, which
simplifies code maintenance (e.g. test data changes, page added/
removed, date format changed, ... )

Copyright © 2016 Zenergy Technologies, Inc.


Conf A Testing Partner You Can Trust

Ø  Should contain framework configuration


Ø  Should contain device/platform/browser/hosted testing
service specific configurations
Ø  Should contain CI configuration
Ø  Should contain configuration parameters

Copyright © 2016 Zenergy Technologies, Inc.


Page Object and Spec Example A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.


Selenium WebDriver A Testing Partner You Can Trust

What it is... What it does best...


•  Robust web object- •  Create robust, browser-
based API based regression
automation
•  Successor to Selenium
RC •  Scale and distribute
scripts across many
environments

Copyright © 2016 Zenergy Technologies, Inc.


WebDriver - API A Testing Partner You Can Trust

Ø  Selenium-WebDriver supports the following browsers along with


the operating systems these browsers are compatible with:
- Google Chrome
- Internet Explorer
- Firefox
- Safari
- Opera
- HtmlUnit
- phantomjs
- Android (with Selendroid or appium)
- iOS (with ios-driver or appium)
Copyright © 2016 Zenergy Technologies, Inc.
Launching a Browser A Testing Partner You Can Trust

Ø  Selenium WebDriver makes direct calls to the browser using each


browser’s native support for automation

Ø  Launching a browser is as easy as instantiating a WebDriver


implementation
//Launch a FireFox browser window
WebDriver driver = new FirefoxDriver();
//Launch a Chrome browser window
WebDriver driver = new ChromeDriver();
//Launch an Internet Explorer browser window
WebDriver driver = new InternetExplorerDriver();

Copyright © 2016 Zenergy Technologies, Inc.


Fetching a Page A Testing Partner You Can Trust

Ø  The first thing you’re likely to want to do with WebDriver is


navigate to a page
Ø  The standard way of doing this is by calling the “get” method
driver.get("http://www.google.com");

Copyright © 2016 Zenergy Technologies, Inc.


Browser Naviga4on A Testing Partner You Can Trust

Ø  WebDriver allows you to interact with the browser’s navigation


controls directly

Ø  The Navigation class is accessed with the navigate() method:


driver.navigate().back();
driver.navigate().forward();
driver.navigate().refresh();
driver.navigate().to(String url);

Copyright © 2016 Zenergy Technologies, Inc.


Loca4ng Elements A Testing Partner You Can Trust

Ø  Before interacting with page elements, they must be located in the


DOM using the findElement methods

Ø  findElement
•  requires a single By parameter
•  returns a single WebElement
•  if multiple matches exist, returns the first match
•  if no matches exist, throws NoSuchElementException

Ø  findElements
•  requires a single By parameter
•  returns a list of WebElements
•  if no matches are found, returns an empty list
Copyright © 2016 Zenergy Technologies, Inc.
Loca4ng Elements A Testing Partner You Can Trust

Ø  findElement and findElements are methods of both WebDriver and


WebElement

Ø  WebDriver methods search the entire DOM for the desired


element(s)

Ø  WebElement methods search within the context of the current


element
•  usually used to find child element(s)

Copyright © 2016 Zenergy Technologies, Inc.


“By” Strategies - ID A Testing Partner You Can Trust

<body>
<div id=“navigation” class=“navBar” name=”top-nav-bar”>
<a id=“searchBtn” class=“search” name=”searchBar”>
Shop Now
</a>
</ul>
</body>
Ø  By ID
•  Find elements using the HTML “id” attribute
•  This (along with “name”) is the preferred way of locating elements
•  Beware of non-unique and dynamic IDs when using this strategy

Copyright © 2016 Zenergy Technologies, Inc.


“By” Strategies - Name A Testing Partner You Can Trust

<body>
<div id=“navigation” class=“navBar” name=”top-nav-bar”>
<a id=“searchBtn” class=“search” name=”searchBar”>
Shop Now
</a>
</ul>
</body>

Ø  By Name
•  Find input elements using the HTML “name” attribute
•  This (along with “id”) is the preferred way of locating elements

Copyright © 2016 Zenergy Technologies, Inc.


“By” Strategies – Class Name A Testing Partner You Can Trust

<body>
<div id=“navigation” class=“navBar” name=”top-nav-bar”>
<a id=“searchBtn” class=“search” name=”searchBar”>
Shop Now
</a>
</ul>
</body>
Ø  By Class Name
•  Find input elements using the HTML “class” attribute

•  Class attributes are much less likely to be unique than ids and names

•  If multiple elements have the same class attribute, findElement will return the
first instance and findElements will return all instances
Copyright © 2016 Zenergy Technologies, Inc.
“By” Strategies – Tag Name A Testing Partner You Can Trust

<body>
<div id=“navigation” class=“navBar” name=”top-nav-bar”>
<a id=“searchBtn” class=“search” name=”searchBar”>
Shop Now
</a>
</ul>
</body>

Ø  By Tag Name
•  Find elements by their tag name in the DOM

•  Tag names will rarely be unique, but this strategy can be helpful for
gathering an iterable list of a certain type of tag

Copyright © 2016 Zenergy Technologies, Inc.


“By” Strategies – Link Text A Testing Partner You Can Trust

<body>
<div id=“navigation” class=“navBar” name=”top-nav-bar”>
<a id=“searchBtn” class=“search” name=”searchBar”>
Shop Now
</a>
</ul>
</body>

Ø  By Link Text
•  Find the link element with matching visible text

•  This strategy is only useful for finding links (i.e. <a> tags)

•  Beware: An element’s link text is often more likely to change than the other locator
types
Copyright © 2016 Zenergy Technologies, Inc.
“By” Strategies – Par4al Text A Testing Partner You Can Trust

<body>
<div id=“navigation” class=“navBar” name=”top-nav-bar”>
<a id=“searchBtn” class=“search” name=”searchBar”>
Shop Now
</a>
</ul>
</body>
Ø  By Partial Link Text
•  Find the link element with partial matching visible text
•  This strategy is only useful for finding links (i.e. <a> tags)
•  A partial link text locator is less likely to change than using the full link text

Copyright © 2016 Zenergy Technologies, Inc.


“By” Strategies – CSS A Testing Partner You Can Trust

Ø  By CSS
•  uses CSS selectors to precisely locate
elements
•  this strategy allows for more precision
than the previous ones, but is slower to
execute

Ø  Common CSS syntax:


•  tag names in plain text
•  Id attributes preceded by “#”
•  class attributes preceded by “.”
•  nested elements are separated by a
space
Copyright © 2016 Zenergy Technologies, Inc.
“By” Strategies – CSS Selectors A Testing Partner You Can Trust

Selector Description
li All <li> elements
li a <a> elements inside an <li> elements
a[name=‘home’] <a> elements with name = “home”
div > p <p> element whose immediate parent is a <div> element
li[class^=‘nav’] <li> whose “class” attribute starts with “nav”
a[href$=‘.pdf’] <a> whose “href” attribute ends with “.pdf”
div[id*=‘product’] <div> whose “id” attribute contains the substring “product”
li:nth-child(3) Every <li> that is the 3rd child of its parent
li:nth-of-type(3) Every <li> that is the 3rd child of type <li>
a:not(.disabled) Every <a> element that does not have class = “disabled”

Copyright © 2016 Zenergy Technologies, Inc.


“By” Strategies – Xpath A Testing Partner You Can Trust

Ø  By Xpath
•  Xpath is a language used for selecting elements from a DOM structure

•  Xpath is the most precise locator strategy, but also the slowest to execute

•  WebDriver uses a browser’s native Xpath capabilities wherever possible

•  For browsers that don’t have native Xpath support, Selenium provides its
own implementation, which can lead to some unexpected behavior unless
you are aware of the differences in the various Xpath engines

Copyright © 2016 Zenergy Technologies, Inc.


Locator Examples A Testing Partner You Can Trust

<body>
<div id=“navigation” class=“navBar” name=”top-nav-bar”>
<a id=“searchBtn” class=“search” name=”searchBar”>
Shop Now
</a>
</ul>
</body>

By.id WebElement element = driver.findElement(By.id(“searchBtn”));

By.name WebElement element = driver.findElement(By.name(“searchBar”));

By.className WebElement element = driver.findElement(By.className(“search”));

By.tagName WebElement element = driver.findElement(By.tagName(“a”));


By.linkText WebElement element = driver.findElement(By.linkText(“Show Now”));

By.partialLinkText WebElement element = driver.findElement(By.partialLinkText(“Shop”));

Copyright © 2016 Zenergy Technologies, Inc.


Locator Examples A Testing Partner You Can Trust

<body>
<div id=“navigation” class=“navBar” name=”top-nav-bar”>
<a id=“searchBtn” class=“search” name=”searchBar”>
Shop Now
</a>
</ul>
</body>

Copyright © 2016 Zenergy Technologies, Inc.


Loca4ng Elements with Firebug A Testing Partner You Can Trust

Ø  Firebug is a Firefox plugin that provides tools for close inspection of the
DOM.
Ø  It is available for free at http://getfirebug.com/

Copyright © 2016 Zenergy Technologies, Inc.


Loca4ng Elements Example A Testing Partner You Can Trust

Ø  Firebug includes a JavaScript console where you can run arbitrary


bits of JavaScript. It is very useful for locating elements.

Ø  To locate elements with CSS:


>> $$(“#lst-ib”)

Ø  To locate elements with Xpath:


>> $x(“//*[@id=‘lst-ib’]”)

Copyright © 2016 Zenergy Technologies, Inc.


Interac4ng with Page Elements A Testing Partner You Can Trust

WebElement methods:
Ø  click – mouse clicks on the selected element
Ø  getText – returns the text present in the element
Ø  sendKeys – enters text into a text input element
Ø  clear – if element accepts text input, clears the value
Ø  getAttribute – returns the value of an HTML attribute
Ø  getCssValue – returns the value a CSS property for the element
Ø  isDisplayed – returns a Boolean stating whether or not the element is displayed
Ø  isSelected – returns a Boolean stating whether or not the element is selected;
must be an input element, such as a checkbox or radio btn
Ø  getLocation – returns the point of the top left corner of the element

Copyright © 2016 Zenergy Technologies, Inc.


Code Example A Testing Partner You Can Trust

// Find the search bar


WebElement searchBar = driver.findElement(By.id(“search”));

// Click on the search bar


searchBar.click();

// Clear current text from search bar


searchBar.clear();

// Enter text into the search bar


searchBar.sendKeys(“Selenium WebDriver”);

// Submit the search using the Enter key


searchBar.sendKeys(Keys.ENTER);

Copyright © 2016 Zenergy Technologies, Inc.


Common Challenges A Testing Partner You Can Trust

Ø  The most common challenges with Selenium WebDriver involve


testing dynamic content implemented with technologies such as
JavaScript and AJAX

Ø  At a high level, the challenge is basically keeping the script informed


of state changes in the AUT. Among the most common scenarios
faced are:

•  Synchronization problems
•  Stale elements

Copyright © 2016 Zenergy Technologies, Inc.


Synchroniza4on A Testing Partner You Can Trust

Ø  Synchronization problems occur when the test script is anticipating


changes in the AUT that have not occurred or have not completed

Ø  WebDriver provides several mechanisms for dealing with


synchronization problems:

•  Implicit Waits
•  Explicit Waits

Copyright © 2016 Zenergy Technologies, Inc.


Implicit Waits A Testing Partner You Can Trust

Ø  An implicit wait instructs the WebDriver to wait for up to the specified


amount of time for an element to be available, if it is not immediately
available

Ø  Implicit waits are an ideal solution for handling page load delays

Ø  An implicit wait is a setting of the WebDriver instance, and it remains in


place for the life of the driver, or until it is explicitly removed

// Add an implicit wait to the driver


driver.manage().timeouts().implicitlyWait(
10, TimeUnit.SECONDS);

// Remove the implicit wait


driver.manage().timeouts().implicitlyWait(
0, TimeUnit.SECONDS
Copyright © 2016 Zenergy Technologies, Inc.
Explicit Waits A Testing Partner You Can Trust

Ø  Explicit waits define a specific condition that should occur before WebDriver
continues to execute the script

Ø  The until method accepts an ExpectedConditions argument, which is a set


of convenient implementations of some of the most common
synchronization conditions in browser automation

// Create a new wait that will wait up to 10 seconds


WebDriverWait wait = new WebDriverWait(driver, 10);

// Specify the condition the driver should wait for


WebElement element = wait.until(ExpectedConditions
.elementToBeClickable(By.name(“myElement”)));

Copyright © 2016 Zenergy Technologies, Inc.


Best Prac4ces for Using Waits A Testing Partner You Can Trust

Ø  Configure the driver to use an implicit wait; this will catch a lot of
synchronization issues

Ø  For synchronization problems that are not solved by an implicit wait, use an
explicit wait

Ø  Zero-out the implicit wait before using an explicit wait; otherwise, both
waits will be polling the DOM and performance can be severely impacted

Ø  Set the implicit wait to the shortest effective timeout and use explicit waits
for longer delays; just a few seconds can make a big difference on suite run
times

Copyright © 2016 Zenergy Technologies, Inc.


Real-World Selenium A Testing Partner You Can Trust

Ø  Works really well with standard HTML/DOM structure


Ø  Embedded processing using JavaScript and AJAX is tricky but still
doable
Ø  Doesn't work with enterprise solutions like Siebel or SAP Web due
to custom embedded objects
Ø  Will not work with client-server applications such as SAP GUI since
it is web-only automation tool

Copyright © 2016 Zenergy Technologies, Inc.


Advanced Topics A Testing Partner You Can Trust

Ø  Continuous integration
Ø  Code coverage
Ø  Remote/distributed testing

Copyright © 2016 Zenergy Technologies, Inc.


Resources A Testing Partner You Can Trust

seleniumhq.org
codeproject.com
wikipedia.org
developsense.com
automatedtestinginstitute.com
code.google.com
msdn.com
w3schools.com
w3.abcd.harvard.edu
agiletestingframeworks.com
angularjs.org
karma-runner.github.io
jasmine.github.io
protractortest.org
Istqb.org

Copyright © 2016 Zenergy Technologies, Inc.