Agenda Evolution of Web Applications What is Protractor
Agenda • Evolution of Web Applications • What is Protractor • Selenium - Web Driver vs. Protractor • Demo and Terminologies © 1996 -2016 Aspire Systems, Inc. US | UK | BENELUX | ME | IND
Evolution of Web Applications Single Page Application Samples : https: //onepagelove. com/gallery/application © 1996 -2016 Aspire Systems, Inc. US | UK | BENELUX | ME | IND
What is Protractor? • Test like a User • For Angular JS Apps • Automatic Waiting (for Asynchronous calls) • Built on top of Webdriver. JS and Selenium Server • Simple Syntax • Allows Remote Agent execution (Targeted Remote Addressed) • Multi Threading • Capability is enhanced with Frameworks like Jasmine / Mocha © 1996 -2014 Aspire Systems, Inc. US | UK | BENELUX | ME | IND
Compare Protractor vs Selenium Features Selenium / Webdriver Protractor Browser Support Multi (Chrome, Firefox, IE) Multi Threading Yes Element Identification class. Name, css, id, link. Text, name, partial. Link. Text, tag. Name, xpath Protractor Specific add. Locator, binding, exact. Binding, model, button. Text, partial. Button. Text, repeater, exact. Repeater, css. Containing. Text, options, deep. Css Webdriver extensions class. Name, css, id, link. Text, js, name, partial. Link. Text, tag. Name, xpath Programming Language Java, C#, Java. Script, Perl, PHP, Ruby etc Java Script Async. Calls (Angular JS Applications) Does not support Has Support © 1996 -2014 Aspire Systems, Inc. US | UK | BENELUX | ME | IND
Compare Junit vs Jasmine Annotation Junit Jasmine Suite @Suite Describe Test @Test it Verification Assert Expect Fail Test Assert. Fail Setup Beforeeach, beforeall Teardown Aftereach, Afterall Asynchronous Wait Not Applicable Done() Reference http: //jasmine. github. io/edge/introduction. html © 1996 -2014 Aspire Systems, Inc. US | UK | BENELUX | ME | IND
Demo and Terminologies • Node (similar to bash for Shell) • NPM (similar to Ruby Package Manager) • Package. JSON (similar to xml / pom / Gemfile) © 1996 -2014 Aspire Systems, Inc. US | UK | BENELUX | ME | IND
Sample Code and Steps • • • npm install -g protractor (command) webdriver-manager update (command) npm install jasmine-reporters (command) Npm webdriver-manager update (command) webdriver-manager start (command) / Run Selenium Standalone RC protractor config. js (command to be triggered inside project root folder i. e. Protractor. Jasmine. Demo) Please refer to zip file along with this Presentation. . © 1996 -2014 Aspire Systems, Inc. US | UK | BENELUX | ME | IND
Recap on Verizon § Capture the Web Page Traffic and store in external file format § Capture the total page size, Images Sizes, JS (Java Script) sizes, CSS file sizes Q&A § Need a solution that can work across multiple devices / useragents § Selenium with Selenium Proxy Server § Java & Test NG § POI § HAR Reader (Handling HAR Format) § IDE - Eclipse § Capturing Page, Image, CSS and JS Sizes § Implemented the above approach for Desktop Browser § Store the Network Traffic in the form of HAR File which can be used by Developers § Code is scalable across Windows, Mac and Linux Environments © 1996 -2014 Aspire Systems, Inc. US | UK | BENELUX | ME | IND
- Slides: 9