How to insert a long text using the sendKeys Protractor API? - protractor

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

Related

How to locate multiple text element within class in Protractor?

For on my test i need to verify highlighted text (Lexington, KY) using my protractor test.
<li id="address" class="list">
<div class="content">
<small class="mb-1">
<span>
Suite # 278
<br>
</span>
**Lexington, KY**
</small>
</li>
How to verify highlighted text using css OR cssContainingText locator?
Actually Protractor creators have put great documentation in place , and pls read it thoroughly to gain good knowledge on usage of css & cssContainingText. I will answer your question in short here - Use element(by.cssContainingText('.content','Lexington'))
UPDATE 1:
In case you want to add an assertion .. do this - expect(element(by.cssContainingText('.content','Lexington'))).toContain('Lexington, KY')
For one I am confused because it seems like you are never closing the content div...is it closed after the li is closed?
Anyway...I would simply change the HTML so that you don't need some crazy convoluted mess of a selector. I would do it like this:
<li id="address" class="list">
<div class="content">
<small class="mb-1">
<span>
Suite # 278
<br>
</span>
<cityState>Lexington, KY</cityState>
</small>
</li>
function checkCityState(){
return element(by.tagName('cityState')).getText();
}
expect(checkCityState()).toBe('Lexington, KY');

Input field with validation crashes when typing fast in Angular 2

I have a form in Angular 2 with a simple validation using Validators.
The html template
<form role="form" #myForm="ngForm" (ngSubmit)="submit()" novalidate [ngFormModel]="form">
<div class="form-group list-element">
<label for="name">name*</label>
<input type="text" name="name" class="form-control" ngControl="name"
#name="ngForm" placeholder="Enter name" [(ngModel)]=user.name >
</div>
</form>
The ControlGroup for the validation
ngOnInit() {
this.form = new ControlGroup({
name: new Control('', Validators.compose([
Validators.required,
Validators.pattern("(([a-zA-Z ]|[0-9])+)*"),
Validators.minLength(5),
Validators.maxLength(80)
]))
});
}
When I type fast (random) characters in the input field (e.g #1KZBZKBjkndedjk###kjbzdzdékj!) the application crashes. This does not happen always so I have not really noticed a pattern.
This is the place where the crash happens, so I think the crash has something to do with the pattern.
That's a known issue https://github.com/angular/angular/issues/7822 and will probably be fixed when this pull request lands https://github.com/angular/angular/pull/7421
First of all this is not related to AngularJS.
This happens because your pattern is wrong I don't know what pattern you need but for example if you need to validate email then use this pattern
& Just Check for your pattern nothing else.
your code....
Validators.pattern("^[_a-z0-9]+(.[_a-z0-9]+)#[a-z0-9-]+(.[a-z0-9-]+)(.[a-z]{2,4})$"),
your code ends...
That it!

TYPO3 merge list and edit

I've got a TYPO3 backend module which lists a lot of elements. Now, I want to include in my list the edit form, but that doesn't work well at the moment.
Rendering is good, but if I send the form, I get the error:
Required argument "note" is not set.
My code looks like this:
<f:for each="{notes}" as="note">
<f:form action="update" name="note" object="{note}">
<textarea class="form-control gettooltip" rows="1" placeholder="Kommentar" title="Kommentar zur Note">{note.kommentar}</textarea>
</f:form>
</f:for>
How can I merge these two views correctly?
Your code cannot work because your textarea doesn't have a property (or you don't use the <f:form.textarea ViewHelper).
If you property map $note in your controller, the property must be passed to Fluid with the prefixed extension name and plugin name. This is done automatically when using the "property" argument of the textarea ViewHelper. The name attribute will then be:
<textarea name="tx_myext_myplugin[note]"...
Thîs will map to $note in the controller.
So if you don't use the ViewHelper, you need to manually prefix the name attribute to create an output like printed just above.
If you're planning to update multiple objects of the of the same kind in one request, this won't because because there is an Extbase limitation.
You could do the following:
Use a submit button for each note and save/reload the changes through AJAX.
<f:for each="{notes}" as="note">
<f:form action="update" name="note" object="{note}">
<f:form.textarea class="form-control gettooltip" placeholder="Kommentar" property="kommentar">{note.kommentar}</f:form.textarea>
<f:form.submit value="Update" />
</f:form>
</f:for>
Then you intercept the submit click, submit the form through AJAX and set the new content to the textarea.
If you want to have one form for all objects, you will need to prefix the fields
<f:form action="update" name="note">
<f:for each="{notes}" as="note">
<f:form.textarea class="form-control gettooltip" placeholder="Kommentar" name="note[note{note.uid}][kommentar]">{note.kommentar}</f:form.textarea>
</f:for>
<f:form.submit value="Update" />
</f:form>
You will then have an array of values and need to iterate in your controller and manually persist the changes.
For your problem - as #lorenz answered you need to use viewhelpers for rendering fields OR at least use valid name attributes for your fields...
Anyway, I'm wondering why do you want to reinvent the wheel - especially while creating BE modules, the fastest, easiest and most elegant way is... using TYPO3 forms. They handle many things, relations, localization, validation, RTE etc, etc. What's more you can also add own type of field to TCA and process with your own PHP and JS - very rare situation, but may be used i.e. for adding GoogleMap field,
#see: user type in TCA
Finally all you need to open the record from your BE module is creating proper link - which can be easily copied from List module (right click on the yellow pencil next to your record and copy the code), sample:
<a href="#" onclick="window.location.href='alt_doc.php?returnUrl='+T3_THIS_LOCATION+'&edit[fe_users][1234]=edit'; return false;" title="Edit user">
<span title="" class="t3-icon t3-icon-actions t3-icon-actions-document t3-icon-document-open"> </span>
</a>
Where fe_users is table name and 1234 is record uid.
alt_doc.php?returnUrl='+T3_THIS_LOCATION part handles returning to the place from which edit was started, so it will be your module again including all GET params selected by admin before editing.
For creating new user
<a href="#" onclick="window.location.href='alt_doc.php?returnUrl='+T3_THIS_LOCATION+'&edit[fe_users][6789]=new'; return false;" title="New record">
<span class="t3-icon t3-icon-actions t3-icon-actions-document t3-icon-document-new"> </span>
</a>
In this case 6789 is a PID (uid of the page where the user should be created...
You can even set some default values when creating records from your own module using params in your new link:
&defVals[table_name][field_name]=value
sample
<a href="#" onclick="window.location.href='alt_doc.php?returnUrl='+T3_THIS_LOCATION+'&edit[fe_users][6789]=new&defVals[fe_users][tx_extbase_type]=Tx_MyExt_People&defVals[fe_users][usergroup]=1'; return false;" title="New record">
<span class="t3-icon t3-icon-actions t3-icon-actions-document t3-icon-document-new"> </span>
</a>

laravel: when submitting form encoded in UTF-8 it is converted to java data type

I am using laravel 4.2. Im learning laravel and find myself caught up in one problem and I have tried in many forums and I haven't found the answer anyware.
My problem is as follows:
I have this form embeded in a php view file:
{{Form::open(['route'=> 'home.store'])}}
<div class="container col-xs-5 ">
<form class="form-horizontal">
<div class="form-group col-xs-8">
<!-- Split button -->
<div class="btn-group">
<select name="country" class="btn btn-success dropdown-toggle" >
<option disabled selected>Escoger País</option>
<option>Argentina</option>
<option>Bolivia</option>
<option>Chile</option>
<option>Colombia</option>
<option>Costa Rica</option>
<option>Cuba</option>
<option>Ecuador</option>
<option>El Salvador</option>
<option>Guatemala</option>
<option>Honduras</option>
<option>México</option>
<option>Nicaragua</option>
<option>Panamá</option>
<option>Paraguay</option>
<option>Perú</option>
<option>Puerto Rico</option>
<option>Uruguay</option>
<option>Puerto Rico</option>
<option>República Dominicana</option>
<option>Venezuela</option>
</select>
</div>
</div>
</div>
{{Form::close()}}
Now, in home.store I have:
$user-> country = Input::get('country');
This is meant to be stored in a database table with a field named "country" that is of type ENUM with the same options as the form. It works perfectly when I pick options without ansi character codes. However when I choose the option that contains a spanish tilde (´),that is set in ansi code, they cannot get stored in the database.
Now, to check what is getting as input I used in home.store :
return Input::all();
And it ouputs:
{"_token":"ofyHW7ElogegKJwMXQL3HsbugCSnRxbtkm0GVQ8y","country":"Per\u00fa"}
I can recognize the problem as: acsii code &#250 is translated to java \u00fa.
I have checked everywhere in the framework (FormBuilder.php and HtmlBuilder.php)to see if something is being defined as java in laravel but everything is set to UTF-8, so as the database, and so as the meta tag in the html view (the browser is set to utf-8 too)
I would greatly appreciate anyone help on this.
Thank you so much.

when using angular nested form, the first inner form can not be referred in scope

When form is nested, the first inner form can not be referred in the controller scope.
I have created a minimal test to reproduce this issue at Plunker
angular version: 1.2.16
Browser: Chrome, Safari
What's the problem? is there any way to remedy?
I recommend a book called Mastering Web Application Development with AngularJs
There's a section called nesting forms and there it says that you have to nest the forms with ng-include. like so:
<script type="text/ng-template" id="password-form">
<ng-form name="passwordForm">
<div ng-show="user.password != user.password2">
Passwords do not match
</div>
<label>Password</label>
<input ng-model="user.password" type="password" required>
Creating Advanced Forms
[ 158 ]
<label>Confirm Password</label>
<input ng-model="user.password2" type="password" required>
</ng-form>
</script>
<form name="form1" novalidate>
<legend>User Form</legend>
<label>Name</label>
<input ng-model="user.name" required>
<ng-include src="'password-form'"></ng-include>
</form>
We define our subform in a partial template. In this case it is inline in a script block
but it could be in a separate file also. Next we have our container form, form1,which
includes the subform by using the ngInclude directive.
The subform has its own validity state and related CSS classes. Also, notice
that because the subform
I have found a workaround for this issue, just replace outer form tag with ng-form tag then the first inner form is added to the scope. see this plunker