I have trouble to locate the element using [(ngModel)]. This is angular2 syntax, I can not find any document for this.
<div class="form-group">
<label for="name">Summary</label>
<input type="text" class="form-control" [(ngModel)]="task.summary">
</div>
I tried multiple way to locate the elements, e.g.
var input = element(by.model('task.summary'));
input.sendKeys('123');
expect(input.getAttribute('value')).toBe('123');
But it failed with error Failed: unknown error: angular is not defined.
And I make it work with the following workaround, but I really want to use [(ngModel)] to locate the element.
var input = element.all(by.css('input'));
input.sendKeys('summary');
expect(input.getAttribute('value')).toBe('summary');
I also faced the same issue. I resolved as below. by.model does not support for more then Angular 2.0. So, I resolved using by.css properties.
element(by.css('[name="firstName"]')).sendKeys('Protector User');
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 have a typical problem with selenium Ide: [error] = * css Element not found.
I looked in the forum and I have seen very similar questions (eg, selenium-IDE-2.9.0 - [error] = li.xspPickerItem.xspPickerItemHover css Element not found), have tried to solve the problem with some of the suggested answers but I could not.
The details of my problem is as follows:
Log:
info] Executing: |click | css=input.select-dropdown.active | |
[error] Element css=input.select-dropdown.active not found
[info] Test case failed
HTML
(it contains several drop-down lists):
<div class="row" _ngcontent-pkb-13="">
<div class="col s2" _ngcontent-pkb-13="">
<label for="groupBy" _ngcontent-pkb-13="">Agrupado por</label>
</div> <div class="col s5" _ngcontent-pkb-13="">
<div class="select-wrapper form-control ng-untouched ng-pristine ng-valid initialized">
<span class="caret">/span>
<input class="select-dropdown" readonly="true" data-activates="select- options-32184002-bd89-baf2-43b8-3d88ae8219e5" value="Todo el territorio" type="text"></input>
<ul id="select-options-32184002-bd89-baf2-43b8-3d88ae8219e5" class="dropdown-content select-dropdown ">
<li class=""><span>Todo el territorio</span></li><li class=""><span>Instalaciones Deportivas</span></li><li class=""><span>Parroquias</span></li><li class=""><span>Polígonos Industriales</span>
(it shows a small part)
How you could select any item from the drop down ?, eg. "Parroquias"
Thanks
From the code you've posted you don't need the '.active' on the end of the locator, it should just be 'css=input.select-dropdown' However if you have multiple dropdowns this may not be the most efficient way of targetting them if they'd all have the same class. If you have control over the code you may want to add id's onto the dropdowns and use that for your target
As for getting it working, I can't get a working example on my machine as for it to appear as a dropdown you'd need your css, as you've coded it to just be a list but the css formats it as a dropdown, rather than using the 'select' tag. Normally you'd use the 'Select' command in Selenium, targetted at the dropdown, rather than a click command but I'm not sure if it would work with the way this page is coded as I've not come accross it before (my instinct would be no) so it probably would be the click on the dropdown as you're trying, then a click on the specific list item.
The bootstrap validator plugin helps validating the form fields providing a bunch of cool features. One of those features are the feedback icons, which defaults to glyphicon.
Suppose I want to replace glyphicon with font awesome.
The documentation says they can be changed by passing a "feedback" JSON object as data attribute or via JavaScript.
Via JavaScript it's easy. But as data attribute, it is unclear where and how exactly add it, because simply adding:
feedback: {
success: 'fa-check',
error: 'fa-times'
}
as data attribute to the <form> or the <div class="form-group"> or the <input> itself it doesn't work.
After some time struggling with it, I realized that the JSON feedback object should be added to the element and also it needs to be added using this syntax (which was not specified in the docs):
<form ... data-feedback='{"success": "fa-check", "error": "fa-times"}'>
Note the quotes syntax.
Also, if we are not just changing the glyphicon but replacing it with a font-awesome one (like in my example), in the <div class="form-group"> we need to replace:
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
with:
<span class="fa form-control-feedback" aria-hidden="true"></span>
This is not very well documented, and I could not make it work. I ended up using a different form validator which accomplish the same functionality and it's easier to configure success/error formats using bootstrap classes:
var validator = $('#submitForm').validate({
validClass: "is-valid",
errorClass: "is-invalid",
jQuery Validator
I’m having a hard time figuring out how to iterate over a ControlArray that contains Controlgroups in a template. In TypeScript, so far I have created the ControlArray, and by iterating over data received from a remote service, I added a few ControlGroups to the array. Everything fine up to this point, and I can see the expected data structure in the console.
In the template, I have this:
<div *ngFor="#c of categories.controls">
<div ngControlGroup="c">
</div>
</div>
... where categories is the ControlArray (which holds an array of ControlGroups in its controls property). When I leave out the inner <div>, I don’t get an error, which suggests that Angular agrees with me that categories.controls is indeed an array. But as soon as I re-add the inner <div> (where I expect the local variable c to be one of the objects in the array), I get an exception with message “Cannot find control 'c' in [c in ]”. Also, I tried various other syntactical approaches, but none of them worked. In addition to a “Cannot find control …” method I also got “Cannot find a differ supporting object …”, but that didn’t take me any further.
Any hints regarding what I’m doing wrong?
ngControlGroup is defining a new control group. If I understand your question correctly, you want to actually be editing items within a control group inside a control array. Check out this plnkr: https://plnkr.co/edit/3gM2TuMGBW13HNATUcCO
<div *ngFor="#c of categories.controls; #i = index">
Control group {{i}}:
<div>
<input type="text" class="form-control m-b" [ngFormControl]="c.controls.title"/>
<input type="text" class="form-control m-b" [ngFormControl]="c.controls.id"/>
</div>
</div>
One error is
ngControlGroup="c"
which doesn't do any binding. It passes the literal c to ngControlGroup. It should be:
[ngControlGroup]="c"
The errors that are still produced after this fix seem because there are no controls.
Error is resolved by changing
ngControlGroup="c"
into
attr.ngControlGroup="c"
Because by assigning c to ngControlGroup you are just assigning the value instead of any binding. but strange why [ngControlGroup] still produces some error.apart from these here is working example
https://plnkr.co/edit/Yw21a1aSivNg4G6gYkhF?p=preview