/drupal-test.js
Last active Nov 18, 2017
This sample accompanies a blog post series about CasperJS found at http://fourword.fourkitchens.com/article/testing-drupal-casperjs
| /** | |
| * @file | |
| * Testing a demo of Drupal. The script will log in and check for various | |
| * features in Drupal core. This demo was inspired by a similar script for | |
| * a Wordpress site. The original script was written by Henrique Vicente. | |
| * | |
| * @see https://github.com/henvic/phantom-casper-simple-talk/blob/master/wordpress.js | |
| */ | |
| // Set up variables to visit a URL and log in. | |
| var config = { | |
| 'host': 'http://demo.opensourcecms.com/drupal', | |
| 'form': { | |
| 'name': 'admin', | |
| 'pass': 'demo123' | |
| } | |
| }; | |
| // In one of the tests we want to set some content up, then test it in the | |
| // following block of code. Setting this content up as a global variable helps | |
| // keep the testing code DRY and reliable. | |
| var nodeContents = { | |
| 'title': 'Hello, World!', | |
| 'body[und][0][value]': 'This content was added by CasperJS!' | |
| }; | |
| // 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 Drupal demo site', 8, function suite(test) { | |
| // casper.start() always wraps your first action. The first argument should | |
| // be the URL of the page you want to test. Instead of being hard-coded, ours | |
| // comes from the config object we defined above. | |
| // | |
| // @see http://casperjs.readthedocs.org/en/latest/modules/casper.html#start | |
| casper.start(config.host, function() { | |
| // casper.fill() allows you to populate and submit forms. | |
| // | |
| // The first argument is any selector that can uniquely identify your form. | |
| // | |
| // The second argument is an object containing the data you want to submit | |
| // using this form. Our config.form variable was defined at the beginning of | |
| // this file. Each property name of the object you supply should be identical | |
| // to the `name` attr on the form you're filling out. | |
| // | |
| // The third argument is a boolean that tells Casper whether the form should | |
| // be submitted automatically. There are other ways of submitting forms, | |
| // such as finding the submit button and running the click() operation on it. | |
| // | |
| // @see http://casperjs.readthedocs.org/en/latest/modules/casper.html#fill | |
| casper.fill('form#user-login-form', config.form, true); | |
| // You can output comments at any point in your script. Sometimes it's good | |
| // to add a message when you're attempting an operation that might take a | |
| // few moments to respond, such as this login attempt. | |
| test.comment('Logging in...'); | |
| }); | |
| // 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 authenticated sessions are a prime candidate, since we | |
| // cannot perform any further actions if we failed to authenticate. | |
| // | |
| // @see http://casperjs.readthedocs.org/en/latest/modules/casper.html#then | |
| casper.then(function() { | |
| // test.assertHttpStatus() determines which HTTP response code was sent from | |
| // the server. All of the tests in this file are checking for 200, which is | |
| // a normal, successful response. But there's nothing stopping someone from | |
| // intentionally checking for 403, 404, or even 500 errors from the server. | |
| // | |
| // @see http://casperjs.readthedocs.org/en/latest/modules/tester.html#asserthttpstatus | |
| test.assertHttpStatus(200, "Authentication successful"); | |
| // Now that we're logged in, check for the `logged-in` class that is appended | |
| // to the <body> tag for all authenticated Drupal traffic. | |
| // | |
| // @see http://casperjs.readthedocs.org/en/latest/modules/tester.html#assertexists | |
| test.assertExists('body.logged-in', 'Drupal class for logged-in users was found.'); | |
| // We want to browse the content list that is available to Drupal admins, | |
| // so we are clicking the Content link in the admin toolbar. The next series | |
| // of steps assumes that Overlay module is enabled, which is the default for | |
| // the Standard installation profile in Drupal 7. | |
| // | |
| // @see http://casperjs.readthedocs.org/en/latest/modules/casper.html#click | |
| this.click('a[href="/drupal/admin/content"]'); | |
| // Log the click to the console so we know why it's pausing momentarily. | |
| test.comment('Clicking the Content admin link...'); | |
| }); | |
| // Now that we've authenticated and loaded the content page, it's time to look | |
| // for some content. | |
| casper.then(function() { | |
| // First we see if the Overlay updated the page title correctly. The first | |
| // argument is a regex that is run against <title> tag. The second argument | |
| // is optional and can be used to provide a more descriptive test result. | |
| // | |
| // @see http://casperjs.readthedocs.org/en/latest/modules/tester.html#asserttitlematch | |
| test.assertTitleMatch(/Content | Drupal Demo Install/, 'Overlay changed page title to contain the word "Content"'); | |
| // We also check that the URL is updated as expected. For science. Arguments | |
| // are the same as test.assertTitleMatch() | |
| // | |
| // @see http://casperjs.readthedocs.org/en/latest/modules/tester.html#asserturlmatch | |
| test.assertUrlMatch(/drupal\/node#overlay=admin\/content/, 'Overlay updated the URL to drupal/node#overlay=admin/content'); | |
| // Instead of clicking another link, we want to load the node/add/page page | |
| // without our dear friend, the Overlay. casper.open() simply loads a new | |
| // URL. We put this at the end of the code block and use casper.then() to | |
| // ensure that the next tests are run after the page is finished opening. | |
| // | |
| // @see http://casperjs.readthedocs.org/en/latest/modules/casper.html#open | |
| this.open(config.host + '/node/add/page'); | |
| // Log this action to the console as an informational courtesy to the user. | |
| test.comment('Adding Basic page...'); | |
| }); | |
| // With our fresh node/add page, we want to populate and submit another form. | |
| casper.then(function() { | |
| // Check that the page loaded properly. | |
| test.assertHttpStatus(200, 'Opened the node/add/page page.'); | |
| // Look for the node form that we want to populate. | |
| test.assertExists('form#page-node-form', 'Found the node/add/page form.'); | |
| // Populate the form with the content we prepared at the beginning of this | |
| // file. As the notes above explain, we do not want to repeat the values we | |
| // submit here in the next test, because if we update these values later and | |
| // forget to change both simultaneously, then it will appear that the site | |
| // broke when it is actually our test that is broken. | |
| casper.fill('form#page-node-form', nodeContents, true); | |
| // Once again, report that we're saving the node to keep the user informed. | |
| test.comment('Saving new node...'); | |
| }); | |
| // Drupal automatically redirects to the published node on success. With the | |
| // form submitted, we check to see what the published content looks like. | |
| casper.then(function() { | |
| // Check the page title of the published node. Since we don't want to hard- | |
| // code any of the test values, we use the `new RegExp` syntax which allows | |
| // the regex to contain variables. | |
| test.assertTitleMatch(new RegExp(nodeContents.title), 'Our custom title was found on the published page.'); | |
| // Now we do some very light screen scraping to find the text that we added | |
| // to the body field of this node. Since Drupal 7 has jQuery 1.4.4 out of | |
| // the box, it is safe to rely on it to extract our text. | |
| // | |
| // test.assertEvalEquals() allows us to execute arbitrary code and compare | |
| // the results with a pre-defined value. The first argument is a function | |
| // containing our code that will be evaluated in the context of the testing | |
| // environment. The second argument (which is sourced from our variable at | |
| // the beginning of the file) is the expected result. The third argument is | |
| // optional and allows us to provide a more descriptive test result. | |
| // | |
| // @see http://casperjs.readthedocs.org/en/latest/modules/tester.html#assertevalequals | |
| test.assertEvalEquals(function () { | |
| return jQuery('.node-page .content p').text(); | |
| }, nodeContents['body[und][0][value]'], 'Our custom text was found on the published page.'); | |
| }); | |
| // This code runs all the tests that we defined above. | |
| casper.run(function () { | |
| test.done(); | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment