Avenue Code Snippets

Rapid-Fire Protractor Quiz

Written by Madhu Ramachandran | 3/1/17 7:00 PM

For the last two weeks, I have been busy studying the Protractor automation tool. During the process, several questions came to mind and as I researched and studied to uncover the mysteries of this framework, I decided to put the results together as a Q&A. This blog is the result! Consider this your well-informed Siri or Alexa guide to Protractor for beginners.

  • What is Protractor?

                    Answer: Protractor is an open source E2E testing automation framework, designed specifically for AngularJS web  applications. The Protractor automation tool is a Node.js program built on top of WebDriverJS.       

                                       Protractor works as a Solution integrator combining powerful technologies like NodeJS, Jasmine, Selenium, Mocha, Cucumber and Web driver. Protractor is intended not only to test AngularJS application, but also for writing automation tests for any web applications. 

  • Why do we need yet another framework? Why Protractor? 

                     Answer: AngularJS applications are Web Applications, which use the extended HTML's syntax to express web application components. It is mainly used for dynamic web applications. These applications use less code that is more flexible code compared with normal Web Applications.

                                         Sometimes it is difficult to capture the web elements in AngularJS applications using jUnit or Selenium Web driver. Protractor supports Angular-specific locator strategies, which allows you to test Angular-specific elements without any setup effort on your part. 

  • Really? So what can Protractor do that Selenium can’t?

                        Answer: Well, 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 API. So, Protractor on top of Selenium can handle and controls those attributes in Web Applications.  

                                           Protractor also speeds up your testing as it avoids the need for a lot of “sleeps” and “waits” in your tests, as it optimizes sleep and wait times.

  • So what framework does Protractor use? 

                         Answer: Protractor supports two behavior driven development (BDD) test frameworks out of the box: Jasmine and Mocha. These frameworks are based on JavaScript and Node.js and provide the syntax, scaffolding, and reporting tools you will use to write and manage your tests.                                   

                                             Cucumber is no longer included by default. You can integrate Cucumber with Protractor with the custom framework option. 

  • Okay, Can you help me visualize the workflow? 
                           Answer: Sure. Protractor needs two files to run, the test or spec file, and the configuration file. The spec file (test) is written using the syntax of the test framework you choose, such as Jasmine or Mocha along with Protractor API. The configuration file tells Protractor how to configure the testing environment - Selenium server, which tests to run, browsers and more.

 

  

  • Thank you. Is it easy to setup/install Protractor?
                         Answer: Easy peasy. You may need 2-3 minutes.
  1. Download Node.js
  2. sudo npm install –g protractor
  3. webdriver-manager update

 

  • Use npm to install protractor globally with:
              npm install –g protractor
  • This will install two command line tools, protractor and webdriver-manager. Try running it to make sure.
              protractor --version
  • The webdriver-manager is a helper tool to easily get an instance of a Selenium Server running. Use it to download the necessary binaries with:
              webdriver-manager update
               This will start up a Selenium Server and will output a bunch of info logs. Your Protractor test will send requests to this server to control a local browser. Leave this server running throughout the tutorial. You can see information about the status of the server at http://localhost:4444/wd/hu

 

  • That was easy. I am excited to write my first Protractor test. Can you help me? 
                                  Answer: Sure. Let's follow the steps below: 

 

  1. Setup a config.js file 
  1. Create a file example-spec.js using Jasmine and WebdriverJS

  1. Let’s run it?

  • First things first, open the terminal and start the webdriver server:

                                                  webdriver-manager start 

  • After that, you can run Protractor in another terminal by typing:

                                                    protractor config.js 

  • You should see a Chrome browser window open up and navigate to the AngularJS page enter Julie , then close itself (this should be very fast!). You should see “1 spec, 0 failures” in the terminal 

  1. Your first test is successfully completed.

 

  • I didn't declare “browser” or “element” - where it will be initialized?

                            Answer: That's right. Protractor exports these global variables to your spec 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 element function searches for an element on the page. It requires one parameter, a locator strategy for locating the element. 

                          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.

 

  • What are the browsers supported by Protractor? 

                           Answer: Protractor supports the two latest major versions of Chrome, Firefox, Safari, and IE.  In your Protractor config file (see config.js), all browser setup is done within the capabilities object. This object is passed directly to the WebDriver builder (builder.js).To use a browser other than Chrome, simply set a different browser name in the capabilities object.                             

capabilities: {
 'browserName': 'firefox'
} 

  • Can I run parallel tests using Protractor?

                          Answer: Of course! If you would like to test against multiple browsers, use the multiCapabilities configuration option.

                                             Again, you have to tweak the config.js file:     

multiCapabilities: [{
 'browserName': 'firefox'
}, {
 'browserName': 'chrome'
}]

                                           Protractor will run tests in parallel against each set of capabilities. Please note that if multiCapabilities is defined, the runner will ignore the capabilities configuration.

That concludes my brief Q&A on Protractor, based on my research. I hope it was helpful! Questions? Leave them in the comments!
View full post