Chai Smoothie - Protractor assertions for Chai


Chai Smoothie smooths out the sharp angles of your
Protractor-powered automated web tests.

The library provides a set of custom
Chai
assertions to help your Protractor-based Serenity/JS tests
express their intent better, give assertion errors more meaning,
and reduce the amount of time your team spends troubleshooting the failures.

Chai Smoothie comes with TypeScript typings
and works with Chai-as-Promised,
Serenity/JS,
and plain Protractor tests too!

---

To add Chai Smoothie to your Node.js project:

``
npm install chai-smoothie --save-dev
`

---

The Motivation and The (Missing) Context

Let's assume that we'd like to find out a bit more about the state of an HTML element defined as:

` html


Chai Smoothie is delicious!


`

A typical approach used in Protractor tests
to check if an element is displayed looks more or less like this:

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

However, should the element decide to _not_ appear, the assertion will fail telling us that:

`
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 with this approach is the boolean state of element's visibility.
This lack of context is what causes the error message to not be particularly useful.

Chai Smoothie gives Chai the missing context and makes the assertion more readable too!

$3

If your automated web tests use Protractor, you can use Chai Smoothie to turn the assertion from the previous example
into something a bit more readable:

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

Should the above assertion fail, the error message will be much more informative:

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

$3

Since Serenity/JS builds on the shoulders of Protractor,
you can use similar syntax with
Serenity/JS Questions:

`typescript
expect(actor.toSee(WebElement.of(Article.Title))).displayed
`

Using the Open-Source Serenity/JS library has a whole lot of other benefits too - learn more.

Setting up

First of all, install Chai if you don't already have it in your project:

`
npm install chai --save-dev
`

Next, install Chai Smoothie:

`
npm install chai-smoothie --save-dev
`

$3

`typescript
import chai = require('chai');
chai.use(require('chai-smoothie'));
const expect = chai.expect;

expect(element(by.css('h1'))).to.be.present;
`

$3

`javascript
var chai = require('chai');
chai.use(require('chai-smoothie'));
var expect = chai.expect;

expect(element(by.css('h1'))).to.be.present;
`




Available Assertions

Chai Smoothie provides following assertions, each of which can be:
* negated using the not operator: expect(el).not.to.be.displayed, expect(el).not.to.be.present.eventually, etc.
* used in conjunction with chai-as-promised,
to highlight that the Chai Smoothie assertions return promises: return expect(el).to.eventually.be.present.

| Assertion | Example | Meaning | Protractor API |
| --- | --- | --- | --- |
| displayed | expect(el).to.be.displayed | An element exists in the DOM and is visible | isDisplayed() |
| enabled | expect(el).to.be.enabled | A form control element, such as an input, is not disabled | isEnabled() |
| present | expect(el).to.be.present | An element exists in the DOM, but can be hidden | isPresent() |
| selected | expect(el).to.be.selected | A form control, such as an input checkbox is checked | isSelected() |
| text() | expect(el).to.have.text('some text') or expect(el).to.contain.text('some text')| An element have / contains a given text | getText()` |

Getting Help

To ask about the usage and troubleshooting of Serenity/JS or any of its components, such as Chai Smoothie,
post a serenity-js tagged question on StackOverflow.

Your feedback matters!

Do you find Chai Smoothie useful? Give it a star! ★

Found a bug? Need a feature? Raise an issue
or submit a pull request.

Have feedback? Let me know on twitter: @JanMolak

License

The Chai Smoothie library is licensed under the Apache-2.0 license.

If you're interested in a commercial license, training, support or bringing your team up to speed with modern software
development practices - please get in touch.