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

Failing to Highlight Specific Words (Given/When/Then)


#1

Hi all, so I found a UI Script to Highlight/Bold certain words(on this forum, i forget where though). (Specifically BDD words in Gherkin based language). IE: Given/When/Then/And/Or

Problem is it only highlights the FIRST instance of this word, IE And will be highlighted/bolded ONCE but after using it again it will appear normal. Any ideas? JS is not a language im super familiar with:

Code Below:

name: BDD Highlighting (Cucumber/Gherkin)
description: Highlights step definitions
author: 
version: 
includes: ^tests/view || ^cases
excludes: 

js:
var textArray = ["Given","When","Then","But","And","Feature","Scenario"];
var textArrayLength = textArray.length;

$(document).ready(function () {

for (var i = 0; i < textArrayLength; i++) {
$(".markdown:contains('"+textArray[i]+"')").each(function () {

var htmlString = $(this).html();
var newHtmlString = "";

if(textArray[i] == "Given") {
    newHtmlString = htmlString.replace(textArray[i], "<span class='green'>"+textArray[i]+"</span>");
} else if(textArray[i] == "When") {
    newHtmlString = htmlString.replace(textArray[i], "<span class='orange'>"+textArray[i]+"</span>");
} else if(textArray[i] == "Then") {
    newHtmlString = htmlString.replace(textArray[i], "<span class='blue'>"+textArray[i]+"</span>");
}   else if(textArray[i] == "Feature") {
    newHtmlString = htmlString.replace(textArray[i], "<span class='black'>"+textArray[i]+"</span>");
}  else if(textArray[i] == "Scenario") {
    newHtmlString = htmlString.replace(textArray[i], "<span class='black'>"+textArray[i]+"</span>");
} else {
    newHtmlString = htmlString.replace(textArray[i], "<span class='grey'>"+textArray[i]+"</span>");
};

$(this).html(newHtmlString);

});


}
});

css:
.orange {
color:orange;
font-weight: bold;
}

.green {
color:green;
font-weight: bold;
}

.blue {
color:#6A37FF;
font-weight: bold;
}

.grey{
color:grey;
font-weight: bold;
}

.black{
color:black;
font-weight: bold;
}

#2

Hi Matt,

Thanks for your posting! I just tested this and can confirm that only the first occurrence of a word is matched. I’m not too familiar with the Gherkin syntax, but most scripts would only include one occurrence per word, is this correct (except for And/Or maybe)?

You can also look into modifying the UI script and replace the replace call (which only replaces the first occurrence) with a way to replace all words. For example, the following will work just fine:

..
var re = new RegExp(textArray[i], 'g');

if(textArray[i] == "Given") {
    newHtmlString = htmlString.replace(re, "<span class='green'>"+textArray[i]+"</span>");
} else if(textArray[i] == "When") {
    newHtmlString = htmlString.replace(re, "<span class='orange'>"+textArray[i]+"</span>");
} else if(textArray[i] == "Then") {
    newHtmlString = htmlString.replace(re, "<span class='blue'>"+textArray[i]+"</span>");
}   else if(textArray[i] == "Feature") {
    newHtmlString = htmlString.replace(re, "<span class='black'>"+textArray[i]+"</span>");
}  else if(textArray[i] == "Scenario") {
    newHtmlString = htmlString.replace(re, "<span class='black'>"+textArray[i]+"</span>");
} else {
    newHtmlString = htmlString.replace(re, "<span class='grey'>"+textArray[i]+"</span>");
};
..

I hope this helps!

Cheers,
Tobias


#3

Thanks! I also do believe in Gherkin you can have multiple when/then’s/etc… (i may be wrong) But i’ll try this out! thanks!


#4

Thanks, Matt! Just let me know in case any further questions come up, I’m happy to help.


#5

Thanks for the script it works perfectly! Is there a way to highlight quoted word as a different colour using UIScript? e.g. When I press “Login”

Thanks

Alan


#6

Hi Alan,

Great to hear that! That’s not supported by the script out of the box, but you can simply use TestRail’s rich-text formatting for this:

http://docs.gurock.com/testrail-userguide/userguide-editor

For example, to highlight a word or make it italic, you can use the following syntax:

**bold**
*italic*

I hope this helps!

Cheers,
Tobias