PROTRACTOR: Setting up framework for automation

Read before you proceed further:
https://www.toolsqa.com/protractor/what-is-protractor/

  1. Install Nodejs (npm comes by default)
  2. Node -v : checks node version
  3. Npm -version : checks npm version
  4. Install protractor:
    npm install -g protractor (This might throw proxy error as below)
    Error: rollbackFailedOptional: verb npm-session
  5. Setup Proxy(Option 1:Command line):
    npm config list (This will list the current user config in C:/Users/{UserName}/.npmrc file)
    Ex: ; userconfig C:\Users\SESA550640\.npmrc

    npm config rm proxy
    npm config rm https-proxy
    npm config set proxy http://gateway.schneider.zscaler.net:80/
    npm config set https-proxy http://gateway.schneider.zscaler.net:80/
    npm config set strict-ssl = false
    Npm config set color=false
    npm config set registry https://artifactory-dces.schneider-electric.com/artifactory/api/npm/npm (This is Optional)

    Setup Proxy(Option 2: .npmrc File edit):
    Navigate to C:/Users/{UserName}
    Edit .npmrc file
    Replace the content with below:

    color=false
    strict-ssl=false
    proxy=http://gateway.schneider.zscaler.net:80/
    https-proxy=http://gateway.schneider.zscaler.net:80/
    //registry=https://artifactory-dces.schneider-electric.com/artifactory/api/npm/npm
    registry=https://registry.npmjs.org/
  6. WebDriver install
    webdriver-manager status ( Will list the status of WebDrivers)

7.webdriver-manager update
It will be installed under below Dir: C:\Users\SESA550640\AppData\Roaming\npm\node_modules\protractor\node_modules\ webdriver-manager

You might get below error due to proxy:
Error: connect ETIMEDOUT 172.217.163.80:443
[11:27:15] E/start – Selenium Standalone is not present. Install with webdriver-manager update –standalone

Fix:
webdriver-manager update –ignore_ssl –proxy ‘ http://gateway.schneider.zscaler.net:80/’

Now start up a server with:
webdriver-manager start

To verify visit: localhost:4444

To see the sessions :
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.

To begin with we can copy sample example_spec and conf.js from Protractor installation path. When we install protractor these sample files come along with it.
C:\Users\username\AppData\Roaming\npm\node_modules\protractor\example

or

Create a spec file: firstTest_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.

create Configuration file: conf.js:

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

Now run the test with ( Assuming that both the spec file and conf file are in same location, else provide the absolute path of spec file in conf file.
Ex:
specs: [‘Testcases//example.js’]
or
specs: [‘..//Testcases//JasmineFeatures_spec.js’]
protractor conf.js

If you get below error:
Unable to create new service: ChromeDriverService

Try updating chromedriver :

webdriver-manager update --chromedriver

If you using Visual Studio Code then I recommend installing below plugins:
1- Typescript hero
2- javascript
3- Protractor Test Runner (Enables to run .ts file directly)
4- Since protractor comes with Jasmine out of the box, but if it is installed globally, then VS Code intellisense (code completion) might not work properly. Run below code to enable it.
npm i @types/jasmine
5- Gauge ( for writing better reusable code)
6- Cordova ( AI code completion )

Leave a Reply