Sign up for the Testim Dev Kit beta. Sign up now

Protractor Testing Tutorial: A Helpful Intro to E2E Testing

Protractor is a test framework for web applications. Even though it's primary use is for performing end-to-end testing in Angular…

By Testim,

Protractor is a test framework for web applications. Even though it’s primary use is for performing end-to-end testing in Angular and AngularJS applications, you can also use it for regular, non-Angular websites. Protractor testing interacts with your application just like a real user would because it runs tests using an actual web browser.

Today’s post is an introduction to both Protractor and the concept of end-to-end (E2E) testing. We begin by offering a quick definition of Protractor. Then, we cover E2E testing. What is this type of testing about and why does it matter?

Then we’ll get to the motivations behind using Protractor. Since we already have tools like Selenium, why learn to use yet another framework? This question will be answered in this section.

And finally, we see some action. You’ll see how to install Protractor, write, and run a minimal test case.

Let’s begin!

Protractor: A Quick Definition

Protractor is an open-source testing framework you can use to perform end-to-end testing on Angular apps. This framework acts like a combination of different solutions. It can integrate several pieces of technology, such as NodeJS, Jasmine, Selenium, Mocha, and many more. Besides end-to-end testing for Angular, it can also be used for creating regression tests for non-Angular web applications. Protractor tests an app just like a human user would because it uses an actual browser to run the tests.

End To End Testing: What it is and Why it Matters

End-to-end testing is a testing technique that exercises an application in its entirety, verifying whether its flow, from beginning to end, behaves as expected. Unlike, say, unit testing, that replaces external concerns—such as the database, network, or the file system—with fakes, E2E testing is supposed to test if the integrations with such systems work as they should.

Here lies the importance of E2E testing: it exercises the application in the closest possible way to how a real user experiences it.

Why Use Protractor?

JavaScript is a language widely used in web applications. And that makes sense since it has virtually no competitor. JavaScript started as an amazingly simple scripting language. It was never meant to be a “real” language, used in complex applications. But today, JavaScript is undoubtedly a real language, and it sure is used in serious, complex applications. The complexity presented by modern web applications got to such a high degree that it’s currently unfeasible to test an application using only a manual approach. That’s why software organizations big and small, strive to adopt automated testing, and put it to work. This is true for every programming language, framework, and platform. Angular isn’t an exception; the apps you write using the framework also need to be tested.

Among all types of automated software testing, one that’s especially useful for web applications is end-to-end testing, since it’s closer to the real user experience than most other types of testing. Selenium WebDriver is a popular web browser automation tool that is often used for end-to-end testing. So, why not just use Selenium?

Protractor has a number of advantages over using pure Selenium. First, since it’s a Node app, Protractor benefits from the huge number of packages available through Node.

One of the biggest advantages of Protractor is automatic waiting. With Protractor, there’s no need to add sleeps and waits to your tests when you need to wait for elements on a page. Protractor executes the next step as soon as a page finishes its pending tasks. As a consequence, Protractor makes your tests quicker since it reduces sleep and wait times.

Installing Protractor

Protractor is installed via npm, which means you need to have Node installed. So start by installing Node if you don’t already have it.

After Node is successfully installed, you’ll be ready to use npm to install Protractor:

npm install -g protractor

As soon as the installation finishes, type the following command to verify Protractor’s version:

protractor --version

Start Testing With Protractor

The Configuration file does exactly what its name suggests: it configures Protractor. It teaches it where the test files are located, and which framework or web browser to use, among other things. If you don’t define a given configuration in the configuration file, then Protractor will use default values for it.

The Spec file, on the other hand, is the actual test file that will contain the assertions we want to verify.

Creating a Configuration File

Let’s write our first Protractor test case. We’re going to start with the configuration file. Open your favorite text editor, create a new file, and paste the following content on it:

exports.config = {
framework: 'jasmine',
capabilities: {
browserName: 'chrome',
},
specs: ['myFirstTestSpec.js']
};

Save the file with the name “conf.js.”

We’re now doing a quick overview of the file above, so you can understand every one of the parameters it contains. The first option is “framework,” with the value “jasmine.” Jasmine is a popular testing framework for JavaScript. Then we have the “capabilities” section. In it, we define the browser name. In our case, it’s Chrome. Finally, we’ve got to the “specs” section, where we indicate the path to the spec file, which we still haven’t taken care of. Let’s fix that.

Creating Our First Spec File

Again, create a blank text file using your favorite text editor. Then, paste the following content on it.

describe('Protractor Testing', function() {
it('to check the page title', function() {
browser.ignoreSynchronization = true;
browser.get('https://example.com/');
browser.driver.getTitle().then(function(pageTitle) {
expect(pageTitle).toEqual('Example Domain');
});
});
});

Save the file with the name “myFirstTestSpec.js.” Let’s now examine the content above, the same way we did with the configuration file.

As you may notice, there is this “browser” thing that keeps showing up. This is actually a global Protractor creates to handle browser-level commands. You’ll also see the words “describe” and “it” showing up. These belong to Jasmine’s syntax. “Describe” will contain the whole flow of your test, while “it” will contain a specific step or scenario.

We set “ignoreSynchronization” to true because the website our test is targeting isn’t an Angular application, but a regular website.

What remains of the test should be easy to follow; we use the “browser” global to hit the target URL and retrieve the value of its title. Finally, we have the assertion that verifies whether the obtained page title is equal to the expected one.

Running Our Test

To run a Protractor test, just type the following command in your terminal window:

protractor conf.js

If everything goes well, that’s what will happen. A Chrome window will open, with the “example.com” website opened. In your terminal, you should see an output like in the following image:

As you can see, the output message reads: “1 spec, 0 failures” when you run the code. That means our code had 1 ‘it’ blocks, which executed with 0 failures.

There is a Time For Every Type of Testing

Many software professionals seem to think that unit testing is the only type of automated testing required for a successful, high-quality application. That couldn’t be further from the truth.

Sure, unit testing is indeed very important and can be beneficial for most applications that adopt it. But here’s the thing: despite all the benefits it provides, unit testing is less of a testing technique and more of a developer confidence booster. They know they have a safety net in the form of a unit testing suite; that fact empowers them to change and refactor their code, which leads to higher quality.

However, unit testing is the form of automated testing that’s most far away from representing a real usage scenario. As such, it might fail to detect issues that can be detected through other types of testing. End-to-end testing is such a way of testing. By exercising the application in its entirety, E2E testing can detect problems that would pass unnoticed through other types of testing that only focus on specific layers of the application.

In today’s post, we’ve presented Protractor, a popular tool for performing E2E testing, on both Angular and “non-Angular” web applications.

This post was written by Carlos Schults. Carlos is a .NET software developer with experience in both desktop and web development, and he’s now trying his hand at mobile. He has a passion for writing clean and concise code, and he’s interested in practices that help you improve app health, such as code review, automated testing, and continuous build.

Testim's latest articles, right in your inbox.

From our latest feature releases, to the way it impacts the businesses of our clients, follow the evolution of our product

Blog Subscribe