Get Started with Protractor Testing for AngularJS

How do you test your AngularJS applications? With Protractor. Protractor is an end-to-end testing framework for AngularJS applications. This getting started guide is for new software developers in test who are interested in learning about Protractor testing. By following this getting started guide, you’ll understand how to build a firm foundation and learn fundamental Protractor testing for AngularJS applications.

To build better software tests, you’ll need a solid base of the technologies behind your application, which teaches you the principles that will be essential when coding, executing and debugging your tests. Let’s focus on the correct learning path for Protractor testing. This is the age of JavaScript (JS) applications and frameworks. JavaScript is the foundation and critical learning block needed to be successful with Protractor testing, and what follows is your roadmap to learn JavaScript, NodeJS, and AngularJS for Protractor testing.

JavaScript is a very significant piece of the front-end development stack. How much JavaScript knowledge do you need to have before jumping head-first into frameworks like NodeJS, AngularJS, and Protractor? All of them are based on JavaScript, so you need to have a solid grasp of pure JavaScript before jumping to any of these frameworks or libraries. Just note that during the journey of learning AngularJS and NodeJS that they are two different things. AngularJS is for front-end development, and NodeJS is for server-side. I suggest you start learning core JavaScript before jumping into the other frameworks and libraries.

Dedicate the time to learn and master Javascript functions, events, error handling, errors and debugging before starting the Protractor testing journey. NodeJS is for server-side, and I only suggest taking a quick crash course.

AngularJS has become the go-to JavaScript framework for enterprises and large companies’ front-end development. The baked-in directives are the most important and complex component in AngularJS and Protractor testing, which raises the importance of building directive strategies for testing, from Developer to Automation Engineer collaboration.

Protractor supports AngularJS directive strategies, which allows you to test AngularJS applications without much effort. Protractor is a Node program, which is a wrapper around WebDriverJS. I recommend skimming through the WebDriverJS Users Guide, Protractor API and Protractor Style Guide before writing any tests. Protractor uses Jasmine or Mocha for its test syntax.

Jasmine and Mocha are very similar, behavior-driven development frameworks for testing JavaScript code. What is the point of learning all of these languages and frameworks? At the end of the day, end-to-end tests fail and will be tough to debug. It will also be difficult to locate root causes. Without a core foundation of Javascript, NodeJS and AngularJS would make debugging tough.

How Protractor works and interacts with AngularJS (workflow)

Spec and Configuration Files - Protractor needs two files to run, the test or spec file, and the configuration file. The spec file (test) is written using the syntax of the test framework you choose, such as Jasmine or Mocha along with Protractor API. The configuration file is simple. It tells Protractor how to configure the testing environment - Selenium server, which tests to run, browsers and more. AngularJS directives - When searching for elements in the AngularJS app using Protractor, taking advantage of AngularJS directives will save you hours of pain and frustration. Avoid using CSS selectors like IDs and Classes as a last resort when writing Protractor tests. You heard me! This is a best practice of Protractor development. Avoid using CSS selectors. Mocking - One of the main reasons for mocking is to prevent flaky tests. Everyone executing end-to-end tests comes to this crossroad. We can mock some or all of our services, HTTP backend, module and more. Promises - All Protractor methods are asynchronous and return promises. Check out promisejs.org to learn more about asynchronous JavaScript functions. Control Flow - WebDriverJS maintains a queue of pending promises, called the control flow, to keep execution organized. elementExplorer and Elementor - used for debugging or first writing a Protractor test. You can enter a protractor locator or expression and elementExplorer/ elementor will test it against a live protractor instance. Elementor is considered an improved element finder for Protractor.

This article isn’t a complete list of resources — just a starting point for new software developers in tests who are interested in learning about Protractor testing. Keeping up-to-date on front-end technologies can be exhausting, but with a core JavaScript foundation, you will be fine.

Greg Sypolt (@gregsypolt) is a senior engineer at Gannett and co-founder of Quality Element. He is a passionate automation engineer seeking to optimize software development quality, while coaching team members on how to write great automation scripts and helping the testing community become better testers. Greg has spent most of his career working on software quality — concentrating on web browsers, APIs, and mobile. For the past five years, he has focused on the creation and deployment of automated test strategies, frameworks, tools and platforms.