Protractor Get Model Value - javascript

I am new to ProtractorJS.
What I am trying to do is trying to get the value of a disabled input element.
This input element is bound to a model. Initially this input element is empty; then after some action the model value is updated (and thus displayed in input element). I need to get that value, how can I do that ?
My input element is:
<input class="form-control ng-pristine ng-valid" style="font-size: 11px;" disabled="disabled" type="text" ng-model="Promotion.PrometricID">
I am trying to fetch value by:
element(by.model("Promotion.PrometricID")).getAttribute('value');
But whenever I write the value in console it gives me "[object] [object]".
Can anyone please tell me how to find value in this text box or in model ?

It is just because getAttribute() returns a promise.
You need to resolve it if you want to see the result on the console:
var elm = element(by.model("Promotion.PrometricID"));
elm.getAttribute('value').then(function (value) {
console.log(value);
});
FYI, exploring The WebDriver Control Flow documentation page should clear things up.

this way worked for me:
element(by.binding('Promotion.PrometricID')).getText().then(function (value) {
console.log(value);
})

My solution:
element(by.model('Promotion.PrometricID')).getText().then(function (value) {
console.log(value);
});

Same as the rest except with await
let text = await element(by.binding('Promotion.PrometricID')).getText();
console.log(text);

Related

Is there a way to clear the value attribute from input type="radio" in Playwright?

How do I literally clear the value (or turn it into null) from the following input using playwright (to make it empty, and not selected)?
<input
type="radio"
id="yes-in-hand"
value={true}
/>
From https://github.com/microsoft/playwright/issues/4924 I've tried to do something like:
await this.page.$eval('input[id="yes-in-hand"]', el => el.removeAttribute('value'));
And from https://playwright.dev/docs/api/class-locator#locator-fill:
await this.page.locator('input[id="yes-in-hand"]').fill(null); // or undefined - it throws an error: expect a string in .fill function
I also tried to use the locator.uncheck() method from https://playwright.dev/docs/api/class-locator#locator-uncheck as:
await this.page.locator('input[id="yes-in-hand"]').uncheck();
// It throws an error: locator.uncheck: Clicking the checkbox did not change its state
But it doesn't work and should have a proper way to do so that by just reading https://playwright.dev/docs/ I couldn't find.
Thank you.
From what I understand, you want to change the value of an attribute inside your Playwright project.
One good reference is the following issue where the use case was removing an attribute: https://github.com/microsoft/playwright/issues/4924
If we apply the same logic, we can use Element.setAttribute(name, value) to set the inputs attribute to false.
https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
So the example would be something like this:
const elementHandle = await page.locator(#yes-in-hand);
await elementHandle.evaluate(node => node.setAttribute('value', false));
const elementHandle = await page.locator(#yes-in-hand);
await elementHandle.evaluate(node => node.value = "false");

Angular uib typeahead, typeahead-is-open not working

I have a angular uib-typeahead. Here is a link to plunkr that I created.https://plnkr.co/edit/8XwhSXsZlyd0oKSljS9t?p=preview.
I have used typeahead-is-open property.
What I want is when I click on the uib-typeahead it should open and display all the values. I am assuming setting the typeahead-is-open to true does this job. Is this correct? Currently the typeahead does not open up on setting typeahead-is-open to true.
Here is my html
<input ng-click = "myFunc()" click-outside="typeaheadIsOpen = false;" type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" typeahead-is-open="typeaheadIsOpen" class="form-control">
My JS
$scope.myFunc = function() {
$timeout(function() {
$scope.typeaheadIsOpen = true;
$scope.$digest();
})
}
I have bound the typeahead-is-open to "typeaheadIsOpen" variable. On clicking on the typeahead I invoke myFuc() which sets the variable typeaheadIsOpen to true.
But the typeahead does not open. Is there something I am doing wrong?
It seems that you can't control whether the typeahead popup is shown or not using typeahead-is-open attribute. Here is the relevant part from source code:
UibTypeaheadController
//binding to a variable that indicates if dropdown is open
var isOpenSetter = $parse(attrs.typeaheadIsOpen).assign || angular.noop;
...
scope.assignIsOpen = function (isOpen) {
isOpenSetter(originalScope, isOpen);
};
This attribute is used to obtain expression used to update the scope when typeahead is open, but is not used to get value from scope and no relevant watcher is setup.
Sadly, I'm still using angularjs in 2021. I ended up finding a hack based on these threads on it
https://github.com/angular-ui/bootstrap/issues/6619
https://github.com/angular-ui/bootstrap/issues/759
Given a typeahead input
<input class="form-control address_input"
type="text"
typeahead-editable="true"
typeahead-on-select=...
In the controller in angular that handles this, I created a function like this
function _forceDropdownOpen() {
const controller = $(".address_input").controller('ngModel');
const old = controller.$viewValue;
controller.$setViewValue(old +' ');
controller.$setViewValue(old);
}
It simply mimicks adding space to the result and then removing that space.
Here is an example of my app before and after. My use case was after the third letter typed, my code sends an HTTP request. When that request returns, and if it has results, I call this method to open the dropdown.
Before: dropdown does not open until a fourth letter is typed
After: opens immediately on results

Angularjs xeditable not showing value in input field

I am using Angular-xeditable to update individual values on a view. Additionally, I am retrieving those values from a remote server, here is snippet:
$http.get('api/get-solution').success(function (data) {
$scope.goalSoluton = data['goal_planning_data'];
});
And this is what has been return from the remote server:
{age:"26" retirement:"0"}
In my HTML view I see that the object property value of age (which is 26) is displayed, Here is a snippet:
{{goalSoluton.age}}
But when I had clicked to edit that input field the value of 26 does not show up. Also, when I even entered a value in the input field and pressed the update button, the age property of the object did not update. Here is a snippet of the function:
$scope.update = function () {
console.log($scope.goalSoluton);
};
What am I doing wrong and thanks in advance.
You try to href get empty. . we used that. Maybe.

$watch or ng-model binding issue?

I basically have a very complicated set of tabs with various input controls but lets not worry about this for now. For now let consider simple input wtching issue I am baffled by.
For example:
<input type="text" placeholder="Associate some tags please" data-ng-model="tag" data-ng-maxlength="250">
I am try to detect if user has typed something into my input:
$scope.$watch('tag', function () {
//$scope.$watchCollection('tag', function () {
console.log('tag changed');
});
But I seem to get zero response. However, when I perform my save operation I always seem to get the value user typed in.
Is a case of ng-model not binding correctly or is it that I am not $watching it correctly?
Also after I've performed my save operation I try to clear what user typed in for the tag with:
$scope.tag = '';
But that doesn't seem to work for some reason as though $scope.tag doesn't exist.
PS: When I say save operation I am actually performing a array.push() into an object which later gets saved by a service.
For example:
$scope.checkSaveTag = function (tag) {
...
// checked for duplicate tag beforehand
$scope.myForm.Tags.push(tagObj); // complicated form object
$scope.tag = ''; // tag input control
...
};
Any chance that the tag is an object or an array? If that is the case, you'll need to do a deep $watch, e.g:
$scope.$watch('tag', function () {
console.log('tag changed');
}, true);
Try like this
Controller
$scope.form={
tag:''
}
$scope.$watch("form.tag",function(newVal,oldVal){
console.log(newVal);
})
Html
<input type="text" placeholder="Associate some tags please" data-ng-model="form.tag" data-ng-maxlength="250">

AngularJS one-way binding not working properly

I'm trying to bind an input (one-way), whoever if I change its value its no longer binding properly
//controller => on row click => change input
$scope.getNote = function (note)
{
$scope.currentNote = note;
};
//view
<input type="text" value="{{currentNote.Title}}" >
This is the scenario, getNote is being called and the input is being filled properly. However, when I change the value of the input and call getNote again the input doesn't show the new value even tho its value attribute contains the correct value. So somehow its not showing the correct value to the end user.
eg:
1- First Value from GetNote = "Hello World"
2- I change the value of the input to "Foo" as a normal user
3- Call GetNote again and the I get value="Hello World" but on the screen it displays "Foo"
Hack Solution:
//controller object value copy using jquery
$scope.currentNote = jQuery.extend({}, note);
//view
<input type="text" ng-model="currentNote.Title" >
Am hoping for an Elegant solution
I think you should try with ngValue directive, as sbaaaang said. But without curly braces (documentation here: https://docs.angularjs.org/api/ng/directive/ngValue).
Edit:
And maybe if you just want to use one-way data binding a div will be enough for your purposes, and not an input. Then you can style it as you want.
use ng-value="" instead of value="" should fix
i would do:
$scope.getNote = function (note)
{
$scope.currentNote = note;
};
//view
<input type="text" ng-model="currentNote.Title" ng-value="currentNote.Title" />
If you still getting problems try also:
$scope.getNote = function (note)
{
$scope.$on(function () {
$scope.currentNote = note;
});
};

Categories