Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Smooth out the Sharp Angles of Protractor Testing

DZone's Guide to

Smooth out the Sharp Angles of Protractor Testing

In this article, Jan Molak will show you how we can help failed assertions make a little bit more sense and save us some precious debugging time.

· Web Dev Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

One of the most common activities of a Protractor test is to verify the state of various web elements. For example, a test might need to ensure that an element is, or becomes present as a result of our interaction with the system — did a confirmation dialog appear as expected? Or Perhaps we need to wait for some element to appear before we can proceed — is the dialog present for us to confirm the action?

Protractor provides several convenience methods that we can use to assess the state of web elements and they work very well as long as everything goes according to plan. If it doesn’t we might sometimes see this:

AssertionError: expected false to be true


The IT Crowd, http://www.imdb.com/title/tt0487831/

This particularly unhelpful message is not caused by some deficiency in Protractor, however. It’s caused by how we use it. In this article, I’ll show you how we can help failed assertions make a little bit more sense and save us some precious debugging time.

The (Missing) Context

Consider the following example, in which we’d like to find out if the below HTML element is displayed:

<h1 id="title">Chai Smoothie is delicious!</h1>

If we’re using the excellent Chai and Chai as Promised libraries, we might try to solve the problem using the following statement:

expect(element(by.id('title')).isDisplayed()).to.eventually.be.true;

When the element identified by the id of “title” is displayed, the assertion works fine and won’t bother us with any error messages. However, should the element suddenly decide to not appear, we’d get the dreaded:

AssertionError: expected false to be true

Although Chai is doing its best to tell us the reason of the failure, the only information it has available at this stage is the boolean state of the element’s visibility. This lack of context is what causes the error message to seem a bit unhelpful.

Additionally, since assertion errors are also often accompanied with a long stack trace, not necessarily directly related to the problem — the process of analyzing and understanding the failure becomes a long and frustrating endeavor. 

Smooth out the Sharp Angles of Protractor Testing

Let’s take a step back then.

One of the amazing things that Chai allows us to do is to expand its already rich assertion vocabulary with custom plugins, which we can either implement ourselves or choose from a vast array of the existing ones.

Chai Smoothie is my take at helping failures in Protractor tests become a bit more meaningful, so let me show you how you can use it.

Smoothie expands Chai’s vocabulary to add the following properties:

  • displayed — which verifies if an element exists in the DOM and is visible
  • enabled — which can tell you if a form element, such as an input box, is not disabled
  • present — which checks if an element exists in the DOM (even though it might not be visible)
  • selected — which can help you check if a form control, such as an input checkbox is checked

With Smoothie, we could improve our original solution to look like this:

expect(element(by.id('title'))).to.eventually.be.displayed;

Now, should the title decide to not appear, we’d get a more informative error:

AssertionError: Expected the element located By(css selector, *[id="title"]) to be displayed, but it's not.

At least now we know what element we’re talking about!

The IT Crowd, http://www.imdb.com/title/tt0487831/

Take It Further

Knowing a bit more about the context of a test failure goes a long way, so could we take it even further then?

Of course, we could, and this is where Serenity/JS comes into play!

Since Serenity/JS builds on the shoulders of Protractor to allow for easy integration with Angular and other popular web frameworks, you can further improve your Protractor tests to use Smoothie together with Serenity/JS Questions:

expect(actor.toSee(WebElement.of(Article.Title))).displayed;

Serenity/JS is a next generation acceptance testing library, which implements the Screenplay Pattern and produces in-depth reports that the Serenity BDD community has long benefited from in the Java land. This means that should our assertion fail again, we’d not only get a more meaningful error message, we’d also get a descriptive report, together with screenshots depicting the state of the system when the failure occurred.

If you’d like to learn how you can improve your Protractor tests to produce more meaningful information, check out our article “Introducing Serenity/JS: Next generation acceptance testing in JavaScript” and give the tutorials a go!

I hope that you find Smoothie helpful and I'm looking forward to hearing your thoughts!

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda

Topics:
web developement ,javascript ,typescript ,bdd ,testing ,tdd ,angular ,protractor

Published at DZone with permission of Jan Molak, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}