Introduction to Protractor - Habilelabs

Post on 24-Jan-2018

51 views 1 download

transcript

HABILELABS PVT. LTD.YOUR INTEREST OUR INTELLIGENCE

VIKASH GUPTADeveloper

ProtractorAn end-to-end test framework

Let`s start!

ET

P

1

2

3

4

What is Testing?Basics of Testing with some example.

What is End-to-End Testing?

About ProtractorQuick story behind development of Protractor

How Protractor works?Behind the scenes..

5

6

7

Installation and Configuration How to get up and running with Protractor

Live Demo on Protractor TestingA Quick Demo

Why Protractor?This will make you feel better

End of presentation with a Question?Thank you for your attention

TestingWhat is Testing ?

What is TestingLet’s clear some basics about testing.

1. Unit Testing

“Verification of Product before take on to online network..”

“Validate the separate units of source code remains working or not

“Integrate/combine the unit tested module one by one and test behavior”

2. Integration Testing

End-to-End TestingWhat is e2e Testing ?

What is End-to-End TestingLet’s talk about End-to-End..

• The purpose of carrying out end-to-end tests is to identifysystem dependencies and to ensure that the right informationis passed between various system components and systems.

“test whether the flow of an application is performing as designed from start to finish. ..”

Step 3 Expect some Output For Success

Check for some element, presence of those elementmeans your test got succeed or failed.

Step 2Provide Input to the page

It includes the operations like provide input for TextBox, clicking on buttons or checkboxes etc.

Expect some page for Input

How End-to-End Test WorksWork Flow of End-to-End Tests.

IDEA

Step 1

About ProtractorA end-2-end testing tool

What is ProtractorLet’s talk about Protractor..

• Protractor is an end-to-end test frameworkfor AngularJS applications.

• It use Jasmine framework for it’s syntax.

• Developed by Julie Ralph in 2013, (same team as Angular) atGoogle.

• Protractor is built on top of WebDriverJS.

• WebDriverJS provide the browser-specific nativeevent libraries.

• In process, Selenium server work as Interpreter.

SSynchronization issue.

As you know, Almost web application uses javascript as its primary component and Javascript is asynchronus in nature.

In Complex UI applications, It become hard to find element by css and id. So at the end, use xpath

ElementFinder issues

How Protractor came into Picture

IDEA

So Protractor uses angular models, binding, expressions as element finder, that makes End-to-End testing more promising.

Angular have got power of directives

S

Protractor use promises to maintain control flow

For Angular apps, Protractor will wait until the Angular Zone stabilizes. This means Protractor waits until there are no pending asynchronous tasks in your Angular application. This means that all timeouts and http requests are finished.

InstallationLet’s install Protractor

N J P W

1. Node jsInstall windows executable file

2. JDKFrom Java Website

3. Protractornpm install –g protractor

4. WebDriver ManagerWebdriver-manager update

Protractor InstallationLet’s install protractor

• Protractor is a Node.js program. To run, you will need to haveNode.js installed.

• Protractor use Selenium to control browser automatically, thisneeds Java.

Live DemoLet’s see It live

Live Demo on ProtractorLet’s play around Protractor..

• For Demo purpose of Testing, clone the angular project

https://github.com/juliemr/protractor-demo.

Why ProtractorLet’s know Reasons

For Angular AppsProtractor supports Angular-specific locator strategies, which allows you to test Angular-specific elements without any setup effort on your part.

Automatic WaitingYou no longer need to add waits and sleeps to your test. Protractor can automatically execute the next step in your test the moment the webpage finishes pending tasks

Page ObjectEasy to set up page objects. Protractor does not perform WebDriver commands till an action is needed

Support for Selenium ServerProtractor provide support for chrome and firefoxbrowser with webdriver-manager. That makes test fast.

Concept of Custom locator.You can make element-locator specific to your language.

Why ProtractorReasons to use protractor

IDEA

Contact Us

Address: 4th Floor, IGM School Campus, Jaipur

Website: www.habilelabs.io

Contact no: +91-9828247415

mail id: info@habilelabs.io