ProtractorJS
Set up and tutorial for Linux Ubuntu...
Install and update
- npm
- sudo npm - g install protractor - - save-dev
- enter password and continue install
- JAVA
- sudo apt-get install default-jre
- sudo apt-get install default-jdk
- JAVA_HOME
- sudo update-alternatives - - config java
- JAVA_HOME = "/usr/lib/jvm/java-(version)-openjdk-amd64/"
- Protractor
- sudo npm -g install protractor - - save-dev
- Selenium
- ./node_modules/protractor/bin/webdriver-manager update
- ./node_modules/protractor/bin/webdriver-manager start
- ChromeDriver
- wget
- unzip chromedriver_linux64.zip
- mv chromedriver protractor/
- protractor protractor/chromedriver chromeOnlyConf.js
- Post screen shots and add a HTML reporter at the end
- npm install protractor-html-screenshot-reporter - -save -dev
- More as needed **
Folder Structure
- test
- e2e
- conf.js
- data
- functions
- pageObjects
- Home.js
- Login.js
- PageTitles.js
- Register.js
- template.js
- results
- support
- index.js
- tests
- Login.js
- Register.js
- Upload.js
- uploads
- File1
- File2
Configuration File (conf.js)
var HtmlReporter = require('protractor-html-screenshot-reporter');
var path = require('path');
exports.config = {
seleniumServerJar: './node_modules/protractor/selenium/selenium-server-standalone-2.45.0.jar',
seleniumAddress: 'http://localhost:4444/wd/hub',
seleniumPort: null,
seleniumArgs:[],
capabilities:{
'browserName':'chrome'
},
baseUrl: 'http://www.google.com',
framework: 'jasmine',
specs: ['e2e/tests/*.js'],
onPrepare: function(){
jasmine.getEnv().addReporter(new HtmlReporter({
baseDirectory: './e2e/results/',
docTitle: 'Corbis test Reporter',
docName: 'corbis-test-results.html'
}))},
jasmineNodeOpts:{
showColors: true,
defaultTimeoutInterval: 30000,
isVerbose: true,
includeStackTrace: true},
};
Index.js
// This files consists of all the files that need to be exported to the test execution and function files.
// A
// B
// C
// D
// E
// F
// G
// H
exports.pHome = require('../pageObjects/Home.js');
// I
// J
// K
// L
exports.pLogin = require('../pageObjects/Login.js');
// M
// N
// O
// P
// Q
// R
// S
// T
exports.Title = require('../pageObjects/PageTitles.js');
// U
// V
// W
// X
// Y
// Z
Page Object Model
The files in this folder will be named after the pages in the application.
Store all the elements on a page in a single file.
Some pages have just 2 elements specific to the page.
Some pages have 200 elements specific to the page.
I store the page specific elements for each page in an application in an individual pageObject file.
This way when the User Interface or Document Object Model or HTML IDs of the page change, it would be easy to locate the particular page and update the values quickly.
Home
The Home file stores all the home elements the common css elements of the application.
Elements like links, logos, version, header, footer, menus etc.
This practice eliminates the need to maintain the standard elements in all the individual page files and also eliminates the need to update numerous files.
PageTitles
The PageTitles file stores all the page titles.
Most pages may not need individual repository files, but it would be necessary to test their existence.
Though the elements of each page are maintained in individual files, it is a good practice to store all the page titles in a singular file.
During development of an application, most pages are given page titles decided by the developers, this changes once the Business Analysts and the legal team decide and decide again, the page titles change. During organizational changes or Web site name changes (although rare in most companies) occur, it would be easier to update the Titles in one quick editing session.
Pages
Depending upon the application and the domain the pages could be many and any.
The basic pages for any software application – Home, Main, Register, Login.
Sort
Sort the classes alphabetically in groups based on the element type and name them appropriately.
// Buttons
// Caption
// Checkbox
// Drop Down List
// Elements - Misc
// Error messages
// Fields
// Image
// Logo
// Links
// Menu
// Radiobutton
// Section
// Sub Menu
// Tabs
// Text
Naming convention
These are the most commonly used shortcuts by me to specify the element type. I habitually abbreviate the page names but only occasionally I abbreviate the element names.
Use the exact name given to an element on the page in English and add an abbreviated element tag.
Suggested element name starters -
Element | Suggested |
Button | b |
Caption | cap |
Card | c |
Check Box | cb |
Dialog Box | d |
Drop Down Lists | ddl |
Error | errt |
Field | f |
Heading | h |
Icon | i |
Image | img |
Link | l |
Logo | logo |
Menu | m |
Navigation Bar | nb |
Page | p |
Radio Button | rb |
Section | sec |
Sub Menu | sm |
Tab | tab |
Text | t |
Example POM file - Login.js
// Elements on page Login
// Test Steps for page Login
var Login = function() {
// Buttons
this.bSignIn = element(by.id('signInButton'));
// Caption
// Checkbox
// Drop Down List
// Elements - Misc
// Error messages
this.errNeedEmail = element(by.id('error'));
// Fields
this.fPassword = element(by.id('password'));
this.fUserId = element(by.id('usernameOrEmail'));
// Image
// Logo
// Links
this.lForgotPassword = element(by.linkText('Forgot your Password?'));
this.lRecoverUsername = element(by.linkText('Contact us to recover your username.'));
this.lRegisterNow = element(by.linkText('Register now'));
// Menu
// Radiobutton
// Section
// Sub Menu
// Tabs
// Text
};
module.exports = new Login();
(More elements exist on this page. I captured only the ones I am using to do this demonstration)
Home.js
// Elements on page Home
var Home = function() {
// Buttons
this.bSignIn = element(by.id('signInButton'));
// Caption
// Checkbox
// Drop Down List
// Elements - Misc
// Error messages
// Fields
// Image
// Logo
// Links
this.hlSignIn = element(by.id('signin'));
// Menu
// Radiobutton
// Section
// Sub Menu
// Tabs
// Text
};
module.exports = new Home();
PageTiles.js,
// Page titles of all the pages in the application, Just add the text of the title alone.
var PageTitles = function() {
// A
// B
// C
// D
// E
// F
// G
// H
this.Home = ('Stock Photos, Royalty-Free Images & Illustrations - Corbis Images');
// I
// J
// K
// L
// M
// N
// O
// P
// Q
// R
// S
this.SignIn = ('Sign In');
// T
// U
// V
// W
// X
// Y
// Z
};
module.exports = new PageTitles();
Actual Test case
describe('corbis sign in', function() {
var al = require('../support/index.js');
it('Corbis home page comes up', function() {
browser.ignoreSynchronization = true;
browser.get('/');
expect(browser.getTitle()).toEqual(al.Title.Home);
});
it('Click on link Sign in, Sign in page comes up', function() {
al.pHome.hlSignIn.click();
browser.sleep(5);
expect(browser.getTitle()).toEqual(al.Title.SignIn);
});
it('Type in fields Username and Password and click on button Sign In', function() {
al.pLogin.fUserId.sendKeys('green.lantern.cuke@gmail.com');
al.pLogin.fPassword.sendKeys('*****!!');
al.pLogin.bSignIn.click();
browser.sleep(5000);
});
it('User logged in, username is visible in header', function() {
var userID = element(by.id('username'));
expect(userID.getText()).toEqual('Srilu Pinjala');
});
});
/*
*/
Execute the test case
Protractor JavaScript for.... (coming soon)
Clicking on a link
Clicking a button
Typing in a field
Checking a check-box
Selecting a Radio button
Verifying a Title
Maximizing a Window
Minimizing a Window
Verify an element exists
Verify an element does not exist
No comments:
Post a Comment