How to create a test framework for AngularJS applications using Protractor (Jasmine)

AngularJS application framework is gaining in the market because it extends the functionality of HTML and can be used to load applications quickly. It is mainly used for creating dynamic, mostly SPA pages in web applications. Due to growth in dynamic applications, QA’s are somewhere lagging in developing the test framework for Javascript or dynamic applications because of QA’s need to add longer waits in their test cases to take care of synchronization with dynamic web pages.

But now, protractors can automatically run the next test step in your test framework when the webpage finishes the running task so, QA’s don’t have to worry about waiting or adding waits for tests and webpage to sync.

• Protractor is an open source test automation framework for JavaScript application which uses binding and ngmodel directives.
• The protractor is a javascript library that works as a wrapper of Selenium WebDriver.

• Protractor is used in end to end test testing which runs on Node.js i.e. You need to have Node.js installed in the machine because it uses NPM to download and install which comes with Node.js.
• Protractor works in the Jasmine framework that uses native events and browser specific drivers to sync.

Why one more tool when we have selenium?

We can support selenium as well but need to take care of dynamic web elements or I would say smart xpath. Due to sync issues, it is difficult to handle web-elements using selenium because JS extends HTML attributes with Directives, and binds data to HTML and dynamically update the page as the user interacts with an application which selenium does not support.

Requirements

• Java/JDK.
• NodeJS v8.11.3 or greater from https://nodejs.org/en/download/
• NPM 5.6.0
• Protractor using NPM
• Tern plugin using Eclipse
• Eclipse/Visual Studio Code

Installation of Protractor package

• Open the command prompt and follow the below command for global installation. The Protractor package and webdriver tools will automatically install in the machine.

  npm install -g protractor

• WebDriver manager is a tool that gets the running server (selenium) instance.
• To update the webdriver tools, follow the below command after installation of the protractor package. There might be some binaries not updated with new versions. This will download the new version of the standalone server, chrome, firefox, and other drivers.

  webdriver-manager update

• Now, we need to start the selenium webdriver server with the following command. Make sure that selenium server is running while executing test cases as shown in the screenshot below otherwise it won’t run the test cases.

  webdriver-manager start

Steps to add dependencies in Eclipse

• Open the Eclipse workbench, go to help > Eclipse Marketplace.
• Find the Tern, then you will get Tern Eclipse IDE and install it in your marketplace.

• We need to configure our project into the Tern Project. Right click on the project, go to Configure and then select ‘Convert to Tern project’.
• You will get to see the ‘Properties for Protractor’ window where you need to add all the required dependencies like AngularJS, Browser, Browser Extension, Protractor and other default selected option like Jasmine, etc.

• Click on the ‘Apply and Close’ button, this will add all the required dependencies in your Tern project.

How to write test cases using jasmine framework in Eclipse?

• Right click on your project name and create two files as spec.js and conf.js
  • Spec.js file is a specification file consists of a test method which you need to run on your webpage.
  • Conf.js is a configuration file on which you need to configure your spec.js file and other capabilities.
• In spec.js file, write the following test cases as:

• In conf.js file, write the following configuration as:

• To run the conf.js configuration file, follow the command on the project,

  Protractor conf.js

• This will run the conf.js file that consists of spec.js test file which starts the browser from capabilities configuration.
• You can export the HTML report using an addReporter function from the Jasmine framework in the configuration file. Also, we can use the headless test run using the ChromeOptions in the configuration file.

Can we use the different tools instead of Eclipse?

• Yes, we can use the Visual Studio Code. If you see the performance between eclipse and VSC then, I would suggest the VSC code.
• You just need to configure or add the same dependencies in the package.json file of the project.
  • Go to your project folder in cmd and hit the npm init command. You will get to see the package.json file in your project folder.
  • You need to add the dependencies in the same JSON format i.e. Protractor and Jasmine.

    “dependencies”: {
    “protractor”: “^5.3.2”,
    “Jasmine”: “^3.1.0”
    },

  • Go to the VSC terminal and run npm install command, then you can see the npm modules in the project folder.
  • Then, follow the same protractor setup procedure explained above with eclipse.
  • Write the spec.js and conf.js file the same as above and run the protractor conf.js command from the integrated terminal. You will see the console in the VSC terminal itself.

References

http://blog.empeccableweb.com/wp/testing/protractor/
https://www.protractortest.org/#/style-guide
https://www.protractortest.org/#/api-overview

🔊 Listen