I followed the below transition process myself successfully:
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..:)
