Struggling to retrieve the input value using protractor

Question

Struggling to retrieve the input value using protractor

Currently, I am in the process of developing an application using angularJS and testing it with protractor.

My main issue lies in verifying the value within an input field. Here is the specific input code:

<input id="rank-max-range" class="form-control has-feedback" name="inputMax" type="number" placeholder="Maximum" ng-model="selectedItem.range.max" min="{{selectedItem.range.min}}" max="{{selectedItem.answers.length}}">

Below is the test script that I'm trying to execute:

it('should fill the max range with the given value', function() {
  element(by.id('rank-max-range')).sendKeys(2);
  expect(element(by.id('rank-max-range')).getText()).toEqual(2);
});

However, this test is not functioning as expected. After consulting the documentation, I learned about the getAttribute('value') method. But unfortunately, my input does not have a value attribute.

I am curious if there is a way to validate the content of the ng-model, but so far, I have not found a solution.

If you have any suggestions on how I could successfully run this test, I would greatly appreciate your insight.

javascript angularjs selenium testing protractor

Answer 1

Answer №1

Typically, using `getAttribute('value')` should do the trick. `getText()` isn't effective in this case as input elements lack inner text.

expect(element(by.id('rank-max-range')).getAttribute('value')).toEqual(2);

It might be worth logging the result of `getAttribute('value')` to troubleshoot further.

Answer 2

Typically, using `getAttribute('value')` should do the trick. `getText()` isn't effective in this case as input elements lack inner text.

expect(element(by.id('rank-max-range')).getAttribute('value')).toEqual(2);

It might be worth logging the result of `getAttribute('value')` to troubleshoot further.

Answer 3

Answer №2

When attempting to retrieve the text with <code>getText()

, it may not work as expected when dealing with an input element, as the value is typically stored within the value attribute once it has been set. In the provided HTML snippet, the absence of the value attribute is due to this being raw source HTML before rendering and setting the value. To properly access the value in this scenario, you should use getAttribute('value'):

var numberInput = element(by.id('rank-max-range'));
numberInput.sendKeys("2");
expect(numberInput.getAttribute('value')).toEqual("2");

To visually confirm that the value is indeed being set, you can output the content by examining the innerHTML property in the console:

numberInput.sendKeys("2");
numberInput.getInnerHtml().then(function (html) {
    console.log(html);
});

If you're interested in verifying the contents of the ng-model, there is a method available for inspection.

You can utilize the evaluate() function to examine the model's value:

expect(numberInput.evaluate('selectedItem.range.max')).toEqual(2);

Answer 4

When attempting to retrieve the text with <code>getText()

, it may not work as expected when dealing with an input element, as the value is typically stored within the value attribute once it has been set. In the provided HTML snippet, the absence of the value attribute is due to this being raw source HTML before rendering and setting the value. To properly access the value in this scenario, you should use getAttribute('value'):

var numberInput = element(by.id('rank-max-range'));
numberInput.sendKeys("2");
expect(numberInput.getAttribute('value')).toEqual("2");

To visually confirm that the value is indeed being set, you can output the content by examining the innerHTML property in the console:

numberInput.sendKeys("2");
numberInput.getInnerHtml().then(function (html) {
    console.log(html);
});

If you're interested in verifying the contents of the ng-model, there is a method available for inspection.

You can utilize the evaluate() function to examine the model's value:

expect(numberInput.evaluate('selectedItem.range.max')).toEqual(2);

Struggling to retrieve the input value using protractor

Answer №1

Answer №2

Similar questions

Using ngFor and ngModel: What is the best way to add values to the beginning of the array I am looping through?

Dynamic ASP.NET script file

How to update the selected autocomplete item in Vue using programming techniques?

How can I attach an event listener to an element that is added dynamically with jQuery?

It appears that Three.js MeshPhongMaterial is not influenced by any light sources other than ambient lighting

arrow function implemented in a React hook for handling onClick event

The use of jQuery addClass does not produce any changes

The functionality of displaying a loading image when the Upload button is clicked has encountered a glitch and

How can I create an accordion panel that can be toggled using

Using JavaScript to compare two dates results in no output

Is there a way to ensure that res.render() is only triggered after the steps mentioned above have been completed?

Tips for positioning a modal in the center specifically for zoomed-in mobile devices

Is there a way to retrieve the value of an element by clicking on its corresponding button using MUI framework?

The ng-repeat directive fails to automatically refresh itself when a new item is added via a dialog box

Adorning a function with a technique that implements $http

Is it possible to execute TestCafe tests using TypeScript page objects that have not been utilized?

Is there a way for me to retrieve and save the user identification number from the URL during a Selenium test?

collecting JavaScript objects directed to console.log

Using local variables from an external HTML file within an AngularJS directive template

Child emitting to parent triggers an endless loop with a basic counter increment