Protractor: Basic scripts

Basic Scripts:
Protractor needs two files to run, the test or spec file, and the configuration file. 

How to create scripts:

·         Create a folder

·         Create 2 text files name them as conf.js and spec.js

·         Lets see significance of conf and spec files below with simple examples

·         Copy paste below codes into spec and conf files as given below and save them

Spec files

Protractor tests are written using the syntax of your test framework, for example Jasmine, and the Protractor API. We are going to write code with Jasmine framework.

Example Spec File

This simple script (example_spec.js) tests the 'The Basics' example on the angularjs.org homepage.

describe('angularjs homepage', function() {

  it('should greet the named user', function() {

    // Load the AngularJS homepage.

    browser.get('http://www.angularjs.org');

expect(browser.getTitle()).toEqual(AngularJS — Superheroic JavaScript MVW Framework');

});

});

Global Variables

Protractor exports these global variables to your spec (test) file:

·         browser - A wrapper around an instance of WebDriver, used for navigation and page-wide information. The browser.get method loads a page. Protractor expects Angular to be present on a page, so it will throw an error if the page it is attempting to load does not contain the Angular library. (If you need to interact with a non-Angular page, you may access the wrapped webdriver instance directly with browser.driver).

·         element - A helper function for finding and interacting with DOM elements on the page you are testing. The elementfunction searches for an element on the page. It requires one parameter, a locator strategy for locating the element. See Using Locators for more information. See Protractor's findelements test suite (elements_spec.js) for more examples.

·         by - A collection of element locator strategies. For example, elements can be found by CSS selector, by ID, or by the attribute they are bound to with ng-model. See Using Locators.

·         protractor - The Protractor namespace which wraps the WebDriver namespace. Contains static variables and classes, such as protractor.Key which enumerates the codes for special keyboard signals.

Config Files

The configuration file tells Protractor how to set up the Selenium Server, which tests to run, how to set up the browsers, and which test framework to use. The configuration file can also include one or more global settings.

Example Config File

A simple configuration (conf.js) is shown below.

// An example configuration file

exports.config = {

  // The address of a running selenium server.

  seleniumAddress: 'http://localhost:4444/wd/hub',

  // Capabilities to be passed to the webdriver instance.

  capabilities: {

    'browserName': 'chrome'

  },

  // Spec patterns are relative to the configuration file location passed

  // to protractor (in this example conf.js).

  // They may include glob patterns.

  specs: ['example-spec.js'],

  // Options to be passed to Jasmine-node.

  jasmineNodeOpts: {

    showColors: true, // Use colors in the command line report.

  }

};

Script execution: 

·         Open command prompt

·         Enter webdriver-manager update and hit enter button , below screen will display

·         

·         Enter webdriver-manager start and hit enter button , below screen will display

·         Open new command prompt

·         Move to the folder where we created spec.js and conf.js files using cd file location

·         Enter protractor conf.js and press enter button

·         Browser will be launched and script will execute on the browser.

Protractor: Introduction to Jasmine and support browser for protractor

What is Jasmine:
Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests. This guide is running against Jasmine version 2.1.0.
 Test suite begins with a call to the global Jasmine function describe(as shown below code snippet) with two parameters: a string and a function. The string is a name or title for a spec suite - usually what is being tested. The function is a block of code that implements the suite.

describe("A suite", function() {

  it("contains spec with an expectation", function() {

    expect(true).toBe(true);

  });

});

Specs are defined by calling the global Jasmine function it, which, like describe takes a string and a function. The string is the title of the spec and the function is the spec, or test. A spec contains one or more expectations that test the state of the code. An expectation in Jasmine is an assertion that is either true or false. A spec with all true expectations is a passing spec. A spec with one or more false expectations is a failing spec

It's Just Functions

Since describe and it blocks are functions, they can contain any executable code necessary to implement the test. JavaScript scoping rules apply, so variables declared in a describe are available to any it block inside the suite.

Browser Support:

Protractor supports the two latest major versions of Chrome, Firefox, Safari, and IE. These are used in Protractor's own suite of tests.
Note that because Protractor uses WebDriver to drive browsers, any issues with WebDriver implementations (such as FireFoxDriver, ChromeDriver, and IEDriver) will show up in Protractor.

Protractor Architectureand editors

How this tool works:

Protractor is an end-to-end test framework for AngularJS applications. Protractor is a Node.js program that supports the Jasmine and Mocha test frameworks.
Selenium is a browser automation framework. Selenium includes the Selenium Server, the WebDriver APIs, and the WebDriver browser drivers.
Protractor works in conjunction with Selenium to provide an automated test infrastructure that can simulate a user’s interaction with an Angular application running in a browser or mobile device.

When working with Protractor, it’s important to keep the following in mind:

·         Protractor is a wrapper around WebDriverJS, the JavaScript bindings for the Selenium WebDriver API (before writing any tests, skim through the WebDriverJS Users Guide).

·         WebDriver commands are asynchronous. They are scheduled on a control flow and return promises, not primitive values (see The WebDriver Control Flow).

·         Your test scripts send commands to the Selenium Server, which in turn communicates with the browser driver. Read on for more details.

Process Communication:

A test using Selenium WebDriver involves three processes - the test script, the server, and the browser. The communication between these processes is shown in the diagram below.

The Selenium Server takes care of interpreting commands from the test and forwarding them to one or more browsers. Communication between the server and the browser uses the WebDriver Wire Protocol, a JSON protocol. The command is interpreted by the Browser Driver.
With Protractor, the test script is run using Node.js. Protractor runs an extra command before performing any action on the browser to ensure that the application being tested has stabilized. For example, let's look at the following snippet of test code.

element(by.css('button.myclass')).click();

This will result in three commands being sent to the Browser Driver

·         /session/:sessionId/execute_async - First, Protractor tells the browser to run a snippet of JavaScript. This is a custom command which asks Angular to respond when the application is done with all timeouts and asynchronous requests, and ready for the test to resume.

·         /session/:sessionId/element - Then, the command to find the element is sent.

·         /session/:sessionId/element/:id/click - Finally the command to perform a click action is sent.

AUTO IT : Overview on Auto IT and use in selenium webdriver

AutoIt v3 is a freeware BASIC-like scripting languages designed for automating the windows GUI and general scripting. It used a combination of simulated keystrokes, mouse movements and window/control manipulation in order to automate tasks in a way not possible or reliable with other languages. Auto it is also very small, self contained and will run on all versions of Windows.

In general Auto it is just another automation tool like selenium but unlike Selenium it is used for Desktop automation rather than web application. it is a powerful tool and it just not automate desktop windows, button & form, it automates mouse movements and keystrokes too.

We need to integrate this auto it code in our selenium. ..

simply we will handle this window based file uploading scenario in auto it , later we will selenium program where in which we will call this auto it code...

if at we would like to perform operations on web application we can simply identify the object using a browser, like the same way in order to perform operations on any window we need to identify the properties for that window or objects on that window.

steps to configure:

1) download complete Autoit from its official website

https://www.autoitscript.com/site/autoit/downloads/

3) goto programming files under C driver and check fot auto it folder

4) open the frozen tool which will helps in getting various kinds of properties for an object

5) now we need to open the autoit editor by cliking on below :

6) the editor will display as below

7) open the browser and open the application which is having window based alerts

8) get the popup window properties using AUTOIT finder , simply drag it and drop on the desired object corresponding object properties will display in the finder

9) we need to write a program which will perform the desired operations like selecting the window and entering a value to that window

10) Window activate is the command which is used to activate the window , so simply save your test script and compile that an executable file will be created at the same location where you saved the script, simply double click on the executable file and hence it will perform the actions

11) controlset text is a command which we used to enter a value into a search field

12) control click is a command which will perform click operation

13) after whole script got prepared save it and compile it

14) goto the folder where we saved this file and simply double click on the executable file and check whether it is performing the actions or not

15) create a new test script in webdriver and now whatever the file we have created we need to call that file in our webdriver program for which we are using pr

in order to call the executable file we have 2 options:

1) Process Builder

ProcessBuilder p=new ProcessBuilder("d:\\Jeevan.exe","","Open");

                       

                        p.start();

2) Run time execution

Runtime.getRuntime().exec("d:\\Jeevan.exe");

Protractor : Locators for Protractor

 The heart of end-to-end tests for webpages is finding DOM elements, interacting with them, and getting information about the current state of your application. This post is an overview of how to locate and perform actions on DOM elements using Protractor.

Overview on locators

Protractor exports a global function element, which takes a Locator and will return an ElementFinder. This function finds a single element - if you need to manipulate multiple elements, use the element.all function.

The ElementFinder has a set of action methods, such as click(), getText(), and sendKeys. These are the core way to interact with an element and get information back from it.

A locator tells Protractor how to find a certain DOM element.

Protractor exports locator factories on the global by object.

Below are most frequently used properties in our projects:

Id: If an object is having id property then use below syntax:

element(by.id('Id property of your object'));

Classname : If an object is having class name as below  

Object class property is : classname =btn btn-primary

then write as  element(by.css(‘.btn.btn-primary’));

Function name: If an object is having an ng-click- function as below

<button ng-click="myFunction()" ng-show="flag">

    Submit

</button>

Then use this syntax to identify object: element(by.css('[ng-click="myFunction()"]'))

Text present on a button: If there is a text on an button then use below syntax

element(by.buttonText("Download AngularJS"));

Link text: If there is a link to identify we can use any of below given 2 options:

Option 1: element(by.linkText('Complete')).click()

Option 2: element(by.css('a[href*="Previous Versions"]')).click();

Table objects: If your applications is having an header row with multiple links and if it doesn’t have any specific properties as below screenshot

Then use below syntax:

by.xpath("//span[contains(@class,'MenuText')][contains(text(),’Text on Link')]"));

Protractor command would be like this:

browser.driver.findElement(by.xpath("//span[contains(@class,'MenuText')][contains(text(),’ ’Text on Link ')]"));

Once protractor was installed you can find examples from the below location:

C:\Users\surendra\AppData\Roaming\npm\node_modules\protractor

We need to save this path to run our scripts on other browsers like IE

WebDriver: Setup for selenium webdriver

Files to download:

1) eclipse editor : https://www.eclipse.org/downloads/?

2)  jxl jar file: using this we can perform data driven testing: http://www.java2s.com/Code/Jar/j/Downloadjxljar.htm

3) junit .jar : to write junit test cases: https://sourceforge.net/projects/junit/

4) selenium java cleint drivers: http://selenium-release.storage.googleapis.com/index.html?path=2.48/

select below files to download:

·         Selenium JAVA 2.48.2 zip file

after download unzip that file >> it has 2 jar files and 1 lib folder inside that

this one contain all the selenium related commands in webdriver we were using different syntax so this one we no need to add>> it contains a libs folder in which multiple jar files are there even we need to add them to our project.

Configuring in Eclipse editor: 

1) create a new project in eclipse for writing test scripts in webdriver

Goto File >> new >> other >> expand java folder >> select java project >> click on next button >> give a valid name >> click on next button >> click on finish button

2) For this project now we need to add jar files

 right click on Project >> goto build path >> configure build path >> add external jar >> select the desired jar files(2 selenium java files and all the jars in the lib folder) and click on ok button >> ok button  >> automatically a new folder which is referenced library will be created to your project

** select java client drivers internally contains a libs folder in which there are few more jar files are there, add all the jar files from the libs folder **.

3) For this project create a package and for which create a new junit test

WebDriver: Introduction to Selenium WebDriver

what is webdriver??

webdriver is a tool for writing automated tests of websites. It will interact with the html of the application.

webdriver is an interface which contains set of abstract methods (unimplemented methods) which implemented by various classes like FirefoxDriver, IEdriver, chrome driver etc.

Browser supported:

·         Firfox

·         chrome

·         IE

·         safari

·         opera

·         invisible mode of execution: html unit driver

Architecture of webdriver:

·         For each and every selenium command written in binding(programming language) , a HTTP request is created and sent(through web driver API)  to the browser driver..

·         the browser driver uses a HTTP server for getting the http requests

·         the HTTP server determines the steps needed for implementing the selenium command they executed on the browser

·         the execution status is sent back to http server in webdriver

·         we no need to start selenium server to execute the test cases