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.
Related
I have a long text 20 lines with HTML code that I need to use into a form test. For small texts I could use something like this:
browser.actions().mouseMove(element(by.id("field_bodytext")).sendKeys("BodyText <h2>Protractor</h2> Text1")).perform();
and it will work fine. But for 20 lines it does not. I have seen this information in Protractor API page, but can not see how to use it in my case:
http://www.protractortest.org/#/api?view=webdriver.WebElement.prototype.sendKeys
var form = driver.findElement(By.css('form'));
var element = form.findElement(By.css('input[type=file]'));
element.sendKeys('/path/to/file.txt');
form.submit();
There is an example for selenium that I do not see how to adapt: Selenium Webdriver enter multiline text in form without submitting it
This is the form field in Angular:
<div class="form-group">Wordhtml.com
<label class="form-control-label" jhiTranslate="jhipsterpressApp.post.bodytext" for="field_bodytext">Bodytext</label>
<textarea type="text" rows="10" cols="50" class="form-control" name="bodytext" id="field_bodytext"
[(ngModel)]="post.bodytext" required minlength="2" maxlength="65000">
<div [hidden]="!(editForm.controls.bodytext?.dirty && editForm.controls.bodytext?.invalid)">
<small class="form-text text-danger"
[hidden]="!editForm.controls.bodytext?.errors?.required" jhiTranslate="entity.validation.required">
This field is required.
</small>
<small class="form-text text-danger"
[hidden]="!editForm.controls.bodytext?.errors?.minlength" jhiTranslate="entity.validation.minlength" translateValues="{ min: 2 }">
This field is required to be at least 2 characters.
</small>
<small class="form-text text-danger"
[hidden]="!editForm.controls.bodytext?.errors?.maxlength" jhiTranslate="entity.validation.maxlength" translateValues="{ max: 65000 }">
This field cannot be longer than 65000 characters.
</small>
</div>
</textarea>
</div>
And the text to be inserted could be something like this:
<h2>What is JHipsterPress?</h2>
<ul>
<li>It is an open source and collaborative project made with Jhipster.</li>
<li>It is a live project that it is explained in its GitHub project. Explained? What do you mean? Whether you are a beginner that wants to find out an example about how to How to open access to the REST Api: or a more advance user who wants to see How to change DTOs to load attributes of not related entities: and see the actual code working, just visit the ReadMe file at GITHUB</li>
<li>And YES, you can use it for your own website.</li>
<li>At the same time JHipsterPress will try to create a community for Jhipster developers to join groups about different topics such as Websockets, Mapstruct, or anything you like.</li>
</ul>
<br />
Put the HTML in quotes `` as #lunin-roman is saying and then call it:
let htmltext = `<h2>What is JHipsterPress?</h2> and so on`;
element(by.id("field_bodytext")).sendKeys(htmltext);
and then use it in the element.sendKeys
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 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");
I am trying to get the filename of an uploaded picture to appear in the input field next to the picker button (for filepicker.io) . Basically I am trying to find what to put in the value field for the input tag to get the filename to appear once the picture is uploaded. Here is the code I have:
<div class="row margin" id='img-row'>
<input id="filename" disabled="disabled" value="<WHAT DO I PUT HERE?>" class="input" type="text" style="width: 360px;"/>
<input name="img" data-fp-class="form-simple-action-btn filepicker_launcher" data-fp-button-text="Choose Image" data-fp-services="COMPUTER,FACEBOOK,FLICKR,INSTAGRAM,PICASA" data-fp-container="modal" data-fp-mimetypes="image/*" type="filepicker" data-fp-apikey="#################" id='campaign-img-input' value="<php echo h($_POST['img'])"/>
</div>
Thank you for your help! I haven't found any other examples like this in the documentation.
The recommended way to do this would be to bind a function to the onchange event of the filepicker input type. Once the upload occurs, the function will be called, and you can pull the filename out of the e.fpfile attribute.
Alternatively, it may be easier to use the filepicker.pick call directly given that you are interested in customizing the behavior. The widget is great for a drop-in solution in many cases, but if you're looking to customize further I'd recommend using the javascript api directly.
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();
}