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.

Use protractor to catch errors in the console

2:23 Angular 1.x lesson by

Protractor gives you access to the console log while it is testing. This functionality could be used to verify that no errors are occurring, or other similar things you might want to test.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Protractor gives you access to the console log while it is testing. This functionality could be used to verify that no errors are occurring, or other similar things you might want to test.

Avatar
David

That "flash of ugly handlebars"... can that be avoided with ng-cloak? Just curious since I recently ran into (and solved) with that method.

In reply to egghead.io
Avatar
Mike

Yes, or use ng-bind="expression" in an element.

In reply to David
Avatar
Dzmitry Budzko

There's in fact a built-in plugin called "console" that does exactly that.

It sounds obvious, but Protractor can only test the things you tell it to. What that means is that it can actually miss certain things if you don't tell it to look out for them. You can see here that we have our very basic Protractor test. If we run our test, it passes. Everything is fine.

If we go in and make a change to our code here so this code runs when the button gets clicked...Maybe we want to track an analytics event when that happens as well, so we're going to call analytics.track.

We'll refresh our app here, live. When we do that, we can see that we get an error. That error is, of course, because the analytics object is not defined. We didn't remember to initialize that in our code.

If we go run our tests here, you can see that our tests still pass even though our application has an obvious error and something that could be a big deal in a production scenario. The way that we can catch errors like that is by adding an afterEach hook.

Within this afterEach callback, we're going to call this browser.manage().logs() function to get the logs, get the browser logs out of there. In our callback, we'll actually get that browser log object back, or the array. We can then check to verify that the length is zero, meaning that there have been zero errors.

If we then run our tests again, we'll see that they do actually fail. Our error message here is that we "Expected 1 to equal 0." We expected that browser log to be empty, but it's not.

What we can do here, if we want to actually see what that error is, which...Not necessarily that you would debug it this way, but if you want to see what that error is, you can get that array and just pass it to the JSON stringify method so that you can actually see the contents of those errors.

We can see here that we do get a whole big...We get the entire stack trace in our console here. We can see that "analytics is not defined" message up there is the root cause.

Lastly, if we go back to our application and remove the problematic code, save that file, and then run our tests again, we'll see that it does pass as expected because we've gotten rid of our console errors.

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