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'));
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.
Current situation that is repeated several times:
<div ng-repeat="r in ids">
<span> DESIRED TEXT </span>
<div ng-repeat="c in ids">
<span> ng-bind-html="" UNDESIRED TEXT</span>
</div>
</div>
I tried using: element.all(by.repeater('r in ids')).all(by.tagName('span')).getText()
The problem is that this includes the second span as well. I would greatly prefer not to use xpath in the answer. So is there a way to specify only the first of each <span>, or to filter by not having ng-bind-html, etc?
Thanks!
Found a solution:
element.all(by.repeater('r in ids')).each(function (theElement, index) {
theElement.all(by.tagName('span')).first().getText().then(function (text){
console.log(text);
});
});
You can also use css selector to find the same:
element.all(by.css("div[ng-repeat='r in ids'] span")).getText();
Hope this helps.
Using Watir-webdriver I am trying to input an answer to a question that autocompletes as you type from a selection, I have searched all over the place for an answer but to no avail.
heres the snippet of code that i am trying to get some form of a id from so i can just inject into it ;)
<input type="text" data-bind="source: MultiOptionsList,events:{select:AutoSelect},value: AutocomplateText" data-text-field="Value" data-role="autocomplete" class="form-input k-input" style="width: 100%;" autocomplete="off" role="textbox" aria-haspopup="true" aria-disabled="false" aria-readonly="false" aria-autocomplete="list" aria-owns="" aria-busy="false">
Hope this makes sense, looking for something along the lines of "#browser.(:id => "blah").set "#{arg}""
Thanks Guys!
Given that this is the only autocomplete control on the page and the text field does not have any descriptive attributes, you could locate the element by its data-role attribute:
browser.text_field(:data_role => 'autocomplete').set('some text')
I have a repeating component in wicked which needs to be added and deleted as per the user requirement. The maximum number of component is predefined. So I am adding the components at start up and hiding and showing based on need. I am required to change the arrangement of the components in the HTML markup when there is any deletion of the component. I use JavaScript for this. I want to know if wicket would lose hold of the components if I do this.
<div wicket:id="borrowerTabs" id="borrowerTabs">
<span wicket:id="borrowerTab1" id="borrowerTab1" ></span>
<span wicket:id="borrowerTab2" id="borrowerTab2" ></span>
<span wicket:id="borrowerTab3" id="borrowerTab3" ></span>
<span wicket:id="borrowerTab4" id="borrowerTab4" ></span>
<button wicket:id="addBorrower" id="addBorrower" type="button"></button>
<button wicket:id="deleteBorrower" id="deleteBorrower" onclick="updateUIForDeleteBorrower()" type="button"></button>
</div>
If delete the borrowerTab3, contents inside borrowerTab4 will be replacing the contents inside borrowerTab3 and the model objects too will be swapped though I do not do a target.add(borrowerTab3). Now while form submission, I am not getting the values of the fields inside borrowerTab3.
I'm not sure if it helps but try component.setVisible(false) in your java code to hide it.