Asserts that element doesn't contain class.

<form>
  <button class="plain-btn action submit-product" type="submit">Fire</button>
</form>

 test
   .open('http://dalekjs.com/index.html')
   .assert.doesntHaveClass('.grid__item.one-whole.info-box', 'info', 'div doesn\'t have info class')
   .done();

Asserts that an element contains class.

<form>
  <button class="plain-btn action submit-product" type="submit">Fire</button>
</form>

 test
   .open('http://dalekjs.com/index.html')
   .assert.hasClass('.grid__item.one-whole.info-box', 'info-box', 'div has info-box class')
   .done();

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();

Between helper

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!

Contain helper

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();

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();

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

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

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();

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();

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.

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();

Asserts that screenshot is equal to already stored image. Should follow only after screenshot action

   test.open('http://google.com')
     .wait(500)
     .screenshot('test/screenshots/google.png','#lga')
     .assert.screenshotIsEqualTo('test/screenshots/google_etalon.png', true, 'Google Doodles')
     .done();

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();

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();

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();

Equals case insensitive helper

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()

Gt helper

Gte helper

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();

Asserts that current HTTP status code is the same as the one passed as argument. TODO: Needs some work to be implement (maybe JavaScript, Webdriver ha no method for this)

Is helper

Lt helper

Lte helper

Match helper

Not helper

Not contain helper

Determine if an element, or an 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();

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

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')

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

Asserts that a given resource does exist in the environment.

Determine if an element, or an 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();

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();

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();

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();

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')

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

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();