Transcript
Page 1: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

Testing Angular JS Applications with

Jasmine & Karma

Page 2: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

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 [email protected]. If you have comments or questions regarding this document please send them via e-mail to: [email protected] Zenergy Technologies, Inc. 306 Pomona Dr., Suite F Greensboro, North Carolina 27407 Telephone: 877-375-7041 Fax: 336-358-4974

Page 3: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

CourseResources

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

www.zenergytechnologies.com/qai-training-resources/

Password: allaboutQAI

Page 4: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

CourseOutline

Ø  Introduction •  Overview of course •  Logistics •  Expectations

Ø  Core Testing Concepts •  Levels of testing •  Testing practices •  BDD and TDD overview

Page 5: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

CourseOutline

Ø  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

Page 6: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

CourseOutline

Ø  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

Page 7: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

Introduction

Page 8: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

Overview

Ø  Course Overview

Ø  Logistics

Ø  Expectations

Page 9: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

Core Testing Concepts

Page 10: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

LevelsofTes4ng

Page 11: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

LevelsofTes4ng

Page 12: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

Tes4ngPrac4ces

Ø  Reviews and Inspections

Ø  Entry and Exit Criteria

Ø  Functional

Ø  Exploratory

Page 13: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

WhatisTDD?

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

Page 14: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

TDDProcess

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

Page 15: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

TDDProcess

Page 16: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

BDD&TDDProcess

Ø  TDD invests in automated unit tests

Ø  BDD invests in automated acceptance tests

Page 17: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

Jasmine and Karma

Page 18: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

WhatisKarma?

Ø  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

Page 19: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

WhatisNodeJS?

Ø  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

Page 20: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

NodeJSInstall

Ø  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

Page 21: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

KarmaSetup

Ø  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

Page 22: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

KarmaConfigura4onSetup

Ø  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

Page 23: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

Running–Ini4a4ngTests

Ø  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

Page 24: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

Tes4ngHelloWorld

Ø  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

Page 25: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

WhatisJasmine?

Ø  Behavior-driven development framework

Ø  Does not depend on any other JavaScript frameworks

Ø  Specifications for your JavaScript code

Ø  Write expectations

Ø  Uses matchers

Page 26: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

JasmineSetup

Ø  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

Page 27: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

BasicJasmineSyntax

Ø  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

Page 28: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

BasicJasmineSyntax

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

Page 29: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

BasicJasmineSyntax

Ø  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

Page 30: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

BasicJasmineSyntax

Ø  Multiple tests can be added to the describe function (test suite) by adding additional it blocks

Page 31: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

SetupandTeardown

Ø  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

Page 32: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

Matchers

Ø  Jasmine passes or fails a test based on a matcher boolean comparison between the actual value and the expected value

Page 33: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

PassorFail?

Ø  Evaluate this user sort test

Ø  What would be the result?

Page 34: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

DisablingSuitesandTests

Ø  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

Page 35: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

TryIt

Ø  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

Page 36: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

Spies

Ø  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

Page 37: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

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

Page 38: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

Spies

Ø  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

Page 39: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

UsingSpyMethods

Substitute a fake getName() for the real one

Page 40: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

Angular JS

Page 41: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

AppTes4ngwithAngular

Note: The file order does matter, load angular libraries first, followed by your filter, and then the file you wish to test

File path wherever the file is saved

Ø  You will need the angular mocks library

Ø  Install the files in your command window with:

•  npm install angular –save

•  npm install angular-mocks --save-dev

//listoffiles/patternstoloadinthebrowser

files:[

'node_modules/angular/angular.js',

'node_modules/angular-mocks/angular-mocks.js',

'/Users/TempUser/Desktop/test/Filters/app.js',

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

],

Page 42: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

Tes4ngAnAngularApp

Ø  Using the Angular library you are able to test Angular applications

Ø  Example of what a basic Angular Application looks like:

Page 43: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

AngularApplica4onTest

Page 44: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

ConfiguringAngularApplica4on

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

Page 45: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

AngularJS

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

Dependency List

Page 46: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

AngularJSConcepts

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

ExpressionHow values get displayed in the page

Direc4vesCommon 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

Controllers

Page 47: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

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

<h3>

{{store.product.name}}

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

</h3>

<button ng-show="store.product.canPurchase">Add to Cart</button>

</div>

</body>

</html>

Directive will hide the product if soldOut = true

Directive will only show if the value of the button is set to true (controlled by ng-show)

Page 48: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

Filters

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

<h3>

{{product.name}}

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

</h3>

Currency filter after the “pipe” formats everything being called before the “pipe”…in this case product.price

Page 49: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

Two-WayDataBinding

Ø  Expression is re-evaluated when a property changes

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

Page 50: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

angular.module('app', [])

.controller('PasswordController', function PasswordController($scope) {

$scope.password = '';

$scope.grade = function() {

var size = $scope.password.length;

if (size > 8) {

$scope.strength = 'strong';

} else if (size > 3) {

$scope.strength = 'medium';

} else {

$scope.strength = 'weak';

}

};

});

describe('PasswordController', function() { beforeEach(module('app')); var $controller; beforeEach(inject(function(_$controller_){ // The injector unwraps the underscores (_) from around the parameter names when matching $controller = _$controller_; })); describe('$scope.grade', function() { var $scope, controller; beforeEach(function() { $scope = {}; controller = $controller('PasswordController', { $scope: $scope }); }); it('sets the strength to "strong" if the password length is >8 chars', function() { $scope.password = 'longerthaneightchars'; $scope.grade(); expect($scope.strength).toEqual('strong'); }); it('sets the strength to "weak" if the password length <3 chars', function() { $scope.password = 'a'; $scope.grade(); expect($scope.strength).toEqual('weak'); }); }); });

Test Controller

Tes4ngaController

Page 51: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

Filter

describe('length filter', function() { 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); }); });

myModule.filter('length', function() { return function(text) { return ('' + (text || '')).length; } });

Test

Tes4ngaFilter

Page 52: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

Directive app.directive('aGreatEye', function () { return { restrict: 'E', replace: true, template: '<h1>lidless, wreathed in flame, {{1 + 1}} times</h1>' }; });

describe('Unit testing great quotes', function() { var $compile, $rootScope; // Load the myApp module, which contains the directive beforeEach(module('myApp')); // 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"); }); });

Test

Tes4ngaDirec4ve

Page 53: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

Protractor &

Selenium WebDriver

Page 54: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

WhatisProtractor?

Ø  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

Page 55: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

//spec.js

describe('ProtractorDemoApp',function(){

it('shouldaddoneandtwo',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');

});

});

ExampleBasicPage

Page 56: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

ProtractorFramework

Ø  Less code duplication

Ø  Readable

Ø  Maintainable

Page 57: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

ProtractorImplementa4on

Page 58: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

WhatarePageObjects?

Ø  Allow for reusability of elements

Ø  Establish a single point of maintenance

Ø  Provide an intuitive organizational model

A design pattern that models a web application based on its pages and/or sections of pages.

Page 59: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

PageObjectPaTerns

Ø  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 60: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

PageObject

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

Page 61: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

Spec

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

Page 62: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

Spec

Ø  Should only access web elements using page object functions

Page 63: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

Helper

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

Page 64: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

Conf

Ø  Should contain framework configuration

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

Ø  Should contain CI configuration

Ø  Should contain configuration parameters

Page 65: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

PageObjectandSpecExample

Page 66: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

SeleniumWebDriver

What it is...

•  Robust web object- based API

•  Successor to Selenium RC

What it does best...

•  Create robust, browser-based regression automation

•  Scale and distribute scripts across many environments

Page 67: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

WebDriver-API

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

Page 68: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

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

Page 69: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

FetchingaPage

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

Page 70: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

BrowserNaviga4on

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

Page 71: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

Loca4ngElements

Ø  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

Page 72: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

Loca4ngElements

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

Page 73: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

“By”Strategies-ID<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

Page 74: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

“By”Strategies-Name

<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

Page 75: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

“By”Strategies–ClassName<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

Page 76: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

“By”Strategies–TagName<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

Page 77: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

“By”Strategies–LinkText<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

Page 78: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

“By”Strategies–Par4alText<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

Page 79: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

“By”Strategies–CSS

Ø 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

Page 80: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

“By”Strategies–CSSSelectors

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”

Page 81: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

“By”Strategies–Xpath

Ø  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

Page 82: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

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

Page 83: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

LocatorExamples

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

Page 84: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

Loca4ngElementswithFirebug

Ø  Firebug is a Firefox plugin that provides tools for close inspection of the DOM.

Ø  It is available for free at http://getfirebug.com/

Page 85: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

Loca4ngElementsExample

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

Page 86: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

Interac4ngwithPageElements

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

Page 87: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

CodeExample

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

Page 88: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

CommonChallenges

Ø  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

Page 89: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

Synchroniza4on

Ø  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

Page 90: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

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

Page 91: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

ExplicitWaits

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

Page 92: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

BestPrac4cesforUsingWaits

Ø  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

Page 93: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

Real-WorldSelenium

Ø  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

Page 94: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

AdvancedTopics

Ø  Continuous integration

Ø  Code coverage

Ø  Remote/distributed testing

Page 95: Testing Angular JS Applications with Jasmine & Karma€¦ · Testing Angular JS Applications with Jasmine & Karma Training Workshop ... • ... 'node_modules/angular/angular.js',

A Testing Partner You Can Trust

Copyright © 2016 Zenergy Technologies, Inc.

Resources

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


Top Related