Casper tests in Zulip

While working on PR #7998, I had to write a casper test to check that Add as Administrators setting was getting implemented properly.

What are Casper tests?

For UI tests, Zulip uses Casper tests. These tests reside in frontent_tests/casper_tests/. They are used to test the functionality such as is the user able to log in, can they change this setting,etc.

Generally to test your web applications you need some kind of tool. One such tool is Selenium which has been around since forever. Another is Casper, which is lightweight, headless and can be run from the terminal.

So how to write Casper test?

var common = require('../casper_lib/common.js').common; common.start_and_log_in();

So these lines use the start_and_log_in()function defined in common.js to start the application and log in.

casper.then(function () {
    var menu_selector = '#settings-dropdown';
    casper.test.info('Invite page');
    casper.waitUntilVisible(menu_selector, function () {
         casper.click(menu_selector);
         casper.then(function () {
         

After logging in, we want to click on the settings icon and then selects the Invite Users option from the dropdown menu.

casper.waitUntilVisible('#invite_user_form', function () {
    casper.fill('form#invite_user_form', {invitee_emails: 'foo@zulip.com'});
    casper.click('input[name="invite_as_admin"] ~ span');
    casper.test.assertVisible("#add_invite_stream_input", "Stream input visible");
    common.select_item_via_typeahead('#add_invite_stream_input', 'D', 'Denmark');
});

This will wait for invite user form to appear and then fill the form as select the checkbox with option ‘Invite as administrators’.

casper.then(function () {
    casper.waitUntilVisible("div .pill", function () {
        casper.click('#submit-invitation');
    });
});

casper.waitUntilVisible("#invite_status.alert.alert-success", function () {
    casper.test.assertExists('#invite_status.alert.alert-success', 'User invited');
});

After filling up the form, it will wait for a div with class as pillto appear in the document’s DOM and then it will click the submit button in the invitation modal.

casper.then(function () {
    var menu_selector = '#settings-dropdown';

    casper.test.info('Invitations page');

    casper.waitUntilVisible(menu_selector, function () {
        casper.click(menu_selector);
        casper.then(function () {
            casper.click('a[href^="#organization"]');
            casper.test.assertUrlMatch(
                /^http:\/\/[^/]+\/#organization/,
                'URL suggests we are on organisation settings page');
            casper.waitUntilVisible('#settings_page.new-style', function () {
                casper.test.assertExists('#settings_page.new-style', 'Settings page is active');
                casper.click('.admin[data-section="invites-list-admin"]');
            });
        });
    });
});

After submitting the invitation form, it will select Organisation settings from the settings’ drop down menu and click on the Invitations tab.

casper.waitUntilVisible("#admin_invites_table", function () {
    casper.test.assertExists('#admin_invites_table', 'Invitations page is active');
    casper.test.assertEval(function () {
        var table_cells = $("#admin_invites_table tr.invite_row td:nth-child(1)");
        for (var i = 0; i < table_cells.length; i += 1) {
            var td = table_cells[i];
            var email = td.children[0].textContent;
            if (email === "foo@zulip.com") {
                var title = td.children[1].title;
                return title === "Invited as administrator";
            }
        }
    }, 'User invited as admin');
});

Then it will wait until the invites list table has appeared, and then check that the user invited previously should be invited as an admin.

How to run these tests?

In the Zulip dev environment, you can run the test using `./tools/test-js-with-casper` or if you want to run a specific test file, you can use `./tools/test-js-with-casper 16` or `./tools/test-js-with-casper 16-invitations.js`.

How to debug these tests?

The Zulip dev environment provides debug output in var/casper.

• You can check for the screenshots of what the UI looked like at the time of failures at var/casper/casper-failure*.png.
• var/casper/server.log has the server logs from the casper run, you can look there if you get stuck.

Additionally, while debugging you can include code to take screenshots like casper.capture('var/casper/screenshot-1.png');.