UI Scripts: Examples

This page provides a few examples on how to customize TestRail’s user interface with UI Scripts. It is recommended to read the UI Scripts introduction article first as it provides some background information on UI Scripts.

In addition to the examples below, we do have sample UI Scripts available in our public GitHub repository. You may find a script which already suits your needs or which only needs a few simple changes. You can find this repository here.

Highlight the administration pages

It may be nice to have a visual indicator on whether the current page is part of the administration pages, for example, by using a different background color in the title bar. This can easily be achieved with a fairly simple UI Script using just CSS.

Please see the following example for TestRail 4.0 and later:

name: Highlight administration pages
description: Changes the background of the user menu on admin pages
author: Gurock Software
version: 1.0
includes: ^admin

css:
#top .top-panel {
     background-color: #8B0000;
}

The example looks slightly different for TestRail 3.x:

name: Highlight administration pages
description: Changes the background of the user menu on admin pages
author: Gurock Software
version: 1.0
includes: ^admin

css:
#topBar {
     background-color: #8B0000;
}

Altering the Feedback link (TestRail 3.x only)

Some administrators might want to customize the Feedback link in TestRail, e.g. to change the link location or to remove it completely user interface. The following examples explain how to accomplish this using UI scripts.

Removing the link

By using jQuery in the JavaScript part of the UI Script, removing the Feedback link is a fairly easy job

name: Remove feedback link
description: Removes the feedback link from the user menu
author: Gurock Software
version: 1.0
includes: 
excludes: 

js:
$(document).ready(
     function() {
          $('#userMenu ul li:eq(1)').remove();
     }
);

This is also a good example on how to access distinct elements of the page by using jQuery selectors. The syntax for the selector could be read as “take the second (counting starts at zero) element of the #userMenu’s unordered list”.

Changing the target URL

Another option could be to change the feedback link location so that it points to an internal forum or help desk page instead of the official TestRail support forum:

name: Change feedback link
description: Changes the target URL of the feedback link
author: Gurock Software
version: 1.0
includes: 
excludes: 

js:
$(document).ready(
     function() {
	document.querySelector('.top-menu-highlight').classList.remove('dropdownLink');
	document.querySelector('.top-menu-highlight').href = 'http://internal-feedback-url;
     }
);

Hiding the chart on the dashboard

When dealing with a lot of projects you might want to hide the activity chart on TestRail’s dashboard so you can view more projects at once. The corresponding UI Script simply removes the chart from the page.

Please see the following example for TestRail 4.0 and later:

name: Hide dashboard chart
description: Hides the chart on the dashboard page
author: Gurock Software
version: 1.0
includes: ^dashboard
excludes:

js:
$(document).ready(
     function() {
          $('.chart-line:first').hide();
     }
);

The example looks slightly different for TestRail 3.x:

name: Hide dashboard chart
description: Hides the chart on the dashboard page
author: Gurock Software
version: 1.0
includes: ^dashboard
excludes:

js:
$(document).ready(
     function() {
          $('.lineChart:first').hide();
     }
);