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");
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.
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.
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 have a form with aria-describedby attributes on the input alements, followed by a span tag with a description/example of the desired input. It also has class to only display for screenreaders (sighted people can make use of the placeholder information instead).
The issue here is that, according to Fangs at least, the screenreader reads the label, then prompts for input, then reads the aria-describedby text.
Can I move the text above the input in the code, e.g.
<label for="givenName">Given name</label>
<span id="givenNameHelp" class="help-block sr-only">e.g. Liam</span>
<input class="form-control" type="text" id="givenName" placeholder="Liam" aria-describedby="givenNameHelp">
Yes, this is perfectly legitimate and will work with all screen readers
okay so i have this page im making, the navigation panel is simple, when i click a link according the the link name it appends the html into the content area, here is the append script for this section
So my goal is where the input box is the ID datepicker im trying to use the jQueryUI datepicker function from jQuery, i tested a regular input box in the actual BODY and not through the append method and it works fine, my issue is im guessing the single vs the double qoutation marks, the ' vs "
how can i solve this issue?
else if (this.id == "tour"){
$("#content").empty();
$("#content").append("<p>\
<h2> Add Tour Dates </h2>\
<form action='tourdates.php' method='post'>\
<input type='text' name='title' placeholder='Title' id='title'>\
<input type='text' name='venueName' placeholder='Vanue Name' id='venueName'>\
<input type='text' name='venueStreetAdress' placeholder='Location Street Adress' id='venueStreetAdress'>\
<input type='text' name='venueCity' placeholder='City' id='venueCity'>\
<input type='text' name='venueState' placeholder='State' id='venueState'>\
<input type='text' name='venueZip' placeholder='Postal Code' id='venueZip'>\
<input type='text' name='datepicker' id='datepicker'>\
<input type='text' name='time' placeholder='Time' id='time'> </p>\
");
If you have a strong feeling that there's something to do with your quotation mark, try to narrow down the problem: Have you tried to put this in a separated variable and make the reference there?
var htmlStuff = "<p>\
<h2> Add Tour Dates </h2>\...";
$("#content").append(htmlStuff);
But I don't think your problem is related to double/single quotes, but with the asynchronous operation of setting up a link to append HTML and try to assign an UI widget before the components exist in the DOM.
Although I find this very bad for code readability, one option would be to append another call to a function that defines the DatePicker (like a "callBack") right after your append. It should work, e.g.:
$('something').append(" <html stuff> ").defineDatePicker();
function defineDatePicker(){
$('one of the elements within that html stuff').datepicker();
}