UI QA Automation Tags
HTML Data-* attributes will be used to define custom properties/attributes to enable some level of automation for our QA tests.
data-orb-qa-id is the only property defined so far. It contains a string providing identification
for its tag.
The snippet below provides some examples
<!-- topmost container, head, or header element -->
<!-- defines the entity name, and also an #action -->
<header data-orb-qa-id="sink#add"></header><!--Sink entity, add page-->
<!-- This attr. just informs there is a breadcrumb content here -->
<xng-breadcrumb class="orb-breadcrumb"
data-orb-qa-id="breadcrumb"></xng-breadcrumb>
<!-- This is a step inside a stepper component -->
<!-- Indexed, iterable tags, such as those inside a list or any other compreehension
of lists can be *postfixed* with `_$d` index number. -->
<nb-step [label]="firstStepTemplate"
[stepControl]="firstFormGroup"
data-orb-qa-id="step_1"></nb-step>
<!-- In dynamic forms, `data-orb-qa-id` can be bound to a variable-->
<input *ngSwitchCase="'text'"
[type]="control.type"
[formControlName]="control.prop"
[attr.data-orb-qa-id]="control.prop">/><!--notice the form `[attr.data-orb-qa-id]`-->
<!-- While binding a value to the attribute, we may print it in nicer way -->
<mat-chip-list data-orb-qa-id="tagList">
<mat-chip
class="orb-tag-sink "
*ngFor="let tag of thirdFormGroup.controls.tags.value; index as i"
[attr.data-orb-qa-id]="'tag_' + i">
{{ tag | keyvalue | tagchip}}
</mat-chip>
</mat-chip-list>Mozilla Reference for data-* tags
