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

6.0 Version Execution status visualization

Hello,

and thank you for the 6.0 version update. It looks really nice, but, in my opinion the new way to see the test case execution status is small, less intuitive than before, and sometimes could confuse the user because the proximity of test identifier color.

Status color

The previous version, if I remember well had all the title bar with the status colored and it was very easy to know the test case status directly.

Could you increase the size of the main status of the test case or something similar as the previous version?

Thank you in advance.

+1 to this suggestion.

This is how the previous version was shown:
Previous Version

Hey there,

Thank you so much for the detailed feedback! I’ve passed this up to the development team and we’ll look into better ways to visualize the status for your tests for future updates. I can’t give any estimates on a timeframe for when that might be available, but for now updating the title bar or enlarging the status indicator should be possible through a UI Script. We wouldn’t be able to provide an example for how to set that up specifically, but if you’d like try it out, you can check out our guide on UI Scripts here:

http://docs.gurock.com/testrail-custom/uiscripts-introduction

Hope that helps! Please let us know if you have any additional feedback or questions and we’ll be happy to help.

Please let us know if you have any other questions

Thank you very much for your detailed answer.

I’m going to explore the script option to have a more clear information.

Hi,

I understand your concerns but we also received favorable feedback on this change so it will stay. Fortunately, we have the powerful feature of custom UI scripts, so it is very easy to adapt details of the user interface.
To help users with this change I compiled two small UI scripts that revert the appearance to the classic, pre-6.0 style, where the background of the title bar has the full color, see the screenshots for details:

Overview (in the pane on the right):

Detail view:

To improve the contrast for the buttons on certain background colors, this script uses a not-yet-released class (‘body.dark’, ‘body.modern’, ‘body.classic’) that will be available in one of the next releases – once it is released, you will get that change automatically.

Detail view (with additional formatting for legibility):

Disclaimer: Use at your own risk. This script comes with no additional support. Keep in mind any other CSS based UI scripts you may already have.

Copy each of scripts in the following sections into a new UI script on your TestRail instance:

Classic status style in overview
name: Classic status style in overview
description: Reverts the status to the classic full-title-bar design
author: Gurock Software
version: 1.0
includes: ^runs
excludes: 

css:
#qpane-header {
    position: sticky;
    z-index: 0;
}

#qpane-header .content-header-inner > .content-header-result {
    border-radius: 0;
    border: 0;
    height: 44px;
    margin: -10px 0 0 -15px;
    width: 100%;
    position: absolute;
    z-index: -1;
}

/* IE11-specific exceptions */

_:-ms-lang(x),
.content-header-id,
.content-header-icon,
.content-header-title {
    position: relative;
    z-index: 2;
}

_:-ms-lang(x),
#qpane-header {
    position: relative;
}
Classic status style in detail view
name: Classic status style in detail view
description: Reverts the status to the classic full-title-bar design on the detail page
author: Gurock Software
version: 1.0
includes: ^tests
excludes: 

css:
#content-header {
    position: sticky;
    z-index: 0;
}

#content-header .content-header-inner > .content-header-result {
    border-radius: 0;
    border: 0;
    height: 44px;
    margin: -10px 0 0 -15px;
    width: 100%;
    position: absolute;
    z-index: -1;
}

body.dark #content-header .content-header-inner {
    background: linear-gradient(90deg, transparent 40%, #202020 60%);
}

body.modern #content-header .content-header-inner {
    background: linear-gradient(90deg, transparent 40%, #eaf1f7 60%);
}

body.classic #content-header .content-header-inner {
    background: linear-gradient(90deg, transparent 40%, #fff 60%);
    padding: 10px 15px;
}

/* IE11-specific exceptions */

_:-ms-lang(x),
.content-header-id,
.content-header-icon,
.content-header-title {
    position: relative;
    z-index: 2;
}

_:-ms-lang(x),
#content-header {
    position: relative;
}

@jbarrio and @jmrg82 Please let me know if this solves your issues and if you find that helpful.

Thanks,
David