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
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 moreAssertions - 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/2back() 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
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.[0mCOMPONENT TEST AUTOMATION
Summary
Q&A*
*Go easy, we're still learning too
CasperJS
By Randall Beatty
