CasperJS

Randall Beatty

Intermediate Front-end Developer at

tbk Creative

Erin DeGroote

Junior Front-end Developer at

tbk Creative

What is CasperJS?

A navigation scripting and testing utility for PhantomJS.

What is PhantomJS?

A headless browser (no GUI)

What can CASPERJS do?

Define and order navigation steps
Fill forms
Capture screenshots of a page (or area)
Make assertions on remote DOM (does an element exist?)
Logging and events
Download resources
Catch errors and react accordingly
Write functional test suites, export results

WHY write tests?

Make QA more efficient by automating user actions
Know when you have broken something

How?

Run manually from command line
Integrate with CI (Continous Integration)

Prerequisites

Install BOTH PhantomJS and CasperJS
A website to test
A CI (optional)

Creating your first test

this.fill('form#contact-form', {
    'input[name="email"]': 'randall@tbkcreative.com'
    'textarea[name="message"]': 'Hello world'
}, false);

fillSelectors() — Fills form fields with given values and optionally submits it

fillLabels() — Fills a form with provided field values using associated label text. Fields are referenced by label content values

this.fillLabels('form#contact-form', {
    Email: 'randall@tbkcreative.com',
    Message: 'Hello world',
}, true);

Creating your first test

casper.then(function() {
    this.click('.btn');
});

click() - Performs a click on the element matching the provided selector expression.

clickLabel() - Clicks on the first DOM element found containing label text

casper.then(function() {
    this.clickLabel('Button Text', 'a');
});

Creating your first test

test.assert(true, 'true');

test.assertExists('.name');

test.assertDoesntExist('.name');

test.assertEquals(1 + 1, 2);

test.assertElementCount('ul', 1);

test.assertNotVisible('.name');

test.assertSelectorHasText('title', 'tbk');

...and lots more

Assertions - The provided condition strictly resolves to a boolean true

Creating your first test

casper.start('http://yoursite.com/1');

casper.thenOpen('http://yoursite.com/2');

casper.back(); // http://yoursite.com/1

casper.forward(); // http://yoursite.com/2

back() and forward() — move a step back or forward in browser’s history

Creating your first test

casper.start('http://yoursite.com/', function() {
    this.captureSelector('screenshot.png', '#container');
});

download() — saves a remote resource onto
file system

casper.start('http://yoursite.com/', function() {
    var url = 'http://yoursite.com/about';
    this.download(url, 'about.html');
});

captureSelector() — take screenshot of a page or element and save files to target location

Demo - Ecommerce test

Full repo

Where can you go from here?

        casper.test.begin( name, function(test) {
            casper.start('about:blank');
            generate_attribute_sets(options).forEach(function(attribute_set, counter) {
                var shortcode = generate_shortcode(attribute_set, template);
                casper.thenOpen(root + '/dev/tbk-base/src/shortcode-tester
                /?shortcode=' + encodeURIComponent(shortcode), function() {
                    casper.echo( "\n" + ( counter + 1 ) + ": " + root + 
                    '/dev/tbk-base/src/shortcode-tester/?shortcode=' + encodeURIComponent(shortcode) );
                    casper.echo(shortcode);
                    attribute_set.tests.forEach(function(test_function) {
                        test_function(test);
                    });
                });
            });
        });

atts: {
  text_position: 'center',
},
tests: function(test) {
  test.assertExists('.center');
  test.assertDoesntExist('.top-left');
  test.assertDoesntExist('.top-center');
  test.assertDoesntExist('.top-right');
  test.assertDoesntExist('.middle-left');
  test.assertDoesntExist('.middle-right');
  test.assertDoesntExist('.bottom-left');
  test.assertDoesntExist('.bottom-center');
  test.assertDoesntExist('.bottom-right');
}

[exec] [37;42;1mPASS 4176 tests executed in 825.161s, 4176 passed, 0 failed, 0 dubious, 0 skipped.[0m

COMPONENT TEST AUTOMATION

Summary

Q&A*

*Go easy, we're still learning too