Casper тестирует в Zulip

Во время работы над PR #7998 мне пришлось написать каспер-тест, чтобы проверить правильность реализации настройки Add as Administrators.

Что такое тесты Casper?

Для тестов пользовательского интерфейса Zulip использует тесты Casper. Эти тесты находятся в frontent_tests/casper_tests/. Они используются для проверки функциональности, например, может ли пользователь войти в систему, может ли он изменить этот параметр и т. д.

Как правило, для тестирования ваших веб-приложений вам нужен какой-то инструмент. Одним из таких инструментов является Selenium, который существует с незапамятных времен. Другой — Casper, легкий, безголовый, запускаемый из терминала.

Итак, как написать тест Casper?

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

Таким образом, эти строки используют функцию start_and_log_in(), определенную в common.js, для запуска приложения и входа в систему.

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 () {
         

После входа в систему мы хотим щелкнуть значок настроек, а затем выбрать параметр Invite Users в раскрывающемся меню.

casper.waitUntilVisible('#invite_user_form', function () {
    casper.fill('form#invite_user_form', {invitee_emails: '[email protected]'});
    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');
});

Это будет ждать появления формы приглашения пользователя, а затем заполнить форму, установив флажок с опцией «Пригласить как администраторов».

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');
});

После заполнения формы он будет ждать появления div с классом pill в DOM документа, а затем нажмет кнопку отправки в модальном окне приглашения.

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"]');
            });
        });
    });
});

После отправки формы приглашения он выберет Organisation settings в раскрывающемся меню настроек и перейдет на вкладку Invitations.

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 === "[email protected]") {
                var title = td.children[1].title;
                return title === "Invited as administrator";
            }
        }
    }, 'User invited as admin');
});

Затем он будет ждать, пока не появится таблица со списком приглашенных, а затем проверит, что ранее приглашенный пользователь должен быть приглашен в качестве администратора.

Как запустить эти тесты?

В среде разработки Zulip вы можете запустить тест, используя `./tools/test-js-with-casper`, или, если вы хотите запустить определенный тестовый файл, вы можете использовать `./tools/test-js-with- casper 16` или `./tools/test-js-with-casper 16-invitations.js`.

Как отлаживать эти тесты?

Среда разработки Zulip предоставляет вывод отладки в формате var/casper.

• Вы можете проверить скриншоты того, как выглядел пользовательский интерфейс во время сбоев на var/casper/casper-failure*.png.
• var/casper/server.log есть логи сервера от каспера, можете глянуть там, если застряли.

Кроме того, во время отладки вы можете включить код для создания снимков экрана, например casper.capture('var/casper/screenshot-1.png');.