A data attribute stores additional information on a standard HTML element without taking over the usual role of attributes such as id or name. For automated UI tests, a stable data-testid convention can identify elements independently of page layout and JavaScript or form implementation details. section 10.2.12
A test-oriented login form
Add dedicated identifiers to semantically important controls: inputs can use data-testid="email" and data-testid="password", while the submit button uses data-testid="login". WebDriver can then locate these controls through their data attributes instead of relying on layout, event-handling, or form-related attributes. section 10.2.12
Listing 10.1 Using a data attribute to identify a field
<div class="login-container">
<form [formGroup]="form" (submit)="login(form)">
<mat-form-field appearance="fill">
<mat-label>Email</mat-label>
<input id="email" data-testid="email">
</mat-form-field>
<br>
<mat-form-field appearance="fill">
<mat-label>Password</mat-label>
<input id="password" data-testid="password">
</mat-form-field>
<br>
<button type="submit" data-testid="login”>Login</button>
</form>
</div>
Inspect the complete login-form example showing data-testid values on fields and the submit button. section 10.2.12
