Protractor promises causing headaches when retrieving elements - angularjs

Question

Our web application has various html forms that each contain a list of form fields. Using Protractor, I'm looking for a way to retrieve the list of form fields: the field label, input type (textbox, select, radio, etc...), and input control (for setting the value later on). I then want to populate certain values for the fields in the form dynamically.
Here is the definition of the form field labels and the values I want to set:
this.fields = {
'Listing Agent': 1,
'Property Class': 1,
'Property Type': 2,
'Transaction Type': 'Sale',
'Ownership Terms': 'Sole Ownership',
'Listing Agreement': 'Yes',
'Display Listing on Internet': 'Yes',
'Display Address on Internet': 'Yes',
'Allow Automated Valuation on Internet': 'Yes',
'Allow Public Comment/Reviews on Internet': 'Yes'
};
I then retrieve the elements that match those field names by label text:
this.elements = form.find.allElements(this.fields);
When calling that method it retrieves the correct elements, but then I'm having trouble with setting the input type for each field. Checking the input type of a field returns a promise, not the actual value, so I can't figure out how to retrieve the input type for each element and then return an array of all of the elements.
this.find = {
allElements: function (fields) {
var items = [];
for (var key in fields) {
var el = element(by.cssContainingText('.sheet-grid-row', key));
this.getElementType(el).then(function (type) {
var item = {
type: type,
label: key,
isRequired: false,// TODO: el.getAttribute('class').indexOf('is-required-field') > -1
input: this.getElementInput(el, type)
};
items.push(item);
});
}
return items;// TODO: Doesn't work, of course...
},
getElementType: function (el) {
var deferred = protractor.promise.defer();
el.element(by.css('select')).isPresent().then(function (exists) {
if (exists)
deferred.fulfill(self.inputTypes.select);
else {
el.element(by.css('input[type="text"]')).isPresent().then(function (exists) {
if (exists)
deferred.fulfill(self.inputTypes.textbox);
else {
el.element(by.css('input[type="radio"]')).isPresent().then(function (exists) {
if (exists)
deferred.fulfill(self.inputTypes.textbox);
else
deferred.fulfill(self.inputTypes.unknown);
});
}
});
}
});
return deferred.promise;
},
getElementInput: function (el, type) {
switch (type) {
case self.inputTypes.select:
return new SelectWrapper(el.element(by.css('select')));
break;
case self.inputTypes.textbox:
return el.element(by.css('input[type="text"]'));
break;
case self.inputTypes.radio:
return el.element(by.css('input[type="radio"]'));
break;
}
return null;
}
};
At this point, I wish I could just get the native DOM elements and not deal with the promises at all. Is there a way to accomplish what I'm after?

Answer 1

You are trying to do asynchronous things element.isPresent() inside a synchronous loop for. You will want your allElements function to look more like this:
this.find = {
allElements: function (fields) {
var self = this;
var items = [];
var getItems = function(inputArray, currentIndex, outputArray) {
outputArray = outputArray || [];
currentIndex = currentIndex || 0;
var key = inputArray[currentIndex];
if (key) {
var el = element(by.cssContainingText('.sheet-grid-row', key));
return self.getElementType(el).then(function(type) {
var item = {
type: type,
label: key,
isRequired: false,// TODO: el.getAttribute('class').indexOf('is-required-field') > -1
input: self.getElementInput(el, type)
};
outputArray.push(item);
}).then(function() {
return getItems(inputArray, currentIndex + 1, outputArray);
});
} else {
return Promise.resolve(outputArray);
}
};
return getItems(Object.keys(fields));
},
getElementType: function (el) {
var self = this;
return el.element(by.css('select')).isPresent().then(function(exists) {
if (exists) {
return self.inputTypes.select;
} else {
return el.element(by.css('input[type="text"]')).isPresent().then(function(exists) {
if (exists) {
return self.inputTypes.textbox;
} else {
return el.element(by.css('input[type="radio"]')).isPresent().then(function(exists) {
if (exists) {
return self.inputTypes.radio;
} else {
return self.inputTypes.unknown;
}
});
}
});
}
});
},
getElementInput: function (el, type) {
switch (type) {
case self.inputTypes.select:
return new SelectWrapper(el.element(by.css('select')));
break;
case self.inputTypes.textbox:
return el.element(by.css('input[type="text"]'));
break;
case self.inputTypes.radio:
return el.element(by.css('input[type="radio"]'));
break;
}
return null;
}
};
Keep in mind that the output of find.allElements is now a promise, as it should be, so its usage will be something like:
this.find.allElements(this.fields).then(function(items) {
console.log('this is an array of my ' + items.length + ' items');
});