Skip to content

Instantly share code, notes, and snippets.

@rupl
Last active July 4, 2017 10:44
Show Gist options
  • Save rupl/50ab8df2b534f6649290 to your computer and use it in GitHub Desktop.
Save rupl/50ab8df2b534f6649290 to your computer and use it in GitHub Desktop.
A CasperJS script to test the canonical Picturefill demo. This sample accompanies a blog post series about CasperJS found at http://fourword.fourkitchens.com/article/using-casperjs-test-picturefill
/**
* @file
* Testing to see if Picturefill selects the right source at multiple
* viewport sizes.
*/
// Define the suite of tests and give it the following properties:
// - Title, which shows up before any of the pass/fails.
// - Number of tests, must be changed as you add tests.
// - suite(), which contains all of your tests.
//
// @see http://casperjs.readthedocs.org/en/latest/modules/tester.html#begin
casper.test.begin('Testing Picturefill', 5, function suite(test) {
// casper.start() always wraps your first action. The first argument should
// be the URL of the page you want to test.
//
// @see http://casperjs.readthedocs.org/en/latest/modules/casper.html#start
casper.start('http://scottjehl.github.io/picturefill/examples/demo-02.html', function () {
// First, we look for a <picture> element. The first argument is a query
// selector, like jQuery or document.querySelectorAll(). Any <picture> tags
// on the page are found by using the 'picture' selector.
//
// @see http://casperjs.readthedocs.org/en/latest/modules/tester.html#assertexists
test.assertExists('picture', '<picture> element found.');
// Now verify that the <picture> tag has two <source> tags. This is
// another query selector. In a more complex test you will need to write
// a more specific selector. This will find all <source> tags within all
// <picture> tags in your document. This demo only has one <picture> tag
// so the simple selector works fine.
//
// @see http://casperjs.readthedocs.org/en/latest/modules/tester.html#assertelementcount
test.assertElementCount('picture > source', 2);
// Before running any viewport-specific tests, set the viewport to 320x480.
// PhantomJS has a default viewport of 400x300 and CasperJS does not alter
// this default, so it's always a good idea to explicitly set the viewport
// to your desired dimensions.
//
// @see http://casperjs.readthedocs.org/en/latest/modules/casper.html#viewport
this.viewport(320, 480);
});
// casper.then() allows us to wait until previous tests and actions are
// completed before moving on to the next steps. This is useful for many
// situations and viewport resizing is one of them, since scripts like
// Picturefill have to respond to the resize.
//
// @see http://casperjs.readthedocs.org/en/latest/modules/casper.html#then
casper.then(function() {
// With the viewport resized, look for the src of the <img> and make sure it
// is set to the value we expect. In this example we are testing the smaller
// viewport first, so medium.jpg should be found since the Picturefill markup
// declares it as default.
//
// @see http://casperjs.readthedocs.org/en/latest/modules/tester.html#assertevalequals
test.assertEvalEquals(function () {
return document.querySelectorAll('picture img')[0].getAttribute('src').match('medium.jpg').toString();
}, 'medium.jpg', 'medium.jpg found using 320x480 viewport.');
});
// Resize the viewport again
casper.then(function() {
this.viewport(960, 640);
});
// With the viewport resized to 960px, check and see if the large.jpg is
// now contained within the <img> src, since the demo markup specifies an
// 800px breakpoint for this image.
casper.then(function() {
test.assertEvalEquals(function () {
return document.querySelectorAll('picture img')[0].getAttribute('src').match('large.jpg').toString();
}, 'large.jpg', 'large.jpg found using 960x640 viewport.');
});
// Resize the viewport again
casper.then(function() {
this.viewport(1280, 1024);
});
// Finally, with the 1280x1024 viewport, check to see if the <img> is now
// using the extralarge.jpg source which was specified for viewports larger
// than 1000px wide.
casper.then(function() {
test.assertEvalEquals(function () {
return document.querySelectorAll('picture img')[0].getAttribute('src').match('extralarge.jpg').toString();
}, 'extralarge.jpg', 'extralarge.jpg found using 1280x1024 viewport.');
});
// This code runs all the tests that we defined above.
//
// @see http://casperjs.readthedocs.org/en/latest/modules/tester.html#done
casper.run(function () {
test.done();
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment