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

$(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>");

  $(".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>");

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

.gherkinHeader {
    font-weight: bold;

.gherkinStep {
    font-weight: bold;

.gherkinOutlineVarBraces {
    font-weight: bold;

    font-weight: bold;
    font-style: italic;

    font-weight: bold;

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

Here’s a formatted example:


Hi Brian,

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

Hi there! I would love to make it work but I can’t. I copied and applied exactly your UI script but I can’t get it to work. We are using TestRail Cloud (currently v6).

I must be missing something…


Did you wrap the gherkin sections of your test in …?

Alright. I’ve got it to work. I was missing the … wrapper. sorry for the noise. kudos to you for it!

My goodness, I never checked the markdown. I didn’t realize it was reformatting my text. Yes, you need to wrap your gherkin text in <gherkin>...</gherkin>

1 Like