I'm using model based forms where my form looks like:
<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
<input type="text" formControlName="username">
<input type="password" formControlName="password">
<button type="submit" [disabled]="!form.valid">Submit</button>
</form>
I want to write a protractor spec to test the login. I would like to do something like the following in my spec:
element(by.formControlName('username')).sendKeys('[email protected]');
This obviously doesn't work so is there a way to locate by form controls or am I resigned to the fact that I have to put a class or ID on the input fields?
You can write a rather simple CSS selector:
element(by.css("input[formControlName=username]")).sendKeys('[email protected]');
Note that if you need to do this often, you can always define a reusable custom locator:
by.addLocator('formControlName', function(value, opt_parentElement, opt_rootSelector) {
var using = opt_parentElement || document;
return using.querySelectorAll('[formControlName="' + value +'"]');
});
Usage:
element(by.formControlName('username')).sendKeys('[email protected]');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With