TSG HTML Standards - tsgrp/HPI GitHub Wiki

In order to write integration tests with a tool like selenium, we need to be able to easily access elements by their id. So as a rule of thumb if you would click on it with a mouse, or otherwise interact with the element it should get an id.

***Element IDS should be unique

Follow the pattern: {module} + {keyword}+{elementType} where *module is the filename *keyword is something that clearly illustartes the elements function *elementType is the type of element (btn, input, radio, etc)

This helps ensure uniqueness, and with readability. When you are looking at javascript (or a selenium test) and you see:

//GOOD
$('#login-username-input')....

You know immediately that the code is getting a handle on the username text field. And that if you do need edit the associated HTML, it is in a file called login.html.

vs

//BAD
$('#input')
//or
$('#uname')

It's unclear what exactly is being selected unless you are looking at the HTML at the same time. Also generic values like this are more likely to be used in other modules and can selection issues.

Take the login form (abridged):

<form class="login">
	<div class="login-field">
		<div class="border-wrapper">
			<input id="login-username-input" type="text" placeholder="Your Username" data-bind="value: username" autofocus />
		</div>
		<div class="clearfix"></div>
	</div>

	<div class="login-field">
		<div class="border-wrapper">
			<input id="login-password-input" type="password" placeholder="Your Password" data-bind="value: password"/>
		</div>
		<div class="clearfix"></div>
	</div>

	<div class="submit">
		<button type="submit" id="login-submit-btn" class="btn btn-hpi">Log In</button>
		<div class="loading" style="color:white" data-bind="visible: loading">Loading</div>
	</div>
</form>
'''