Protractor Tutorial

Protractor is an end-to-end testing framework; developed by Google Developers to support angular applications. Though it was initially developed to support Angular and AngularJS applications now, it supports both angular and Non-Angular applications.

What is Protractor?

Protractor is a widely used automation testing framework used to perform end-to-end testing of Angular web applications. You can utilize the Protractor framework to perform automated browser testing on real browsers by simulating all the browser actions just like a real user would.

Protractor is based on Node.js, a JavaScript framework, and works with it to find web elements in Angular based web applications. Protractor also utilizes Selenium WebDriver, which allows you to automate browser actions. Apart from the Selenium locators, with Protractor, you can also access Angular specific locators.

Why Use Protractor For End-to-End Angular Testing?

There are several reasons for using Protractor for Angular testing, given below are some of the most important ones:

Angular Specific Locators

Angular applications have certain HTML attributes such as ng-model, ng repeater, etc., which are not a part of Selenium locators. This is why you can not identify these web elements with Selenium. Protractor provides locator strategies specifically for angular web elements, making it the right choice to use it for Angular Testing and allows you to perform angular testing on the without any setup.

End-to-End Testing

Unlike other Selenium test automation frameworks, which are only used for unit testing, Protractor can be used to perform End to End testing. You can test the complete flow of a web application right from the beginning to the end.

Flow is checked for the web application in both 'stage' as well as in production, to make sure the web applications work as intended when it is integrated with external environments. End-to-End testing helps ensure that the web application's behavior flow is as intended by performing a complete and thorough inspection of the web application from start to finish.

Automatic Waiting

With Protractor, you don't have to worry about adding wait() or sleep() in your Selenium test scripts for Angular testing. In Protractor, the next task in your test scripts automatically starts when the previous task has been completed. This way, you don't have to wait for the page to load.

Support For Selenium Grid

Protractor supports Selenium grid, allowing you to perform parallel testing on multiple browser instances simultaneously. Utilizing a grid can save a lot of time spent in running test scripts.

Simple Syntax

With Protractor, you can use the simple syntax for writing test cases for angular testing. You don't have to bother with complex code, making it easier for any newbie automation tester to pick it up for automated browser testing.

Support For BDD Frameworks

You also get support for Behaviour-Driven Development testing frameworks with Protractor. With Protractor, you can perform angular testing by utilizing BDD frameworks such as Jasmine and Mocha.

Keep reading to learn more about Protractor, or use the chapter links to jump around this Protractor Tutorial.

Cross Browser Testing With Protractor & Selenium

Do you know Google strongly recommends Protractor & Selenium for end-to-end automation for AngularJS? Wondering why? Well, because both are maintained and owned by Google, and they build a JavaScript test automation framework to handle the AngularJS component in a better manner.

In this chapter, we will be looking into details about what we mean by JavaScript test automation framework? Why Protractor is a good fit for test automation? How did it help to achieve cross browser test automation with different browsers?

Before we execute automated cross browser testing with Protractor and Selenium - let's take a look at what makes Protractor and Selenium a good fit for your automation test scripts.

Key Features of Protractor & Selenium :

• Protractor is developed as a wrapper build around Selenium WebDriver JS and Selenium Server. All key features of Selenium WebDriver JS and additional implementation helps to do better automation support and less maintenance when compared with Selenium.
• Protractor Selenium offers new locator strategies on top of the native locator, which actually helps to locate an element in DOM easily.
• by.model, by.binding, by.repeater, etc.,
• Protractor Selenium supports page object design patterns, which helps in writing clean and readable code. Writing clean code is imperative for Automation testers.
• Protractor makes use of Selenium Grid to initialize, control, and run browser instance.
• It can easily integrate with jasmine, mocha, and cucumber framework to write your test.

Advantage of Protractor when combined with Selenium:

• Excellent speed compares with other tools or libraries.
• Support cross browser parallel testing through multiple browsers.
• No need to work on synchronization strategy for, e.g., waits like implicit, explicit, and sleep, etc., Protractor has in build capabilities and intelligence to connect with Angular JS framework. And it knows when Angular has finished rendering the DOM for, e.g., page loading wait, synchronization.
• Angular-specific locator support.

Using Selenium Locators In Protractor

While testing your website's functionality, especially web elements such as radio buttons, text boxes, drop-down, etc., you need to make sure that you can access these elements. Selenium locators serve this exact purpose; by using this command, we can identify these web elements, DOM (Document Object Model), to perform Selenium test automation through our scripts.

These Selenium locators are vital for scripting as if they're wrong, your automation scripts won't work. Thus your Selenium test automation efforts rely on these Selenium locators in any testing framework. Protractor, an Angular JS framework, has many Selenium locators that can be identified by using a specific By method during runtime.

In this chapter, we will discuss the Selenium locators in Protractor in-depth and how we can use locators to interact with the application and fetch the current running state.

Now that you know, Selenium locators in protractor are super important for running your test automation scripts; you must be interested in learning more about them.

Handling Mouse And Keyboard Events

While performing automated browser testing, you often have to deal with elements that reveal only after you hover on the menu or click on them. In such cases, you can opt for using the action class for keyboard and mouse actions in Selenium Protractor. With the action class, you can automate the representation of mouse activities, such as mouse clicking, mouse hovering, etc.

The Selenium Protractor framework has in-built capabilities to manage various forms of keyboard and mouse events. This handling of keyboard and mouse events is achieved using the Advanced User Interfaces API. These are web-based API for emulating complex movements performed by the user.

In this chapter, we'll look at various aspects of how to handle mouse and keyboard actions in the Selenium Protractor framework. Along with a few examples of the frequently used keyboard and mouse actions in Selenium Protractor.

Ready to explore how you can simulate mouse and keyboard behavior in a browser using various functions in the Selenium Protractor framework?

Handling Multiple Windows

While performing automated browser testing, at times, you might end up in situations where you would need to handle multiple windows in Selenium. In this chapter, we'll show you how to handle multiple windows in Selenium with Protractor.

Before we handle multiple windows in Selenium Protractor, we need to know how to identify different browser windows and tabs. It’s pretty straightforward; every browser or tab instance has a Global Unique Identifier(GUID), making it pretty easy to access them. GUID identifiers help to handle multiple windows in Selenium Protractor; additionally, Protractor provides useful methods that can be used to handle multiple windows in Selenium Protractor for automated browser testing. So, let’s have a look at these methods.

getWindowHandle()

The getWindowHandle() function in the Protractor returns the string GUID for the current active window in the browser. This is invoked on the browser object as – browser.getWindowHandle();

getWindowHandles()

The getWindowHandles() function returns the GUID’s for all the windows and tabs opened on the active browser windows. This is called via the framework as browser.getWindowHandles();

switchTo()

switchTo() method enables an easy way to handle multiple windows in Selenium Protractor, tabs and switch between the two. It shifts the control from the current window to the target windows. The GUID is passed as an argument to indicate the Protractor about the target window or tabs. i.e. browser.switchTo().window(guid);

Handling Timeouts With Selenium

Often, while performing Selenium test automation, you’ll come across certain scenarios when your test fails because the web page or the web element takes some time to load completely. In such scenarios, the best approach is to wait for the page or the web elements to load completely to avoid any timeout errors. These errors can be easily resolved if you know how to handle timeouts in Protractor with Selenium, as they help to set an interval of time before the next action is carried out.

Handling iFrames And Frames in Selenium

Do you know Frames are used to split the content into horizontal and vertical splits, while iframes are used to embed content on a web page? While performing Selenium test automation, you'd often come across scenarios where you'd need to handle frames or iframes. In this chapter, we'll look at how to handle frames and iframes in Selenium with Protractor.

Before we dig deep in how to handle frames or iframes in Selenium - let's first discuss the major differences between frames and iFrames:

• The frame requires the presence of a frameset, but iframes do not need a frameset.
• The frames do not contain or support nested frames (frames within frames), but iFrames do contain nested iFrames.
• The regulation of height and width of the frame is complicated as opposed to iFrame.
• The placing of frames is a bit challenging compared to iFrames.
• The frames are not allowed in HTML5, but it allows iFrames.

Handling Alerts And Popups

There are times in the life-cycle of various web applications where you need to interrupt a message to the user. These may be warnings, alerts, or information. Browsers have native dialog boxes, one that you can show to alert users to these important messages using JavaScript.

Suppose you fill in an application form and accidentally miss out on a couple of details. How do you know this unless there is a notification alert or a pop-up window? Or If we test a web application using Selenium JavaScript and try logging in to a web site, but do not add an email ID or password to the required fields, the program sends an alert. This is precisely what we will be covering in this chapter. We will be performing Selenium test automation using Protractor to handle alerts and pop-ups.

Now that you know, alerts and pop-up are widely used to issue warnings to the user or asking permission from them; you must be interested in learning how to handle alerts and popups in Selenium.

Debugging Protractor Tests

We all know that end to end testing of web applications is pivotal to ensure quality. When you encounter issues while testing, the best approach is step by step debugging the code; debugging can be a great way to ensure that your Selenium automation tests run as intended and there are no false positives or negatives. So in this chapter, we'll cover how to debug Protractor tests.

Before we cover how to debug Protractor Tests in Selenium - let's first cover the common problems that we face while debugging Protractor Tests.

What Are The Problems To Debug Protractor Tests?

• Testing of a web application is tricky due to its dependency on the entire system.
• You’ll require different WebDrivers for various operating systems and browsers for performing cross browser testing.
• The Selenium test automation scenarios follow a sequence of actions. The output of the current test cases serves as the input of the further test cases, and hence there is a dependency.
• The long error messages encountered while performing automation tests might be tough to comprehend.
• It becomes difficult to distinguish between errors and issues related to browsers or test scenario processes.