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

Gherkin Syntax UIScript

Greetings all!
I have been working in Gherkin/BDT test development for a very long time and just recently joined a company where our tests are managed in TestRail. I was a little disappointed that there wasn’t native support for the Gherkin syntax, but also not very surprised. All the other test-management software I’ve used before didn’t have native support either.

I was very happy to discover UIScript support, so I wrote this Gherkin Linter to properly format all of our Gherkin content.

What it does:

  • Formats any text wrapped in … (done in the text fields)
    • This automatically highlights any <parameter> in your text
    • Pipe tables are properly colored
    • Any other variables you want highlighted need to be book-ended with ‘$’ (e.g. $myvar$)
  • Auto-indents your Gherkin

What it doesn’t:

  • Auto-space your pipe-tables, you will need to do that yourself
  • Multiple tests in a single text box. There is an issue with how TR formats multiple newlines that breaks the script right now

Here is the UIScript:

name: Gherkin Linter
description: Lints Gherkin syntax
author: Brian Fitzsimmons
version: 1.0
includes: ^tests/view || ^cases
excludes: 

js:
$(document).ready(function () {

  $(".markdown").each(function () {
    var string = $(this).html();    
    string = string.replace(/\r\n|\n\r|\n|\r/gm, "");
    string = string.replace(/(\&lt;gherkin\&gt;.*)<\/p><p>(.*\&lt;\/gherkin\&gt;)/g, "$1<br><br>$2");
    string = string.replace(/(\<br\>)*\&lt;(\/?gherkin)\&gt;(\<br\>)*/g, "<$2>");
    $(this).html(string);
  });

  $(".markdown gherkin").each(function () {
    var string = $(this).html();
    
    //format the headers in pipe tables
    if (string.includes("Examples:")) {
      var oldExamplesHeader = string.replace(/.*\n*.*Examples:[^|]+(\|[^<]+).*/gm, '$1').replace(/\r\n|\n\r|\n|\r/gm, "");
      var newExamplesHeader = oldExamplesHeader.replace(/\|([^<|]+)/g, "|<span class='gherkinExamplesHeader'>$1</span>").replace(/\r\n|\n\r|\n|\r/gm, "");
      string = string.replace(oldExamplesHeader, newExamplesHeader);
    }

    string = string.replace(/\&lt;([^&]*)\&gt;/g, "<span class='gherkinParameter'>&lt;</span><span class='gherkinExamplesHeader'>$1</span><span class='gherkinParameter'>&gt;</span>");
    string = string.replace(/\|([^<|]+)/g, "|<span class='gherkinParameter'>$1</span>");
    string = string.replace(/<br>(\s*)(Given|When|Then|And)/g, "<br>  <span class='gherkinStep'>$2</span>");
    string = string.replace(/(\s*)(Feature:|Scenario:|Scenario Outline:|Examples:|Background:)/g, "<span class='gherkinHeader'>$2</span>");
    string = string.replace(/<br>\s*\|/g, "<br>    |");
    string = string.replace(/\|/g, "<span class='gherkinHeader'>|</span>");
    
    string = string.replace(/\$([^\$]+)\$/g, "<span class='gherkinParameter'>$1</span>");
    
    $(this).html(string);
  });

  $( ".markdown gherkin" ).wrap( "<pre></pre>" );
});

css:
.gherkinHeader {
    color:red;
    font-weight: bold;
}

.gherkinStep {
    color:blue;
    font-weight: bold;
}

.gherkinOutlineVarBraces {
    color:purple;
    font-weight: bold;
}

.gherkinParameter{
    color:green;
    font-weight: bold;
    font-style: italic;
}

.gherkinExamplesHeader{
    color:purple;
    font-weight: bold;
}

.markdown gherkin{
    font-family: monospace;
    font-size: 14px;
}

Here’s a formatted example:

2 Likes

Hi Brian,

Thank you so much for this contribution! This could really useful for many teams. Definitely had to bookmark this for future reference.