How to Setup Protractor

How Tests Run in Protractor

Test | Server| Browser

Test Scripts---> Selenium Server---> Browser Driver--> Angular JS Applications

Test Scripts can also communicate directly with browsers, without selenium Server. For that  in your config file set directConnect:true

Communication between server and browser  happen through JSON wire protocol

Important Note
Before performing  any action. Protractor runs extra commands to check if the application has stabilized

Example, if you need to click an Element

element (by.css('button.myclass')).click();

This will result in 3 commands being sent to browser driver

/session/:sessionId/execute_async (this will check if all times outs and all asyncronous requests has been done and application is ready to test)
/session/:sessionId/element (command to find element is sent)
/session/:sessionId/element/:Id/click (finally to perform click action)


Install Protractor globally

npm install -g protractor

PS C:\> protractor --version
7.0.0

Check where protractor is installed

C:\Users\T460>where protractor
C:\Users\T460\AppData\Roaming\npm\protractor
C:\Users\T460\AppData\Roaming\npm\protractor.cmd

Above screenshot shows protractor is installed

Note: Now so far we have installed Protractor in our machine.
We need to setup Browser drivers as well

Run the following command

 webdriver-manager update

Following logs should come

PS C:\>  webdriver-manager update
[19:41:52] I/file_manager - creating folder C:\Users\T460\AppData\Roaming\npm\node_modules\protractor\node_modules\webdriver-manager\selenium
[19:41:52] I/config_source - curl -oC:\Users\T460\AppData\Roaming\npm\node_modules\protractor\node_modules\webdriver-manager\selenium\standalone-response.xml https://selenium-release.storage.googleapis.com/
[19:41:52] I/config_source - curl -oC:\Users\T460\AppData\Roaming\npm\node_modules\protractor\node_modules\webdriver-manager\selenium\chrome-response.xml https://chromedriver.storage.googleapis.com/
[19:41:52] I/config_source - curl -oC:\Users\T460\AppData\Roaming\npm\node_modules\protractor\node_modules\webdriver-manager\selenium\gecko-response.json https://api.github.com/repos/mozilla/geckodriver/releases
[19:41:53] I/downloader - curl -oC:\Users\T460\AppData\Roaming\npm\node_modules\protractor\node_modules\webdriver-manager\selenium/chromedriver_83.0.4103.39.zip https://chromedriver.storage.googleapis.com/83.0.4103.14/chromedriver_win32.zip
[19:41:53] I/downloader - curl -oC:\Users\T460\AppData\Roaming\npm\node_modules\protractor\node_modules\webdriver-manager\selenium/selenium-server-standalone-3.141.59.jar https://selenium-release.storage.googleapis.com/3.141/selenium-server-standalone-3.141.59.jar
[19:41:53] I/update - chromedriver: unzipping chromedriver_83.0.4103.39.zip
[19:41:55] I/downloader - curl -oC:\Users\T460\AppData\Roaming\npm\node_modules\protractor\node_modules\webdriver-manager\selenium/geckodriver-v0.26.0.zip https://github.com/mozilla/geckodriver/releases/download/v0.26.0/geckodriver-v0.26.0-win64.zip
[19:41:57] I/update - geckodriver: unzipping geckodriver-v0.26.0.zip


As you can see in these logs a new folder "webdriver-manager" would be created

Under Selenium folder you will see all Browser Drivers

Now we are ready to launch Protractor

Conf.js

Lets go to the location of conf.js (C:\Users\T460\AppData\Roaming\npm\node_modules\protractor\example)

Sample conf.js looks like below

// An example configuration file.
exports.config = {
  directConnect: true,

  // Capabilities to be passed to the webdriver instance.
  capabilities: {
    'browserName': 'chrome'
  },

  // Framework to use. Jasmine is recommended.
  framework: 'jasmine',

  // Spec patterns are relative to the current working directory when
  // protractor is called.
  specs: ['example_spec.js'],

  // Options to be passed to Jasmine.
  jasmineNodeOpts: {
    defaultTimeoutInterval: 30000
  }
};

Note: As you can see above we are using chrome and specs: example_spec.js (This is the sample test case)

Important: Here we don't need to launch Selenium Server to talk to browsers explicitly, we can direct connect with our browsers using config   directConnect: true,

Launching Protractor now

Under the location(C:\Users\T460\AppData\Roaming\npm\node_modules\protractor\example)

we will enter the command "protractor conf.js" (This will launch protractor with the given config in config.js)

PS C:\Users\T460\AppData\Roaming\npm\node_modules\protractor\example> protractor conf.js

You can see in above screenshot Chrome was launched and 3 specs were run successfully (here 3 specs means 3 test cases, these 3 specs were picked from example_spec.js)