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

[UI Scripts] Add a new row that shows summary in test case table

Hi, I am trying to write an UI script that adds a new row at the bottom of each test case table.
The content of the row will be the total value of the columns of test resources(attended test time, unattended test time, manpower, etc…) Just like the attached picture.

Based on the introduction and examples provided in the TestRail Documentation, I plan to find out the CSS class name of the table, and then use Javascript to insert a new row and display the summary value. However, I can’t find any class name or related clue of the test case table in the HTML source of the Test Run pages. I used the title of the table and the name of test cases as key word to search in HTML but it shows no result. It it possible to modify the elements not shown in the HTML source code? Where can I find out the CSS class name or element ID when I’m making a UI script?

Any assistance would be highly appreciated, thanks!


I used the Developer Tool of Chrome and successfully found the class name and wrote a brief script as following:

name: Add row in Test Case table
description: Add row in test case table
author: whsu
version: 1.0

function() {
var sumrow = document.querySelector(’.selectable’).insertRow(-1);
var sumcell = sumrow.insertCell(0);
sumcell.innerHTML = “Test”;

However, the page just keep loading and show nothing when I activate the script and refresh the page. Does anyone have an idea why my script failed?