Code Monkey home page Code Monkey logo

protractor-javascript-demo's Introduction

Protractor JavaScript Demo


What is Protractor?

Protractor plays an important role in the Testing of AngularJS applications and works as a Solution integrator combining powerful technologies like Selenium, Jasmine, Web driver, etc.

It is intended not only to test AngularJS application but also for writing automated regression tests for normal Web Applications as well.


Why do we need Protractor framework?

JavaScript is used in almost all web applications. As the applications grow, JavaScript also increases in size and complexity. In such case, it becomes a difficult task for Testers to test the web application for various scenarios.

Sometimes it is difficult to capture the web elements in AngularJS applications using JUnit or Selenium WebDriver. Protractor is a NodeJS program which is written in JavaScript and runs with Node to identify the web elements in AngularJS applications, and it also uses WebDriver to control the browser with user actions.


Why can't we find Angular JS web elements using normal Selenium web driver?

Angular JS applications have some extra HTML attributes like ng-repeater, ng-controller, ng-model.., etc. which are not included in Selenium locators. Selenium is not able to identify those web elements using Selenium code. So, Protractor on the top of Selenium can handle and controls those attributes in Web Applications.

The protractor is an end to end testing framework for Angular JS based applications. While most frameworks focus on conducting unit tests for Angular JS applications, Protractor focuses on testing the actual functionality of an application.


Protractor installation

(Steps 3 and 4 are Optional but recommended for better practice).

  1. Open command prompt and type npm install โ€“g protractor and hit Enter. The above command will download the necessary files and install Protractor on the client system.

  2. Check the installation and version using protractor --version. If successful it will show the version.

  3. Update the Web driver manager. The web driver manager is used for running the tests against the angular web application in a specific browser. After Protractor is installed, the web driver manager needs to be updated to the latest version. This can be done by running the following command in the command prompt.
    webdriver-manager update

  4. Start the web driver manager. This step will run the web driver manager in the background and will listen to any tests which run via protractor. Once Protractor is used to run any test, the web driver will automatically load and run the test in the relevant browser. To start the web driver manager, the following command needs to be executed from the command prompt.
    webdriver-manager start

Now, if you go to the following URL (http://localhost:4444/wd/hub/static/resource/hub.html) in your browser, you will actually see the Web driver manager running in the background.


File organization

Protractor-JavaScript-Demo/
|- node_modules/                                // downloaded node modules
|- page/using_async_await/LoginPagePo.js        // page object example by using async/await keywords
|- page/using_helper_class/LoginPagePo.js       // page object example by using protractor-helper class
|- reports/                                     // generated reports for the test execution
|- spec/using_async_await/LoginPageSpec.js      // spec for the page objects example by using async/await keywords
|- spec/using_helper_class/LoginPageSpec.js     // spec for the page objects example by using protractor-helper class
|- .gitignore                                   // excluded the downloaded node modules in the repo
|- async_await_conf.js                          // configuration for the page objects example which used async/await keywords
|- conf.js                                      // configuration for the page objects example which used protractor-helper class
|- LICENSE                                      // GPL-3.0
|- package.json                                 // node dependencies for the project
|- package-lock.json                            // describes the exact tree that was generated, such that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates.
|- README.md                                    // this file

How to run this project?

  1. Clone this project
  2. Run npm install to download required dependencies
  3. Run protractor conf.js to run the sample tests which used protractor-helper class
  4. Run protractor async_await_conf.js to run the sample tests which used async/await keywords
  5. Reports will be created in ./reports folder

protractor-javascript-demo's People

Contributors

osandadeshan avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

Forkers

onimalarat

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.