Assertions

Assertions check if the assumptions you made about a website are correct. For example they might check if the title of a page or the content text of an element is as expected, or if your mobile website version only displays a certain amount of elements.

.chain

It can be really cumbersome to always write assert, assert & assert all over the place when you're doing multiple assertions. To avoid this, open an assertion context in your test which allows you to write (n) assertions without having to write 'assert' before each.

So, instead of writing this:

 test.open('http://doctorwhotv.co.uk/')
     .assert.text('#nav').is('Navigation')
     .assert.visible('#nav')
     .assert.attr('#nav', 'data-nav', 'true')
     .done();
 

you can write this:

 test.open('http://doctorwhotv.co.uk/')
     .assert.chain()
       .text('#nav').is('Navigation')
       .visible('#nav')
       .attr('#nav', 'data-nav', 'true')
     .end()
     .done();
 

to make it even more concise, you can combine this with the query method:

 test.open('http://doctorwhotv.co.uk/')
     .assert.chain()
       .query('#nav')
           .text().is('Navigation')
           .visible()
           .attr('data-nav', 'true')
         .end()
     .end()
     .done();
 

Always make sure to terminate it with the end method!

.end

Terminates an assertion chain or a query

 test.open('http://doctorwhotv.co.uk/')
     .assert.chain()
       .query('#nav')
           .text().is('Navigation')
           .visible()
           .attr('data-nav', 'true')
         .end()
     .end()
     .done();
 

.numberOfElements

Asserts that a given element appears n times on the page.

Given this portion of HTML, you would like to assure that all of these elements are ending up in your rendered markup on your page.

 <section id="blog-overview">
   <article class="teaser"></article>
   <article class="teaser"></article>
   <article class="teaser"></article>
   <article class="teaser"></article>
 </section>
 

The simple solution is to check if all these elements are present

 test.assert.numberOfElements('#blog-overview .teaser', 4, '4 blog teasers are present')
 

The alternate syntax for this is:

 test.assert.numberOfElements('#blog-overview .teaser')
     .is(4, '4 blog teasers are present')
 

If you are not sure how many elements will exactly end up in your markup, you could use the between assertion handler

 test.assert.numberOfElements('#blog-overview .teaser')
     .is.between([2, 6], 'Between 2 and 6 blog teasers are present')
 

If you dealing with the situation that you have a minimum of elements, you expect, you can use this helper:

 test.assert.numberOfElements('#blog-overview .teaser')
     .is.gt(2, 'At least 3 blog teasers are present')
 

If you want to know if its 'greater than equal', use this one

 test.assert.numberOfElements('#blog-overview .teaser')
     .is.gte(2, 'At least 2 blog teasers are present')
 

as well as their 'lower than' and 'lower than equal' equivalents.

 test.assert.numberOfElements('#blog-overview .teaser')
     .is.lt(5, 'Less than 5 blog teasers are present')
 

 test.assert.numberOfElements('#blog-overview .teaser')
     .is.lte(5, 'Less than, or 5 blog teasers are present')
 

And if you just want to know, if a certain amount of teasers isnʼt present, you can still use the not() assertion helper

 test.assert.numberOfElements('#blog-overview .teaser')
     .is.not(5, 'There are more or less than 5 teasers present')
 

.numberOfVisibleElements

Asserts that a given element is visible n times in the current viewport.

Given this portion of HTML, you would like to assure that all of these elements are ending up in your rendered markup on your page.

 <section id="blog-overview">
   <article class="teaser"></article>
   <article class="teaser"></article>
   <article class="teaser"></article>
   <article class="teaser"></article>
 </section>
 

The simple solution is to check if all these elements are visible

 test.assert.numberOfVisibleElements('#blog-overview .teaser', 4, '4 blog teasers are visible')
 

The alternate syntax for this is:

 test.assert.numberOfVisibleElements('#blog-overview .teaser')
     .is(4, '4 blog teasers are visible')
 

If you are not sure how many elements will exactly be shown in the current viewport, you could use the between assertion handler

 test.assert.numberOfVisibleElements('#blog-overview .teaser')
     .is.between(2, 6, 'Between 2 and 6 blog teasers are visible')
 

If you dealing with the situation that you have a minimum of elements, you expect, use this helper:

 test.assert.numberOfVisibleElements('#blog-overview .teaser')
     .is.gt(2, 'At least 3 blog teasers are visible')
 

If you want to know if its 'greater than equal', you can use this one

 test.assert.numberOfVisibleElements('#blog-overview .teaser')
     .is.gte(2, 'At least 2 blog teasers are visible')
 

as well as their 'lower than' and 'lower than equal' equivalents.

 test.assert.numberOfVisibleElements('#blog-overview .teaser')
     .is.lt(5, 'Less than 5 blog teasers are visible')
 

 test.assert.numberOfVisibleElements('#blog-overview .teaser')
     .is.lte(5, 'Less than, or 5 blog teasers are visible')
 

And if you just want to know, if a certain amount of teasers isnʼt visible, you can still use the ':not(): assertion helper

 test.assert.numberOfVisibleElements('#blog-overview .teaser')
     .is.not(5, 'There are more or less than 5 teasers visible')
 

> NOTE: Buggy on all browsers

.val

Asserts that a given form field has the provided value.

Given this portion of HTML, we would like to get the information which option element is currently selected.

 <form name="fav-doctor" id="fav-doctor">
   <select id="the-doctors">
     <option value="9">Eccleston</option>
     <option selected value="10">Tennant</option>
     <option value="11">Smith</option>
   </select>
 </form>
 

 test
   .assert.val('#the-doctors', 10, 'David is the favourite')
   // lets change the favourite by selection the last option
  .click('#the-doctors option:last')
  .assert.val('#the-doctors', 11, 'Matt is now my favourite, bow ties are cool')
 

This assertion is capable of getting the values from every form element that holds a value attribute

Getting texts out of normal input fields is pretty straight forward

 <label for="fav-enemy">Tell my your favourity Who enemy:</label>
 <input id="fav-enemy" name="fav-enemy" type="text" value="Daleks" />
 

 test
   .assert.val('#fav-enemy', 'Daleks', 'Daleks are so cute')
   // lets change the favourite by typing smth. new
  .type('#fav-enemy', 'Cyberman')
  .assert.val('#fav-enemy', 'Cyberman', 'Cyberman are so cyber')
 

.css

Checks the computed style. Note: When selecting values like em or percent, they will be converted to px. So it's currently not possible to check em, %, ... values, only px.

 <div id="superColoredElement">Rose</div>
 

 #superColoredElement {
   background-color: rgba(255, 0, 0, 1);
   color: rgba(0, 128, 0, 1);
 }
 

  test
    .open('http://unicorns.rainbows.io')
    .assert.css('#superColoredElement', 'background-color', 'rgba(255, 0, 0, 1)')
    .assert.css('#superColoredElement', 'color', 'rgba(0, 128, 0, 1)')
    .done();
 

Can also check if a computed style is greater or lower than the expected value. TODO: We might extract the part that determines the comparison operator to reuse it in other test. We might also add >= and <=.

 <div id="fancyPlacedElement">Tulip</div>
 

 #fancyPlacedElement {
   top: 100px;
 }
 

  test
    .open('http://unicorns.rainbows.io')
    .assert.css('#fancyPlacedElement', 'top', '>50px') // 100 is greater than 50, success
    .assert.css('#fancyPlacedElement', 'top', '<150px') // 100 is lower than 150, success
    .assert.css('#fancyPlacedElement', 'top', '>150px') // 100 is lower than 150, fail
    .assert.css('#fancyPlacedElement', 'top', '<50px') // 100 is greater than 50, fail
    .done();
 

.width

Checks the actual width of an element.

   <div id="fixed-dimensions" style="width: 100px"></div>
 

  test
    .open('http://localhost:5000/index.html')
    // all true, all pixel
    .assert.width('#fixed-dimensions', 100)
    .assert.width('#fixed-dimensions').is(100)
    .assert.width('#fixed-dimensions').is.not(100)
    .assert.width('#fixed-dimensions').is.gt(90)
    .assert.width('#fixed-dimensions').is.gte(97)
    .assert.width('#fixed-dimensions').is.lt(120)
    .assert.width('#fixed-dimensions').is.lte(110)
    .assert.width('#fixed-dimensions').is.between([90, 110])
    .done();
 

.height

Checks the actual height of an element.

   <div id="fixed-dimensions" style="height: 100px"></div>
 

  test
    .open('http://localhost:5000/index.html')
    // all true, all pixel
    .assert.height('#fixed-dimensions', 100)
    .assert.height('#fixed-dimensions').is(100)
    .assert.height('#fixed-dimensions').is.not(100)
    .assert.height('#fixed-dimensions').is.gt(90)
    .assert.height('#fixed-dimensions').is.gte(97)
    .assert.height('#fixed-dimensions').is.lt(120)
    .assert.height('#fixed-dimensions').is.lte(110)
    .assert.height('#fixed-dimensions').is.between([90, 110])
    .done();
 

.selected

Determine if an <option> element, or an <input> element of type checkbox or radio is currently selected.

 <input type="checkbox" id="unchecked_checkbox" name="unchecked_checkbox"/>
 <input type="checkbox" id="checked_checkbox" name="checked_checkbox" checked="checked"/>
 <select id="select_elm" name="select_elm">
   <option value="9">Eccleston</option>
   <option selected value="10">Tennant</option>
   <option value="11">Smith</option>
 </select>
 

Checking radio and checkboxes:

  test
    .open('http://selectables.org')
    .assert.selected('#checked_checkbox')
    .done();
 

Checking option elements:

  test
    .open('http://selectables.org')
    .assert.selected('#select_elm option:nth-child(2)')
    .done();
 

.notSelected

Determine if an <option> element, or an <input> element of type checkbox or radio is currently not selected.

 <input type="checkbox" id="unchecked_checkbox" name="unchecked_checkbox"/>
 <input type="checkbox" id="checked_checkbox" name="checked_checkbox" checked="checked"/>
 <select id="select_elm" name="select_elm">
   <option value="9">Eccleston</option>
   <option selected value="10">Tennant</option>
   <option value="11">Smith</option>
 </select>
 

Checking radio and checkboxes:

  test
    .open('http://selectables.org')
    .assert.notSelected('#unchecked_checkbox')
    .done();
 

Checking option elements:

  test
    .open('http://selectables.org')
    .assert.notSelected('#select_elm option:last-child')
    .done();
 

.enabled

Determine if an element is currently enabled.

 <input id="onmars" type="text" size="50" name="onmars" placeholder="State your name, rank and intention!"></input>
 

 test
   .open('http://doctor.thedoctor.com/doctor')
   .assert.enabled('#onmars', 'Is enabled!')
   .done();
 

.disabled

Determine if an element is currently disabled.

 <input disabled id="onearth" type="text" size="50" name="onearth" placeholder="State your name, rank and intention!"></input>
 

 test
   .open('http://doctor.thedoctor.com/doctor')
   .assert.disabled('#onearth', 'Is disabled!')
   .done();
 

.cookie

Checks the contents of a cookie.

  test
    .open('http://cookiejar.io/not_your_mothers_javascript.html')
    .setCookie('atestcookie', 'foobar=baz')
    .assert.cookie('atestcookie', 'foobar=baz')
    .done();
 

.exists

Asserts that an element matching the provided selector expression exists in remote DOM environment.

 <body>
   <p id="so-lonely">Last of the timelords</p>
 </body>
 

 test
   .open('http://doctor.thedoctor.com/doctor')
   .assert.exists('#so-lonely', 'The loneliest element in the universe exists')
   .done()
 

.doesntExist

Asserts that an element matching the provided selector expression doesnʼt exists within the remote DOM environment.

 <body>
   <p id="so-lonely">Last of the time lords</p>
 </body>
 

 test
   .open('http://doctor.thedoctor.com/doctor')
   .assert.doesntExist('#the-master', 'The master element has not been seen')
   .done();
 

.notVisible

Asserts that the element matching the provided selector expression is not visible.

 <body>
   <h1 style="display: none">Me? So hidden …</h1>
   <h2>Me? So in viewport...</h2>
 </body>
 

  test
    .open('http://allyourviewportsbelongto.us')
    .assert.notVisible('h1', 'Element is not visible')
    .done();
 

> NOTE: Buggy on all browsers

.visible

Asserts that the element matching the provided selector expression is visible.

 <body>
   <h1>Me? So in viewport …</h1>
 </body>
 

  test
    .open('http://allyourviewportsbelongto.us')
    .assert.visible('h1', 'Element is visible')
    .done();
 

> NOTE: Buggy on all browsers

.doesntHaveText

Asserts that given text does not exist in the provided selector.

 <body>
   <h1>This is a CasperJS sandbox</h1>
 </body>
 

  test
    .open('http://dalekjs.com/guineapig/')
    .assert.doesntHaveText('h1', 'This page is a Dalek sandbox', 'It´s a sandbox!')
    .done();
 

> NOTE: You cant match for a substring with contain() here.

.dialogDoesntHaveText

Asserts that given text does not exist in the current alert/prompt/confirm dialog.

 <a href="#" id="alert_confirm" onclick="confirm('Confirm me!')">I make confirm</a>
 

  test
    .open('http://skaaro.com/index.html')
    .click('#alert_confirm')
    .assert.dialogDoesntHaveText('I am an alert')
    .accept()
    .done();
 

> NOTE: You cant match for a substring with contain() here. > NOTE: Does not work in Firefox & PhantomJS

.text

Asserts that given text does exist in the provided selector.

 <body>
   <h1>This is a Dalek sandbox</h1>
 </body>
 

  test
    .open('http://dalekjs.com/guineapig/')
    .assert.text('h1', 'This page is a Dalek sandbox', 'Exterminate!')
    .done();
 

of course, text works also with the assertion helpers is() and not()

  test
    .open('http://dalekjs.com/guineapig/')
    .assert.text('h1').is('This page is a Dalek sandbox', 'Exterminate!')
    .done();
 

  test
    .open('http://dalekjs.com/guineapig/')
    .assert.text('h1').is.not('This page is a CasperJS sandbox', 'Exterminate!')
    .done();
 

and you can also check for the occurrence of a substring with to.contain() (but don't try to chain it with not() as this is not possible)

  test
    .open('http://dalekjs.com/guineapig/')
    .assert.text('h1').to.contain('CasperJS')
    .done();
 

.dialogText

Asserts that given alertText does exist in the provided alert/confirm or prompt dialog.

 <a href="#" id="alert" onclick="alert('I am an alert')">I make alerts!</a>
 

  test
    .open('http://skaaro.com/index.html')
    .click('#alert_confirm')
    .assert.dialogText('I am an alert')
    .accept()
    .done();
 

of course, text works also with the assertion helpers is() and not()

  test
    .open('http://dalekjs.com/guineapig/')
    .assert.dialogText().is('I am an alert', 'Exterminate!')
    .done();
 

  test
    .open('http://dalekjs.com/guineapig/')
    .assert.dialogText().is.not('I am an prompt', 'Exterminate!')
    .done();
 

> NOTE: Does not work in Firefox & PhantomJS

.title

Asserts that the page title is as expected.

   test.open('http://doctorwhotv.co.uk/')
     .assert.title('Doctor Who TV', 'Not your Daleks TV')
     .done();
 

Yep, using assertion helpers is also possible:

   test.open('http://doctorwhotv.co.uk/')
     .assert.title().is('Doctor Who TV', 'Not your Daleks TV')
     .done();
 

the not() helper is available too:

   test.open('http://doctorwhotv.co.uk/')
     .assert.title().is.not('Dalek Emperor TV', 'Not your Daleks TV')
     .done();
 

and you can also match for a substring with to.contain() (but don't try to chain it with not() as this is not possible):

   test.open('http://doctorwhotv.co.uk/')
     .assert.title().to.contain('Emperor')
     .done();
 

.doesntHaveTitle

Asserts that given title does not match the given expectations.

   test.open('http://doctorwhotv.co.uk/')
     .assert.doesntHaveTitle('Dalek Emperor TV', 'Not your Daleks TV')
     .done();
 

.url

Asserts that the page’s url is as expected.

   test.open('http://doctorwhotv.co.uk/')
     .assert.url('http://doctorwhotv.co.uk/', 'URL is as expected')
     .done();
 

You can also check if the protocol changed, nice to see when you open GitHub with 'http' instead of 'https'

   test.open('http://github.com')
     .assert.url('https://github.com/', 'Changed prototcols')
     .done();
 

Yep, using assertion helpers is also possible:

   test.open('http://github.com')
     .assert.url().is('http://doctorwhotv.co.uk/', 'URL is as expected')
     .done();
 

the not() helper is available too:

   test.open('http://doctorwhotv.co.uk/')
     .assert.url().is.not('http://doctorwhotv.co.uk/', 'URL is as expected')
     .done();
 

and you can also match for a substring with to.contain() (but don't try to chain it with not() as this is not possible):

   test.open('http://doctorwhotv.co.uk/')
     .assert.url().to.contain('doctor')
     .done();
 

.doesntHaveUrl

Asserts that the pages URL does not match the expectation.

   test.open('http://doctorwhotv.co.uk/')
     .assert.doesntHaveUrl('http://doctorwhotv.co.uk/', 'URL is not expected')
     .done();
 

Oh, you might also match for a substring with to.contain():

• 
  test.open('http://doctorwhotv.co.uk/')
   .assert.doesntHaveUrl().to.contain('doctor')
   .done();
  

.attr

Asserts that an elements attribute is as expected.

 <form>
   <button class="jumpButton" type="submit">Fire</button>
 </form>
 

  test
    .open('http://dalekjs.com/guineapig/')
    .assert.attr('.jumpButton', 'type', 'submit')
    .done();
 

 <div class="wellImUpperUpperClassHighSociety" id="dataDiv" data-spot="cat"></div>
 

  test
    .open('http://dalekjs.com/guineapig/')
    .assert.attr('#dataDiv').is('data-spot', 'cat', 'We found Dataʼs cat!')
    .done();
 

  test
    .open('http://dalekjs.com/guineapig/')
    .assert.attr('#dataDiv').is.not('data-spot', 'doc', 'Spot is not a dog!')
    .done();
 

You can also use attr() for checking if a class is existent

  test
    .open('http://dalekjs.com/guineapig/')
    .assert.attr('#dataDiv', 'class', 'wellImUpperUpperClassHighSociety')
    .done();
 

and you can also match a substring (e. g. a single class if more classes are on that elem) with to.contain():

  test
    .open('http://dalekjs.com/guineapig/')
    .assert.attr('#dataDiv', 'class').to.contain('upperUpperClass')
    .done();