I am trying to identify an element in the following code to automate the input of a text field using protractor, any comments are much appreciated & here is the code,
<input ng-disabled="!cell.editable"
name="99286434"
class="form-control ng-pristine ng-valid ng-valid-required ng-touched"
ng-class="{'is-required':cell.field.required && !xxx.xxx.data}"
ng-model="xxx.xxx.xxx"
ng-change="dataChanged(cell)"
ng-required="cell.field.required"
ng-trim="false"
type="text">
Thanks in advance.
You can use by.model
element(by.model('xxx.xxx.xxx'))
or
element(by.css('input[ng-model="xxx.xxx.xxx"]'))
If both can't work, check the element inside a frame, add some sleep/wait prior to find the element.
Related
I have this text box element.
<input type="text" name="textbox" class="box-input ng-pristine ng-scope md-input ng-empty ng-valid ng-valid-required ng-touched" ng-required="field.required" ng-model="$ctrl.model[field.nameField.uuid]" ng-disabled="::field.readOnly" id="input_15" aria-invalid="false" style="">
In protractor how should I use it to locate the element? I am not quite sure how to use ng-model="$ctrl.model[field.nameField.uuid]"
If you are using angular 2 or above by model might not work for you, see here.
You could still use the model attribute to identify your element through css like so
$('[ng-model="$ctrl.model[field.nameField.uuid]"]')
or
element(by.css('[ng-model="$ctrl.model[field.nameField.uuid]"]'))
try like this
let input = element(by.model('$ctrl.model[field.nameField.uuid]'));
I suggest to use unique ID if its possible, or some unique class styles leading to single element.
Below is the tag for a password field in Login form.
Our guys used the same class name for EMail field also. Hence I cannot use className for password to locate it in protractor, since xpath and css(id design changes) are not reliable, what is the best option for me?
Tag for Email field:
<input class="native-input sc-ion-input-md" aria-labelledby="ion-input-0-lbl" autocapitalize="off" autocomplete="off" autocorrect="off" name="ion-input-0" placeholder="" required="" type="email">
Tag for password field:
<input class="native-input sc-ion-input-md" aria-labelledby="ion-input-5-lbl" autocapitalize="off" autocomplete="off" autocorrect="off" name="ion-input-5" placeholder="" required="" type="password">
For submit button:
<ion-button _ngcontent-rbh-c129="" type="submit" color="loginbutton ion-margin" class="ion-color ion-color-loginbutton ion-margin md button button-solid ion-activatable ion-focusable hydrated">Login</ion-button>
I don’t suggest you to go with ion-input properties since it’s Ionic related properties generated during the build process and it can be dynamic.
Use type instead since it is:
Obvious
Static
input[type="email"]
And
input[type="password"]
After some time you will have hard time understanding your own code and trying to recall what ion-input-0
refers to.
By css:
element(By.css('input[name="ion-input-0"][type="email"]')),
and:
element(By.css('input[name="ion-input-5"][type="password"]')),
i want to turn on the toggle button in protractor. below is the DOM
<input type="checkbox" id="UseRecipientList" ng-model="newProduct.useRecipientList" class="ng-pristine ng-untouched ng-valid">
<span>
::before
::after
</span>
if I identify the element by xpath, it is working fine. i have used, element(by.xpath("//input[#id='UseRecipientList']/following-sibling::span"));
if I want to go by ng-model, how to identify the span which comes after ng-model as above in protractor?
Use css as below
const locator= element(by.css('input#UseRecipientList > span'));
So the above locator help you to get the span as below
locator.getText();
To inspect using model name.Try the below one.
var input = element(by.model('newProduct.useRecipientList'));
For more on ng-model refer https://www.protractortest.org/#/api?view=ProtractorBy.prototype.model
Hope it helps you!!
Try with css locator
(by.css('[ng-model="newProduct.useRecipientList"] span'));
I want to read the default text inside an input text field. For Example: -
Reservation Text Value
I want to read - "Enter Reservation Number" from the input field. And I need to verify this text.
Here is the html value: -
<div class="input-field" ng-class="{'has-error': !$ctrl.isValid}">
<input id="reservation-number" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-maxlength" maxlength="30" required="" title="reservation-number" ng-blur="$ctrl.reservationModified($ctrl.reservationNumber);" ng-model="$ctrl.reservationNumber" type="text">
<label class="avoid-overlap ng-binding" for="resNumber"> Enter Reservations Number </label>
How can I read that using protractor?
I have tried these css value:-
element(by.css('.avoid-overlap.ng-binding').getText();
element(by.css('label.avoid-overlap.ng-binding').getText();
element(by.css('ng-pristine.ng-untouched.ng-empty.ng-invalid.ng-invalid-required.ng-valid-maxlength').getText();
getText() returns a promise.
See the documentation. An example explains how to solve it.
Thank you for the help. It is working now. I tried this code:-
element(by.css('[for="resNumber"]')).getText();
And It is working fine for me.
I want to get the text from the Read-Only text box.
This textbox contains a text that is system generated and hence its a non-editable field.
I tried the below code but not able to capture the text.
var expectedText = element(by.id('txt_ANNOUNCEMENTID')).getText();
Below is the HTML for the element:
<input name="ANNOUNCEMENTID" id="txt_ANNOUNCEMENTID" ng-focus="formName[name].hasFocus=true" ng-blur="formName[name].hasFocus=false; blur()" type="text" ng-model="ngModel" ng-required="" my-maxlength="" class="ng-pristine ng-valid-required ng-valid ng-not-empty ng-touched" ng-readonly="true" autocomplete="off" spellcheck="false" tabindex="1" ng-trim="false" readonly="readonly">
Any help on the above issue is highly appreciated.
You need to use getAttribute(value) instead of getText() when trying get the value from textbox.
In your case, it should be like element(by.id('txt_ANNOUNCEMENTID')).getAttribute("value");