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

[UI Script] Colorize Test Step number box with result status


Based on this request:

name: Colorize Test Step number box with result status
description: Copies colors from the last test result (if present) to the test description. Also updates colors whenever new result is added
author: Paul Danyliuk
version: 1.0
includes: ^tests/view

$(document).ready(function() {

  var updateStepsColors = function() {

    // Get number labels from the last (topmost) steps in the history
    var lastSteps = $(".change:first-of-type .steps .step-index-inner");

    // If no last steps found, do nothing
    if (lastSteps.length == 0) {

    // Get number labels for the steps that need to be colorized
    var mainSteps = $(".field-content .steps .step-index-inner");

    // And copy the style (colors) over from the last steps to the main ones
    for (var i = 0; i < lastSteps.length; i++) {
      $(mainSteps[i]).attr('style', $(lastSteps[i]).attr('style'));

  // Call this as soon as the page loads

  // And call this whenever result is added
  $.subscribe('tests.changed', 'recolorize', function (data) {


The colors are updated when you add a new result.
Here’s how it will look:

With best regards,


Thanks again for taking the time to implement this, this looks really useful!