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

Drop down list on Run page


I’d like to put a javascript drop-down choice list on the Run page to allow users to choose the browser to run the automation in. Your sample code contains this:

	/* Create the button */
	var button = $('<div class="toolbar content-header-toolbar"><a class="toolbar-button toolbar-button-last toolbar-button-first content-header-button button-start" href="javascript:void(0)">Run Automated Tests</a></div>');

Which works great to create a button which is then tied to an action.

Thing is, I’m not a javascript web developer, so I don’t yet understand how to add a drop down list to the same page using a similar approach. The html for a drop-down list is totally understandable, but I’m not clear as to where that would go in the UI script.

Internet Explorer Chrome

Huge thanks in advance for any hints. I’m wondering especially where the class names you use come from. Are there particular class names to format a select element?



Okay, I fiddled a bit more and have a good start with this:

[code]/* Create the browser choice dropdown */
var browser = $(‘

Internet ExplorerChrome

/* Add browser button to the toolbar */
$("#content-header .content-header-inner").prepend(browser);[/code]

That gets the drop down on the right page in the toolbar, but the styling/css does not match the rest of the app (minor issue).

Now to see if I can get it to pass the chosen value along with the ‘run automation’ request.


Hello Kent,

Thanks for your posting. We would usually recommend using the configuration feature to implement this and you can learn more about configurations with the following training video:

Test plans and configurations were specifically designed to test against multiple configurations or environments and TestRail would automatically create separate test runs for each configuration (such as browsers or operating systems). You can also query or pass the configuration as part of/to your test automation. I’m happy to provide the details on this if you are interested in using configurations.

Regarding the styling: select controls require/use the following CSS classes in TestRail:

<select class="form-control form-select" ..> </select>

I hope this helps and I look forward to your reply!



Okay, so I gave the select element an id of ‘browserSelect’ and then added the following to the existing button click js:

var select = document.getElementById("browserSelect");
var browserChoice = select.options[select.selectedIndex].value;

I append the browserChoice variable to the end of the url and then run with it in the php code on the receiving end. Works great! I can now choose the browser to run the automation on from the testrail gui.

I’m in some serious need of styling advice, however… :wink:


The video was informative, Tobias, thanks for pointing it out. I’ll see about getting this implemented in the near future, but for now we’re using TestRail primarily as a way of running our automation and tracking the results. As the company grows, however, we will definitely need the greater flexibility that the test plans and configurations will provide.


Thanks for the update, Kent, and great to hear that it works well. Please let us know in case any questions come up, we are happy to help!



As @tgurock said above, just add the class="form-control form-select" to your <select> element.
Also, as a general styling advice. Developers tools, which are present in every modern browser, are to the rescue :slight_smile: E.g. in chrome, navigate to any page with a dropdown (e.g. create case), press Ctrl+Shift+C (opens dev tools), click on a dropdown and explore the HTML (i.e. which classes are used). Same for any other UI components you’d ever like to add. Note, however, that the names of the classes may change eventually when TestRail developers refactor the page


Excellent advice, Actine. Thanks!