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

[UI SCRIPT] Three pane view (test run) customization


I’m new to testrail, and my users ask me for some improvements on the three pane view during a run test:

  • hidding steps in description of the test
  • Have a way to go directly to the result tab and back top
  • Have the Add Result/ Pass next/ assign to on top of the test

I have made a custom UI SCRIPT for this, it’s a work in progress and very hacky :relaxed:, and I’m not used new to JS and JQuery, even less for CSS.
Maybe it will be useful for someone, or someone can show me a different way to do this.

name: 3 pane view customization
description: Copy add Result, pass next and assign button on top, add an arrow to go straight to the changes, and can hide and show steps by clicking on it
author: Bernard Chesnoy
version: 1.0
includes: ^runs

var stepsHidden=false;
var stepContentIdx=0;

function gotoChanges()
	var offset = $('#changes')[0].offsetTop - 120;
	$('#qpane-body').animate({ scrollTop:  offset  }, "fast");

function gotoTop()
	$('#qpane-body').animate({ scrollTop: 0 }, "fast");

	function() {
					if ($('#addResult').length && !$('#addResultTop').length)
						var steps= $('#qpane-body > div.field-title > span');
						if (steps.length)
						for (var i = 0; i < steps.length; i++)
							step = $(steps[i]);
							if (step.text() === 'Steps')
								stepContentIdx = i;
								$("#qpane-body > div.field-title").click( function() {
									if (stepsHidden)
										$($("#qpane-body > div.field-content")[stepContentIdx]).show();
										$($("#qpane-body > div.field-content")[stepContentIdx]).hide();
									stepsHidden = !stepsHidden;
						var div = $('<div></div>');
						var buttons = $('#addResult').parent();
						buttons.children().each(function () {
						var button = $(this);
						if (button.attr('id') && button.attr('id').indexOf('Timer') !== -1)
						button = button.clone();
						if (button.attr('id'))
							button.prop('id', button.attr('id') + 'Top' );
						$("#qpane-header .content-header-inner .content-header-title").append(div);
						var arrow = $('<a href="#" onclick="gotoChanges();return false;" class="link-tooltip" tooltip-text="Jump to the results of this test."><img src="images/icons/smallDown.png" width="10" height="10"></a>');
						$("#qpane-header .content-header-inner .content-header-title").prepend(arrow);
						var arrow = $('<a href="#"  onclick="gotoTop();return false;" class="link-tooltip" tooltip-text="Jump to the results of this test."><img src="images/icons/smallUp.png" width="10" height="10"></a>');
						$("#qpane-header .content-header-inner .content-header-title").prepend(arrow);

#qpane-header.qpane-header.content-header {
#qpane-header > div.content-header-inner {


Hi Bernard,

Thanks for sharing this! We would usually recommend against such large customizations as they will likely break with future TestRail versions and also won’t cover all edge cases. We are happy to look into adding more features to the three-pane view. Regarding the buttons: you can already use keyboard shortcuts for the most important actions (also with the three-pane view) and this is even faster than changing the button position:



thanks for the link, but my users don’t used shortcuts :frowning:
And don’t worry I’m perfectly aware in case of a new version It will not work anymore :smiley: