Using Protractor with angular formly

Question

I have a project in angular using formly forms http://angular-formly.com/#/ and want to add some end to end testing using Protractor.

I can't select an element by the model since the form fields are defined in code not in template and when they are rendered they get different ng-model and I don't want to add specific classes since I have pretty big forms.

Is there a way to do it and test the forms rendered by Formly ?

Answer 1

One option would be to find all formly input elements, evaluate the model value and filter:

var formlyInputs = $$("input");

var desiredModel = "modelName";
var desiredInput = formlyInputs.filter(function (input) {
    return input.evaluate("model[options.key]").then(function (model) {
        return model === desiredModel; 
    });
}).first();

desiredInput.sendKeys("some text");

You may need to extend that to support not only the input elements, but other form elements a form might have.

---

Another solution would be to rely on the preceding label of an input:

var label = "Text";

var desiredInput = element(by.xpath("//label[normalize-space(.) = '" + label + "']/following-sibling::input"));
desiredInput.sendKeys("some text");