Provide a class or id on a field to easily identify in test

[blimmer]

Right now, it's difficult to confirm the presence of certain states on form groups. For instance, consider an email field with an error. Today, we get this:

<div id="ember486" class="ember-view form-group has-error">
  <label for="Email-Address" class="control-label">Email Address</label>
  <input id="Email-Address" class="ember-view ember-text-field form-control has-error" type="text">
  <span id="ember566" class="ember-view help-block">can't be blank</span>
</div>

Its hard to confirm the presence of the help-block with other inputs in the same form, because the outer form-group has no identifiable information on it. This requires a selector like this to ensure it's the help-block associated with the email-address input:

$('input#Email-Address ~.help-block')

It would be much easier if the outer form-group had an identifiable class or id to select. Then it would just be something like:

$('.form-group#email .help-block')

...or...

$('.form-group.email .help-block')

without using the more uncommonly used sibling selector.

This should be implemented on all components, including checkbox since, today, they're not uniquely identifiable.

[jelhan]

Even a bigger concern if you consider i18n. Label is mostly translated, which is used for input id. So you have to deal with translation issues just to identify your form fields in acceptance tests.

You could pass a class name in like this to use in your acceptance tests:

{{fm-field
  class='your-class-name'
}}