Over a million developers have joined DZone.
Platinum Partner

Baby steps with Protractor and AngularJS

· Web Dev Zone

The Web Dev Zone is brought to you in partnership with Mendix.  Discover how IT departments looking for ways to keep up with demand for business apps has caused a new breed of developers to surface - the Rapid Application Developer.

Protractor is an emerging E2E (end to end) testing framework in the AngularJS world. This article shows you how to run your very first test in Protractor.

Before beginning, ensure you have the following pre-requisites installed.

The first thing you need to do is to install Protractor.

npm install -g protractor  

As Protractor uses webdriver/selenium under the covers, you will need to ensure you have the necessary libaries installed.

webdriver-manager update  

To get started, we'll just take the example configuration bundled with Protractor.

$ mkdir protractor
$ cd protractor
$ cp /usr/local/lib/node_modules/protractor/example/* .

Now in another terminal window, start up selenium server via the following command.

$ webdriver-manager start

You should see a bunch of output like:

seleniumProcess.pid: 7636  
May 02, 2014 9:32:19 PM org.openqa.grid.selenium.GridLauncher main  
INFO: Launching a standalone server  
Setting system property webdriver.chrome.driver to /usr/local/lib/node_modules/protractor/selenium/chromedriver  
21:32:19.465 INFO - Java: Oracle Corporation 23.7-b01  
21:32:19.465 INFO - OS: Mac OS X 10.9.2 x86_64  
21:32:19.477 INFO - v2.41.0, with Core v2.41.0. Built from revision 3192d8a  
21:32:19.564 INFO - Default driver org.openqa.selenium.ie.InternetExplorerDriver registration is skipped: registration capabilities Capabilities [{platform=WINDOWS, ensureCleanSession=true, browserName=internet explorer, version=}] does not match with current platform: MAC  
21:32:19.600 INFO - RemoteWebDriver instances should connect to:  
21:32:19.601 INFO - Version Jetty/5.1.x  
21:32:19.602 INFO - Started HttpContext[/selenium-server/driver,/selenium-server/driver]  
21:32:19.603 INFO - Started HttpContext[/selenium-server,/selenium-server]  
21:32:19.603 INFO - Started HttpContext[/,/]  
21:32:19.619 INFO - Started org.openqa.jetty.jetty.servlet.ServletHandler@2a852e54  
21:32:19.619 INFO - Started HttpContext[/wd,/wd]  
21:32:19.622 INFO - Started SocketListener on  
21:32:19.622 INFO - Started org.openqa.jetty.jetty.Server@1dc80063  

Now back in your protractor directory, run the example test.

$ protractor conf.js

If this runs correctly, chrome should pop up and run a few tests over the AngularJS website. This means protactor has been setup properly and you should be able to use it in your testing.

Here are some references:

The Web Dev Zone is brought to you in partnership with Mendix.  Learn more about The Essentials of Digital Innovation and how it needs to be at the heart of every organization.

java,html5,javascript,tips and tricks,angularjs,protractor

Published at DZone with permission of Ricky Yim , DZone MVB .

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}