16

I have been using Selenium/Java/Maven for functional automation testing in my project. But since angular is getting a lot of popularity, the development team has started using it for the development of new web applications in the project. And there is a lot of emphasis on using Protractor for test automation; instead of Selenium because it facilitates identifying angular elements with ease.

I have good experience in Selenium but I am relatively new to Protractor. What steps should I follow in order to make this transition from Selenium to Protractor smooth and efficient (in terms of additional skills that I need to acquire)?

  • 2
    Do you need to transition? It's easy to write custom locators, and other than that... what are the benefits? – FDM Oct 10 '17 at 13:15
  • 3
    I just learned that new protractor for new Angular (2+) has only standard id/name/css locators, support for angular-specific locators was abandoned. I do not see any reason to move to protractor, which forces me to abandon all the investment we made in developing pageobject and framework in Python. Also, personal opinion, but I consider Python superior to JavaScript, yet another reason NOT to move to protractor – Peter M. Oct 10 '17 at 14:31
  • 1
    For details, see sqa.stackexchange.com/questions/14555/… – Peter M. Oct 10 '17 at 14:31
  • 2
    Protractor and javascript is the way to go for angular application. Java era is gone. – user1343454 Oct 10 '17 at 18:21
  • 1
    This is tedious way. Instead you can say - Moving from Protractor to Selenium. Why are you thinking about this transition. – Sophia Apr 26 '18 at 7:58
13

Adding couple notes to Niels's great answer.

Protractor wraps WebDriverJS which is Javascript Selenium bindings - in other words, Protractor does interact with a browser through the Selenium WebDriver. Protractor provides a really convenient API and has some unique Angular-specific features, like Angular specific element locating strategies (by.model(), by.binding(), by.repeater()), automatic synchronization between Protractor and Angular that helps to minimize the use of explicit waits here and there; there is a built-in support of BrowserStack and SauceLabs, test parallelization and many more.

As an another advantage of transitioning to Protractor/JavaScript is that both the application and the test codebase would be written in the same language.

I've seen several teammates transitioning from Selenium/Java, Selenium/Python or Selenium/C# to Protractor/JavaScript. The common challenges and difficulties were:

  • understanding asynchronous test execution in general
  • Promises and Control Flow: when to resolve a promise and when not; how to pass promises around from function to function; when to use deferred and how to manually fulfill/reject a promise; using done() in Jasmine
  • tackling flaky end-to-end tests
  • test code design and organization - where and how to keep page objects, how to wrap page objects into each other
  • 1
    I was just on a training where I was told that Angular 2+ does not support locators using binding/model etc, just standard id/name/css. Only old/obsolete AngularJS could locate by bindings etc. What is your experience? – Peter M. Oct 10 '17 at 14:41
  • 1
    @PeterMasiar right, by model and by binding don't work with Angular 2+. Protractor has still though a nice abstraction layer on top of webdriverjs and the Angular-to-Protractor sync is a selling point. Another thing that worries me a bit is that Protractor is getting less and less active on github - there are some outstanding long-running issues that are not being addressed. No new features for quite a long time as well. Thanks. – alecxe Oct 10 '17 at 16:29
  • 1
    @PeterMasiar btw, if I were to start our test automation efforts from scratch now, I would go for Python/Selenium :) – alecxe Oct 10 '17 at 16:32
12

Protractor is Selenium, but then integrated with tooling and helper methods. If you know programming and Selenium it should be relative easy to pick up.

Protractor is an end-to-end test framework for Angular and AngularJS applications. Protractor is a Node.js program built on top of WebDriverJS. Protractor runs tests against your application running in a real browser, interacting with it as a user would.

Protractor uses JavaScript as language, NodeJS as programming environment and Jasmine as its test-runner-framework. Having some basic skills with these technologies will help.

Protractor uses WebDriverJS which is based on Selenium. So Protractor is not instead of Selenium, but it is an extra layer on top of Selenium to make testing AngularJS applications easier. Researching the WebDriverJS specification will also help. It simplifies the async nature of JavaScript and this will be probably be your greatest challenge when migrating from Java.

Read: What is the difference between synchronous and asynchronous code?

8

I somewhat followed the transition process as below:

  • Learned basic JavaScript, including basic constructs like
    variables, loops, conditions, functions.

  • Learned advanced JavaScript, particularly asynchronous nature, and its problems. Usage of callbacks and role of anonymous functions.

  • Once I grasped the basic concept of async execution, learned what Promises are and how they solve the async issues elegantly.

  • Learned the basic Protractor API, which further calls web driver methods and returns promises.

  • Learned an test framework Jasmine (or Mocha). With Mocha, you also have to learn an additional assertion library, Chai, whereas Jasmine has the built-in assertion library.

  • Learned an test runner Gulp to bundle and execute test suites.
  • Explored latest ESx versions and how they simplify/or solve the javaScript standard issues elegantly.

As the underlying selenium APIs(like findElement) are same across all language bindings of selenium, so it will not be a challenge at all for somebody coming from a different language binding.


Basic Setup and Execution

Setup

First Download and install Nodejs.

Use npm to install Protractor globally with:

npm install -g protractor

This will install two command line tools, protractor and webdriver-manager. Try running protractor --version to make sure it's working.

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

Now start up a server with:

webdriver-manager start

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. You can see information about the status of the server at http://localhost:4444/wd/hub.

Write a test Open a new command line or terminal window and create a clean folder for testing.

Protractor needs two files to run, a spec file and a configuration file.

Let's write a simple test that navigates to the todo list example in the AngularJS website and adds a new todo item to the list.

Copy the following into todo-spec.js:

describe('angularjs homepage todo list', function() {
  it('should add a todo', function() {
    browser.get('https://angularjs.org');

    element(by.model('todoList.todoText')).sendKeys('write first protractor test');
    element(by.css('[value="add"]')).click();

    var todoList = element.all(by.repeater('todo in todoList.todos'));
    expect(todoList.count()).toEqual(3);
    expect(todoList.get(2).getText()).toEqual('write first protractor test');

    // You wrote your first test, cross it off the list
    todoList.get(2).element(by.css('input')).click();
    var completedAmount = element.all(by.css('.done-true'));
    expect(completedAmount.count()).toEqual(2);
  });
});

The describe and it syntax is from the Jasmine framework. browser is a global created by Protractor, which is used for browser-level commands such as navigation with browser.get.

Configuration

Now create the configuration file. Copy the following into conf.js:

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['todo-spec.js']
};

This configuration tells Protractor where your test files (specs) are, and where to talk to your Selenium Server (seleniumAddress). It will use the defaults for all other configuration. Chrome is the default browser.

Run the test

Now run the test with:

protractor conf.js

You should see a Chrome browser window open up and navigate to the todo list in the AngularJS page, then close itself (this should be very fast!).

Learn more with the Tutorial.

Source: Protractor Documentation

Happy Learning friends..:)

0

Protractor and Selenium both are used to automate front end of web based applications. Generally most of the people are well aware of Selenium (Java and Python bindings) and afraid of choosing any other tool on top of Selenium. I will compare Selenium and Protractor in this post, which will help you to decide which tool is best suited for your requirement.

Official website of Selenium says that:

  • Selenium automates browser. It does not specify any specific technology based web applications. Selenium can be used to automate any technology based application which needs a browser.


Official website of Protractor says that:

  • Protractor is an end-to-end test framework for Angular and AngularJS applications. Protractor is designed specially for automating Angular applications. Although Protractor can be used for any non-angular application as well but the beauty of Protractor for Angular application will be missed. For detailed comparison, refer Protractor vs Selenium article.

protected by Community Jul 24 at 11:24

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.