Getting Started With Protractor

[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.