Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Getting Started With Protractor

3:25 Angular 1.x lesson by

No need for protractor.getInstance()

In previous versions of Protractor, you needed to grab protractor.getInstance() and use its methods. Now Protractor has the handy browser helper that makes this much nicer. See the below for updated source!

Protractor is an end-to-end testing library for AngularJS. This video lesson will walk through getting Protractor installed and writing your first test.

Get the Code Now
click to level up

No need for protractor.getInstance()

In previous versions of Protractor, you needed to grab protractor.getInstance() and use its methods. Now Protractor has the handy browser helper that makes this much nicer. See the below for updated source!

egghead.io comment guidelines

Avatar
egghead.io

Protractor is an end-to-end testing library for AngularJS. This video lesson will walk through getting Protractor installed and writing your first test.

Avatar
Edgar

Was there a previous tutorial where them built out all the folders in this tutorial?

the index.html references app.css but I don't see it in the code below the video.

Avatar
Shawn

Agreed. The directory structure is confusing and unexplained.

In reply to Edgar
Avatar
Evan Gillogley

This tutorial is outdated. You don't need to .getInstance() and use browser.get('/') instead. I had to do some Googling.

Avatar
Brian

It looks very similar to the directory structure generated by phpstorm/webstorm for an Angular project. AKA angular-seed.

Also I agree that the first video was quite confusing - where'd all those files come from. I wish they'd mentioned they used angular-seed (if indeed they did use it) right from the start.

In reply to Shawn
Avatar
Raphi

How does Protractor know where index.html is?

Avatar
Ajaypal Cheema

Would like to have the source files being used in the video, with all those directories...

Avatar
Paul

Evan, Thank you. Paul

In reply to Evan Gillogley
Avatar
Gelareh

he speaks too fast and unclearly it is too hard to follow him

Avatar
Raymond

Protractor hits the localhost:3333 endpoint, which is defined in the baseUrl. In the video he opens a new terminal window, navigates to the app directory where the index.html file is located and starts httpster. He skips explaining a few of the aforementioned steps.

In reply to Raphi

Joel Hooks: Protractor is an end-to-end functional testing tool for your AngularJS applications. It'll do things like push buttons, enter input and otherwise drive your application, and then test the output that is produced from that input.

Functional tests like these are an important layer in your overall testing strategy. Protractor is a wrapper for Selenium WebDriver, which is a standard web page testing tool. What Protractor adds to Selenium WebDriver is some AngularJS-specific functionality.

To get started with Protractor, make sure that you have node and the node package manager installed on your system. We'll install Protractor globally using the node package manager. With Protractor installed, we also need to install Selenium WebDriver.

Luckily for us, Protractor provides the WebDriver manager which makes this incredibly easy. Simply type WebDriver manager update into the terminal and you'll see that the Selenium standalone server as well as the chrome driver both now installed and ready to use on your system.

Now that we have Protractor and WebDriver installed, the next step is to configure Protractor to run our test. Inside of the test folder we have a very basic configuration. This configuration tells Protractor exactly two things, where are the tests and what's the URL we'll be serving the page from.

In this case, we're telling Protractor to look in the E2E directory and all of its subfolders and grab anything with .spec.js as the file name. Our application is running on localhost port 3333, so we're going to tell Protractor that this is the base URL that we want to use.

Now that Protractor is installed and configured, we can run it from the command line by running the Protractor command and pointing it at test/protractor.conf.js. Since our E2E folder doesn't actually contain any tests yet, you'll notice immediately that Protractor throws an error. We're going to test the index of our application, so create a file called index.spec.js. By default, Protractor uses Jasmine for its specs, so hopefully this will be familiar to you.

The first thing we'll do is add a describe for the application that we're testing. Now that we actually have a spec present, we can try to run Protractor again. Now when we run Protractor again, it works, but we get straight zeroes across the board, because we haven't actually added any tests. Then we need to actually grab an instance of Protractor.

I'm going to describe index as the module that we're going to test. Now I'll add our first spec. It should display the correct title. Inside of the spec, I'm going to use the Protractor instance and call the git method and point it at the root of our application. Now every time the spec runs, Protractor will navigate the browser to the root of the application.

Now inside of the expectation, I'm going to use the Protractor instance to get the title of the page that we're currently on. I'll add what I expect the title to be and run the test again. You'll immediately notice that there's another error. The problem here is that we haven't actually started our webserver, so let's do that now.

I'm using the very handy HTTPster library, which serves any folder on your hard drive on localhost 3333. You can use whatever you want. Be sure to update your configuration if you change this or you're serving from a different port.

You'll notice that we have a failure. This is actually a good thing. We know that Protractor's running, we know that it sees the wrong thing and fails as we expect. I'm going to update the test to the actual title of the page, run our test again, and all green, our test passes.

While the usefulness of this particular test is debatable, we've come a long way. We got Protractor and WebDriver installed, we got Protractor configured, and we have our first functional test. The next step is to start looking at AngularJS-specific functional with Protractor, and we'll do that next time.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?