Test Simple Binding With Protractor

Joel Hooks: The first thing we're going to do is remove this Protractor variable and the instance of Protractor that we are using to change the browser page as well as get the title of the page. We don't need to use the Protractor instance directly.

We can use this browser method that Protractor provides to do this work instead. This is cleaner, more explicit, and generally tidies up the tests very nicely. Once we make those changes, we'll run the tests again, and they pass.

To get started, we have a very simple template. It has a button, and when you press that button, it calls a method on a controller. That controller updates a property called message text on the scope, and down here. We're binding to message text within this element to display the text.

What we want to actually test is that pressing this button does indeed update the message text on the page. This is exactly what Protractor was built to do. Now we'll jump back over to the tests and create a new spec.

It should display the message when button is clicked. Within this new spec, we're going to create a variable called button. Then we'll assign the button to a call to the element helper method that Protractor provides for us.

Now we pass by ID into the element function with the argument of button one, which is the idea of our button. Protractor has access to all of the web driver JS selectors for elements, as well as a good handful of specific selectors for angular JS applications.

We're going to create another variable called message, and we're going to call element again. But this time, we're going to pass in by binding and by binding is one of those angular-specific selectors that Protractor is providing for us.

We're going to give that a value of message text, which is the name of the binding that we're looking for on the page. Since we're interested in what happens when you actually click the button, we're going to call the click method on the button instance.

Now within our expectation, we're going to use method and call get text to get the text that's on the page, and then we're going to define what we expect it to be. Let's run the tests. They fail. The expectation is incorrect.

Let's fix it real quick, run them again, and they pass. Protractor has some truly great abstractions for doing this kind of work. A lot of times, when you're doing asynchronous testing or you're loading elements on the page and you're waiting for interactions on elements. This can become really, really messy. Protractor is providing the tools that we need to write clean, functional tests...