What is covered in this tutorial?

Master end-to-end testing for Angular applications using Protractor, Jasmine, and JavaScript. Learn to build a robust automation framework from scratch.

Introduction

🎯 Quick Answer

Protractor is an end-to-end test framework specifically designed for Angular and AngularJS applications, though it can also test non-Angular sites. It combines WebDriverJS with Jasmine to provide a powerful environment for simulating user interactions in a real browser. To set up a framework, you need to install Node.js, initialize a package.json, install protractor and jasmine, and create a conf.js file to define your test configurations.

While the industry is shifting towards tools like Playwright and Cypress, Protractor remains a significant part of many legacy Angular projects. Understanding how to build and maintain a Protractor framework is a valuable skill for any automation engineer working with enterprise Angular applications.

📖 Key Definitions

Protractor: A wrapper around WebDriverJS that provides Angular-specific locator strategies like by.model and by.binding.
Jasmine: A behavior-driven development (BDD) framework for testing JavaScript code, providing the describe, it, and expect syntax.
WebDriver-Manager: A helper tool that easily gets an instance of a Selenium Server running and downloads the necessary browser drivers.
Page Object Model (POM): A design pattern that creates an object repository for web elements, enhancing test maintenance and reducing code duplication.

Building the Framework

Let's go through the step-by-step process of creating an automation framework using Protractor, Jasmine, and JavaScript.

🚀 Step-by-Step Implementation

Prerequisites

Ensure you have Node.js and Visual Studio Code installed on your machine.

Initialize Project

Create a folder named protractor-jasmine-javascript and run npm init -y in your terminal to create a package.json.

Install Dependencies

Run the following command to install the core libraries:

Code Snippet

npm install --save jasmine protractor protractor-beautiful-reporter

Configure Protractor

Create a conf.js file in the root directory. This file tells Protractor where your tests are and which browser to use.

Code Snippet

var HtmlReporter = require('protractor-beautiful-reporter');

exports.config = {
    directConnect: true,
    capabilities: {
        'browserName': 'chrome'
    },
    framework: 'jasmine2',
    specs: ['test-suites/*.spec.js'],
    onPrepare: () => {
        jasmine.getEnv().addReporter(new HtmlReporter({
            baseDirectory: 'test-results'
        }).getJasmine2Reporter());
    }
};

Update Webdriver

Run npx webdriver-manager update to download the latest Chrome and Gecko drivers.

Creating a Page Object

Create a folder named page-objects. Inside it, create angularjs.helper.js:

Code Snippet

var angularjsHelper = function () {
    var nameInput = element(by.model('yourName'));
    var greeting = element(by.binding('yourName'));

    this.get = async () => {
        await browser.get('https://angularjs.org');
    };

    this.setName = async (name) => {
        await nameInput.sendKeys(name);
    };

    this.getGreeting = async () => {
        return await greeting.getText();
    };
};

module.exports = angularjsHelper;

Creating a Test Suite

Create a folder named test-suites. Inside it, create enter-name.spec.js:

Code Snippet

var EnterNamePage = require('../../page-objects/angular-js/angularjs.helper.js');

describe('AngularJS Website Test: ', function () {
	it('As a user, I should be able to enter a Name', function () {
		var enterNamePage = new EnterNamePage();
		enterNamePage.get();
		enterNamePage.setName('QA Loop');
		expect(enterNamePage.getGreeting()).toEqual('Hello Code with MMAK!');
	});
});

Common Errors & Best Practices

⚠️ Common Errors & Pitfalls

WebDriver-Manager Out of Date
If your Chrome version updates, Protractor might fail to start. Run webdriver-manager update to fix this.
Async/Await Mismatch
Protractor uses a promise manager by default, but modern JavaScript uses async/await. Mixing them without disabling the control flow can cause race conditions.
Angular Not Found
If testing a non-Angular site, you must set browser.waitForAngularEnabled(false); or the test will timeout.

✅ Best Practices

✔
Always use Page Objects to separate your test logic from your element locators.
✔
Use DirectConnect in your config to run tests directly against Chrome/Firefox without needing a standalone Selenium server.
✔
Leverage Protractor-Beautiful-Reporter for visual execution summaries that include screenshots of failures.
✔
Disable the Control Flow in your config (SELENIUM_PROMISE_MANAGER: false) and use native async/await for better stability.

Frequently Asked Questions

Is Protractor deprecated?

The Angular team announced the end of development for Protractor in 2022. While it still works, new projects should consider Playwright or Cypress.

Can I test non-Angular sites with Protractor?

Yes, by setting browser.waitForAngularEnabled(false), Protractor behaves like standard WebDriverJS.

How do I run tests in Headless mode?

Add --headless to the chromeOptions in your conf.js file.

Conclusion

Protractor remains a powerful tool for Angular testing due to its deep integration with the framework's internals. By following the Page Object Model and modern JavaScript practices, you can build a reliable test suite that ensures your Angular applications perform as expected.

📝 Summary & Key Takeaways

This guide detailed the setup of a test automation framework using Protractor, Jasmine, and JavaScript. We covered the installation of dependencies, the creation of a configuration file, and the implementation of the Page Object Model to ensure maintainable code. Key takeaways include the importance of keeping browser drivers updated, the necessity of handling asynchronous operations correctly with async/await, and the utility of specialized reporters for debugging. While the industry is evolving towards newer tools, mastering Protractor provides a solid foundation for understanding end-to-end testing principles in the Angular ecosystem.