Getting Started With Protractor
Protractor is an end-to-end testing library for AngularJS. This video lesson will walk through getting Protractor installed and writing your first test.
[00:01] 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.
[00:12] 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.
[00:27] 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.
[00:39] Luckily for us, Protractor provides the WebDriver manager, which makes this incredibly easy. Simply type WebDrive 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.
[00:53] Now that we have Protractor and WebDriver installed, the next step is to configure Protractor to run our tests. 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?
[01:08] 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 local host, port 3333, so we're going to tell Protractor that this is the base URL that we want to use.
[01:23] 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.
[01:38] 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 spec so hopefully, this'll be familiar to you.
[01:49] 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 a protractor again.
[01:57] Now when we run Protractor again, it works but we get straight zeros across the boards because we haven't actually added any tests. Then we need to actually grab an instance of Protractor.
[02:05] 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.
[02:13] 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. Inside of the expectation, I'm going to use the Protractor instance to get the title of the page that we're currently on.
[02:29] I'll add what I expect the title to be and run the test again and you'll immediately notice that there's another error. The problem here is that we haven't actually started our Web server so let's do that now.
[02:39] I'm using the very handy Httpster library, which serves any folder on your hard drive on local host 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.
[02:52] And you'll notice that we have a failure. This is actually a good thing.
[02:55] 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 passed.
[03:08] 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.
[03:18] The next step is to start looking at AngularJS specific functionality with Protractor and we'll do that next time.
Agreed. The directory structure is confusing and unexplained.
This tutorial is outdated. You don't need to .getInstance() and use browser.get('/') instead. I had to do some Googling.
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.
How does Protractor know where index.html is?
Would like to have the source files being used in the video, with all those directories...
Evan, Thank you. Paul
he speaks too fast and unclearly it is too hard to follow him
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.
Any updates? This video is 4 years old - that's ancient in web terms...
I probably won't update this at all.
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.