QAI Jasmine Karma Training-1

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

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

Introduction
Overview A Testing Partner You Can Trust
Ø  Course Overview
Ø  Logistics
Ø  Expectations

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

Levels of Tes4ng A Testing Partner You Can Trust

Tes4ng Prac4ces A Testing Partner You Can Trust
Ø  Reviews and Inspections
Ø  Entry and Exit Criteria
Ø  Functional
Ø  Exploratory

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.

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.
TDD Process A Testing Partner You Can Trust

BDD & TDD Process A Testing Partner You Can Trust
Ø  TDD invests in
automated unit tests
Ø  BDD invests in
automated
acceptance tests

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

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

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

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

Karma Conﬁgura4on 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
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

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

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

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

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

Ø  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
Ø  Multiple tests can be

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

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

Pass or Fail? A Testing Partner You Can Trust
Ø  Evaluate this user

sort test
Ø  What would be the

result?

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

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

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

Ø  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

Using Spy Methods A Testing Partner You Can Trust
Substitute a fake getName() for the real one

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’
],
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:

Angular Applica4on Test A Testing Partner You Can Trust

Conﬁguring 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.

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

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);
});
});
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");
});
});

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

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');
});
});
Protractor Framework A Testing Partner You Can Trust
Ø  Less code
duplication
Ø  Readable
Ø  Maintainable

Protractor Implementa4on A Testing Partner You Can Trust

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

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

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)

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

Spec A Testing Partner You Can Trust
Ø  Should only
access web
elements
using page
object
functions

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, ... )

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

Page Object and Spec Example A Testing Partner You Can Trust

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

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)
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();

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");

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

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

“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

“By” Strategies - Name A Testing Partner You Can Trust
<body>
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

“By” Strategies – Class Name A Testing Partner You Can Trust
<body>
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
“By” Strategies – Tag Name A Testing Partner You Can Trust
<body>
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

“By” Strategies – Link Text A Testing Partner You Can Trust
<body>
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
“By” Strategies – Par4al Text A Testing Partner You Can Trust
<body>
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

“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
“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”

“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

Locator Examples A Testing Partner You Can Trust
<body>
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”));

Locator Examples A Testing Partner You Can Trust
<body>
Shop Now
</a>
</ul>
</body>

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/

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’]”)

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

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

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

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

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
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”)));

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

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

Advanced Topics A Testing Partner You Can Trust
Ø  Continuous integration
Ø  Code coverage
Ø  Remote/distributed testing

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

QAI Jasmine Karma Training-1

Uploaded by

Copyright:

Available Formats

You might also like

QAI Jasmine Karma Training-1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

QAI Jasmine Karma Training-1

Uploaded by

Copyright:

Available Formats

Testing Angular JS Applications

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

Zenergy Technologies, Inc.

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

Copyright © 2016 Zenergy Technologies, Inc.

Ø Core Testing Concepts

Copyright © 2016 Zenergy Technologies, Inc.

Ø Working with Jasmine and Karma

Ø Protractor & Selenium WebDriver

Ø Advanced Topic Conversations

Ø Recap, Case Studies and Exercises

Copyright © 2016 Zenergy Technologies, Inc.

Copyright © 2016 Zenergy Technologies, Inc.

Copyright © 2016 Zenergy Technologies, Inc.

Ø Reviews and Inspections

Ø Entry and Exit Criteria

Copyright © 2016 Zenergy Technologies, Inc.

Copyright © 2016 Zenergy Technologies, Inc.

Copyright © 2016 Zenergy Technologies, Inc.

Copyright © 2016 Zenergy Technologies, Inc.

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

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

Ø Has command line execution options that display the test

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

Copyright © 2016 Zenergy Technologies, Inc.

Ø JavaScript runtime built on Chrome V8 JavaScript engine

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

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

Copyright © 2016 Zenergy Technologies, Inc.

Ø Must be installed before you are able to install Karma

Ø Click on either the Download prompt on the homepage for

Copyright © 2016 Zenergy Technologies, Inc.

Ø Open a command window

Copyright © 2016 Zenergy Technologies, Inc.

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

Ø Open a new command window

Ø 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

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

Copyright © 2016 Zenergy Technologies, Inc.

Ø Create a new JavaScript

Ø Initiate with karma start

Ø Change the variable

Copyright © 2016 Zenergy Technologies, Inc.

Ø Behavior-driven development framework

Ø Does not depend on any other JavaScript frameworks

Ø Specifications for your JavaScript code

Copyright © 2016 Zenergy Technologies, Inc.

Ø The first thing you’ll

Ø Extract the contents

Ø Make a suite of tests

Copyright © 2016 Zenergy Technologies, Inc.

Copyright © 2016 Zenergy Technologies, Inc.

Ø The it function takes

Ø Multiple tests can be

Copyright © 2016 Zenergy Technologies, Inc.

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

Ø  Core Testing Concepts

Ø  Working with Jasmine and Karma

Ø  Protractor & Selenium WebDriver

Ø  Advanced Topic Conversations

Ø  Recap, Case Studies and Exercises

Ø  Reviews and Inspections

Ø  Entry and Exit Criteria

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

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

Ø  Has command line execution options that display the test

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

Ø  JavaScript runtime built on Chrome V8 JavaScript engine

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

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

Ø  Must be installed before you are able to install Karma

Ø  Click on either the Download prompt on the homepage for

Ø  Open a command window

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

Ø  Open a new command window

Ø  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

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

Ø  Create a new JavaScript

Ø  Initiate with karma start

Ø  Change the variable

Ø  Behavior-driven development framework

Ø  Does not depend on any other JavaScript frameworks

Ø  Specifications for your JavaScript code

Ø  The first thing you’ll

Ø  Extract the contents

Ø  Make a suite of tests

Ø  The it function takes

Ø  Multiple tests can be

Ø  Test suites may also

Ø  The beforeAll and

Ø  Jasmine passes or fails

Ø  Evaluate this user

Ø  What would be the

Ø  Suites can be disabled by placing

Ø  Pending specs do not run, but their

Ø  Develop tests that contain the following

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

Ø  These might include calls with various arguments, none

Ø  Many methods and/or objects have dependencies on

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

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

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

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

Ø  A client-side JavaScript framework for adding interconnectivity to

Ø  AngularJS provides filters to transform data:

Ø  Expression is re-evaluated when a property changes

Ø  An end-to-end test framework for AngularJS

Ø  Allow for reusability of elements

Ø  Keep all the WebDriver interactions in one place

Ø  Should contain elements

Ø  Should only contain assertions and

Ø  Should not contain function or element

Ø  Should only access web elements using

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

Ø  Reference to a page-object should have a

Ø  Should contain test data

Ø  Should contain framework configuration