Join 34,000+ subscribers and receive articles from our
blog about software quality, testing, QA and security.

[UI Script] Save changes and edit next


#1

This extension adds a checkbox “Edit next” to edit test case page. When the checkbox is checked, upon saving test case you will be automatically redirected to edit the next case in this suite. This can simplify cleaning up existing tests as well as filling the quickly created ones with steps, results, and other fields.

name: Save and edit next (editing mode part)
description: Adds a checkbox that allows to jump to edit next case after saving this
author: Paul Danyliuk
version: 1.0
includes: ^cases/edit
excludes:

js:
$(document).ready(function() {
    var $form = $('input[name="title"]').closest('form');
    var editNext = sessionStorage.getItem('editNext') == 'true';

    if (editNext) {
        // Clean up session storage
        sessionStorage.removeItem('editNext');

        // Eye candy: add the message about successful save of the previous case
        var $message = $('<div class="messages successPanel">Successfully updated previous test case.</div>');
        $form.before($message);
    }

    // Add a checkbox and augment Add Test Case button
    var $saveAndEditNextCheckbox = $('<input type="checkbox" id="saveAndEditNext">');
    var $saveAndEditNextLabel = $('<label class="choice" for="saveAndEditNext">Edit next</label>');
    var $saveAndEditNextDescription = $('<div class="description">If enabled, will take you to editing next case ' +
        'after saving the current one.</div>');

    // Set checkbox to checked if we are in "add another" mode
    if (editNext) {
        $saveAndEditNextCheckbox.get(0).checked = true;
    }

    // Hook up on form submit: set or unset the flag whether we should forward to edit next
    $form.on('submit', function() {
        if ($saveAndEditNextCheckbox.get(0).checked) {
            sessionStorage.setItem('editNext', 'true');

            // Also append "/1" to form target if not present, so that saving the form jumps to view case page
            // Otherwise if it navigates to suite view, edit next case functionality wouldn't work
            if ($form.get(0).action.indexOf('/1', this.length - 2) == -1) {
                $form.get(0).action += '/1';
            }
        } else {
            sessionStorage.removeItem('editNext');
        }
    });

    // Add our checkbox to the UI (above "Add Test Case" button)
    $form.find('button#submit')
        .before($saveAndEditNextCheckbox)
        .before($saveAndEditNextLabel)
        .before($saveAndEditNextDescription)
        .before($('<br>'));
});
name: Save and edit next (success screen part)
description: Adds a checkbox that allows to jump to edit next case after saving this
author: Paul Danyliuk
version: 1.0
includes: ^cases/view
excludes:

js:
$(document).ready(function() {
    // If it's an "Edit next" state, navigate to edit next (or, if it's the last test in this suite, won't do anything)
    var editNext = sessionStorage.getItem('editNext') == 'true';
    if (editNext) {
        var caseId = uiscripts.context.case.id;

        // Re-implement loadNext so that if there are no more cases, the flag is removed to prevent side effects
        App.Ajax.call({
            target    : "/cases/ajax_get_next",
            arguments : {case_id : caseId},
            success   : function(c) {
                if (c.case_id) {
                    document.location = Consts.ajaxBaseUrl + "/cases/edit/" + c.case_id
                } else {
                    $("#directionNext").hide();
                    $("#directionNextDisabled").show();
                    sessionStorage.removeItem('editNext');
                }
            },
            error     : function(c) {
                App.Ajax.handleError(c)
            }
        });
    }
});

This extension is similar to add another: it uses the same mechanism internally (HTML5 Session Storage for flags), has the same un-niceness with two redirects, and requires two scripts to be enabled.

With best regards,
Paul


#2

UPD: For TestRail 4.0 markup has changed a bit. Only editing mode part needs to be updated:

name: Save and edit next (editing mode part)
description: Adds a checkbox that allows to jump to edit next case after saving this
author: Paul Danyliuk
version: 1.1
includes: ^cases/edit
excludes: 

js:
$(document).ready(function() {
    var $form = $('input[name="title"]').closest('form');
    var editNext = sessionStorage.getItem('editNext') == 'true';

    if (editNext) {
        // Clean up session storage
        sessionStorage.removeItem('editNext');

        // Eye candy: add the message about successful save of the previous case
        var $message = $('<div class="messages successPanel">Successfully updated previous test case.</div>');
        $form.before($message);
    }

    // Add a checkbox and augment Add Test Case button
    var $container = $('<div class="form-group"><div class="checkbox"><label><strong>Edit next</strong></label></div>' +
        '<div class="form-description form-description-full">If enabled, will take you to editing next case ' +
        'after saving the current one.</div></div>');
    var $saveAndEditNextCheckbox = $('<input type="checkbox" id="saveAndEditNext">');
    $container.find('label').append($saveAndEditNextCheckbox);

    // Set checkbox to checked if we are in "add another" mode
    if (editNext) {
        $saveAndEditNextCheckbox.get(0).checked = true;
    }

    // Hook up on form submit: set or unset the flag whether we should forward to edit next
    $form.on('submit', function() {
        if ($saveAndEditNextCheckbox.get(0).checked) {
            sessionStorage.setItem('editNext', 'true');

            // Also append "/1" to form target if not present, so that saving the form jumps to view case page
            // Otherwise if it navigates to suite view, edit next case functionality wouldn't work
            if ($form.get(0).action.indexOf('/1', this.length - 2) == -1) {
                $form.get(0).action += '/1';
            }
        } else {
            sessionStorage.removeItem('editNext');
        }
    });

    // Add our checkbox to the UI (above "Add Test Case" button)
    $form.find('.button-group')
        .before($container);
});

#3

Thanks, Paul!

Regards,
Tobias


#4

Hi there,

The script above does not seem to work. Is this not supported on newer versions of TestRail?

Pratik


#5

Hi Pratik,

Thanks for your posting. There’s no updated version for the current TR version and we would usually advise against such complex UI scripts because they may break with TR updates. UI scripts are mostly meant for smaller things like adding a button to the UI and less for complex things like API requests and adding completely new functionality.

Cheers,
Tobias


#6

Hi Pratik,

Sorry, but I haven’t updated the script to work under new TestRail versions. Actually it’s been almost a year since I last worked with TestRail, and now I cannot help you.

You can try fixing it yourself though — you can examine TestRail JS code using browser developer tools, and the comments throughout the UI script may help.

With best regards,
Paul


#7

Thanks, Paul. I will examine JS code and see how it goes.