Tuesday, December 12Be an Automation Engineer

An example using Protractor

Protractor is an end-to-end testing framework for AngularJS applications. It interacts with web application as a normal user. It is a wrapper around the WebdriverJs library of Selenium. WebdriverJs library internally uses selenium standalone server to interact with web applications and selenium standalone server in turn talk to individual browser drivers like ChromeDriver, GeckoDriver and SafariDriver etc.. to perform actions on the html elements in the browser.
Let’s start using Protractor.

1. How to Install?

Installation steps are simple and easy to follow. You can find our step by step installation process for protractor here.
Note: We have used jasmine as testing framework to run protractor tests. You can try ‘Mocha‘ or ‘Cucumber‘ also!!!!

2. Install editor on your choice:

You can install your preferred editor to write tests or you can download and install ‘Atom‘ if you are not sure.

3. Creating project structure:

In Windows command prompt:

Navigate to your preferred drive( Example: D: to navigate to D drive) and execute below command.

D:
mkdir ProtractorAutomation
cd ProtractorAutomation

Run below command to create subdirectories

mkdir specs

In Mac OS Terminal:

Navigate to your Documents Section

cd $User 
cd Documents

Execute below command to create project folder.
mkdir -p ./ProtractorAutomation
cd ProtractorAutomation

Run below command to create subdirectories
mkdir -p ./specs

Your Project Structure would be like below image.
protractorstructure

config.js and FirstSpec.js are explained below(Step 4).

4. How to write?

Open Atom and open your project in it. (File -> Open -> <choose your project folder>(protractor Automation))
Create a new file config.js under ‘ProtractorAutomation’ folder.

config.js

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  capabilities: {
    'browserName': 'chrome'
    },
  framework: 'jasmine',
  specs: ['./specs/FirstSpec.js'],
  jasmineNodeOpts: {
    defaultTimeoutInterval: 30000
  }
};

Config.js file contains configurable information like browserName, selenium server address, framework etc…
We can mention the browser against which we are testing the application.
1. For Chrome: ‘browserName’: ‘chrome’
2. For Firefox: ‘browserName’: ‘firefox’
Protractor also supports ‘Safari’, ‘Microsoft edge’, ‘Opera’ and ‘PhantomJs’. But for these browsers we need to download their browser drivers explicitly and configure them which is explained here.

Create a new FisrtSpec.js in ‘specs’ folder.

FirstSpec.js

//Suite in Jasmine
describe('angularjs homepage todo list', function() { 
  // Test in Jasmine
  it('should add a todo', function() { 
    // Entering application url in browser
    browser.get('https://angularjs.org');
    // Enter text under TODO input field
    element(by.model('todoList.todoText')).sendKeys('write first protractor test');
    // Clicks on 'Add' button
    element(by.css('[value="add"]')).click(); 
    // Getting all Todo lists displayed
    var todoList = element.all(by.repeater('todo in todoList.todos'));
    // Asserting the TODO's count as 3
    expect(todoList.count()).toEqual(3);
    //Verifying newly entered TODO is added
    expect(todoList.get(2).getText()).toEqual('write first protractor test');
  });
});


‘describe’ is like a suite and ‘it’ is a test in jasmine framework.

5. How to Run?

Run the ‘webdriver-manager start’ in Command Prompt/Terminal to start selenium server.

webdriver-manager start

Open a new Command prompt/Terminal window and run the below command in your project folder.

protractor config.js

You should see a Chrome browser window opens up and navigate to the todo list section in the AngularJS page, then close itself (this should be very fast!).
The test output should be 1 test, 2 assertions, 0 failures. Congratulations, you’ve run your first Protractor test!

%d bloggers like this: