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