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