Using the Protractor Automation Tool to test AngularJS applications
Are you developing an AngularJS application? Are you confused to use Protractor to test for your application or not? If yes, explore this article and know what Protractor is about and the usage of Protractor to test your AngularJS applications.
Talking about Protractor:
Google has released an end-to-end framework for AngularJS applications called Protractor, which works as a solution integrator combining powerful tools and technologies such as NodeJs, Selenium, WebDriver, Jasmine, Cucumber, and Mocha. Protractor has a bunch of customizations from Selenium to easily create tests for AngularJS applications. With Protractor, a developer can write automated tests that run inside an actual browser, against an existing website. Thus, a developer can easily test whether code, end-to-end, is working as expected or not. The added benefit of using Protractor is that it understands AngularJS and is optimized for it.
“Unit tests are the first line of defense for catching bugs, but sometimes issues come up with integration between components which can’t be captured in an unit test. End-to-end tests are made to find these problems” -Angular Team
Deep diving into Protractor:
Protractor is a framework for automation of functional tests. It means, it’s intention is not to be the only way to test an AngularJS application, but also to cover the acceptance criteria required by the user, basically, End-to-End.
It runs on top of the Selenium, and provides all the benefits and advantages from Selenium. In addition, it also provides customiz able features to test AngularJS applications. It is also possible to use some drivers which implement web drivers wired protocols like ChromeDriver and GhostDriver, as protractor runs on top of the Selenium. In the case of ChromeDriver a developer can run tests without the Selenium server. However, to run GhostDriver one has to use PhantomJS which uses GhostDriver to run tests in Headless mode.
In the past, Protractor’s documentation has been poor and risky due to Protractor’s constant evolution. However, in recent years, the community has collaborated a lot and Protractor’s documentation has been updated.
Salient Features of Protractor:
⦁ It is built on the top of Selenium server.
⦁ Introduced new simple syntaxes to write tests.
⦁ The developer can take advantage of Selenium grid to run multiple browsers.
⦁ A developer can use Jasmine or Mocha to write test suites.
Protractor is built on top of Selenium WebDriver, so it contains every feature that is available in the Selenium WebDriver. Also, Protractor provides some new strategies and functions which are very useful to automate AngularJS applications.
Protractor Installation:
Download and Install NodeJS. After installation make sure that its path is configured correctly, so that command execution can find Node.
Open the Command Prompt and type the following command to install
Protractor globally. npm install –g protractor
Install Protractor Locally
A developer can install Protractor locally in their project directory. Go to the project directory and type the following command in command prompt.
npm install protractor
Now, Verify Installation
To verify installation, type the command
Protractor –version
If Protractor is installed successfully then the system will display the installed version. Otherwise, you will have to recheck the installation.
Let’s see Protractor’s basic example program:
As we know a Protractor needs two files i.e., “spec file” where spec file is test file and “conf file” where conf file is a configuration file.
Below is the sample Test file named “testspec.js”.
describe(‘angularjs homepage’, function() {
it(‘should have a title’, function() {
browser.get(‘http://angularjs.org/’);
expect(browser.getTitle()).toContain(‘AngularJS’);
});
});
The above simple test will navigate to an AngularJS home page and checks for its page title.
Below is the sample config file named as “conf.js”.
exports.config = {
//The address of a running selenium server.
seleniumAddress: ‘http://localhost:4444/wd/hub’,
//Here we specify the name of the specs files.
specs: [‘testspec.js’]
How to run?
Go to the command prompt, type “protractor conf.js”, it will start executing your test in chrome browser by default.
Final word:
Protractor allows a developer to test his AngularJS applications in a consistent and automated way. Today we’re able to make informed statements because of the overall state and soundness of AngularJS applications.