Ориентация элементов внутри директивы элемента с Транспортиром

Question

Рассмотрят следующий вид: модель

$scope.data = {}; 
$scope.data.person = {}; 
$scope.data.person.firstname = ""; 
$scope.data.person.lastname = ""; 
$scope.data.person.username = ""; 

и следующую директиву элемента:

<custom-form-directive ng-model="data.person"></custom-form-directive> 

, который содержит три входных тегов для отображения данных. Как использовать транспортир для заполнения полей ввода путем таргетинга ng-model="data.person"?

Answer 1

Это зависит от того, как вы» re получение данных в/из входов в директиве. Тем не менее, во всех случаях вы можете цепи вместе element(<locator>) звонки искать sub-elements директивы:

var directive = element(by.model('data.person')); 
var subElement = directive.element(by.<something>); 

Если вы используете ng-model в самой директиве по каждому из входов, вы можете сделать что-то вроде:

var directive = element(by.model('data.person')); 

// Assuming the inputs have attributes like `ng-model="firstname"` in the directive template 
var firstnameInput = directive.element(by.model('firstname')); 
var lastnameInput = directive.element(by.model('lastname')); 
var usernameInput = directive.element(by.model('surnamname')); 

, а затем при каждом вызове sendKeys

firstnameInput.sendKeys('Peter'); 
secondnameInput.sendKeys('Piper'); 
usernameInput.sendKeys('PickledPumpernickle'); 

Если вы не используете ng-model в Директива шаблон, вы можете использовать другие локаторы, чтобы найти вложенные элементы, вместе с get если потребности, и зависит от того, что они находятся в DOM

var inputs = directive.element(by.css('input')); 
var firstnameInput = inputs.get(0); 
var secondnameInput = inputs.get(1); 
var usernameInput = inputs.get(2); 

Однако я подозреваю, ни один из вышеперечисленных будет работать, если у вас есть replace: true, указанный в директиве, так как он зависит от исходного элемента, с атрибутом ng-model, находящимся в DOM.

Answer 2

Я думаю, вы хотите построить что-то вроде «pageObject» (см. https://github.com/angular/protractor/blob/master/docs/page-objects.md) для вашей директивы custom-form-directive. Этот объект поймет, как эта директива будет отображать примитивы, которые будет понимать Протрактор (например, конкретные поля ввода). Он должен взять локатор, чтобы его вызывающие лица могли передать, как найти директиву на странице, но после этого объект должен обрабатывать все.

var object = new customFormDirectiveObject(by.model('data.person')); 

в зависимости от того, как директива работает вы могли бы сделать что-то вроде:

object.setName(first, last, user); 

или если его более dyanmic может быть что-то вроде этого:

object.setName({firstname: first, lastname: last, username: user }); 

Answer 3

С помощью нескольких вспомогательных функций вы можете сделать это довольно легко. Вспомогательный объект просто обертывает транспортир и делает его более разумным и безопасным в использовании. Особенно при работе на удаленных системах.

var helper = { 
    getElement: function (selector) { 
    return element(by.css(selector)); 
    }, 

    resolveSelector: function (selector) { 
    var el; 
    if (typeof selector === 'string') { 
     el = self.getElement(selector); 
    } else { 
     el = selector; 
    } 
    return el; 
    }, 

    waitForElementClickable: function (selector) { 
    var el = self.resolveSelector(selector); 
    var condition = function() { 
     return self.waitForElement(el).then(function() { 
     return self.isElementEnabled(el); 
     }); 
    }; 
    return self.wait(condition, 15000, 'Element not clickable. (' + selector + ')'); 
    }, 

    setElementValue: function (selector, value) { 
    var el = self.resolveSelector(selector); 
    return self.waitForElementClickable(el).then(function() { 
     el.click().clear().sendKeys(value); 
    }); 
    }, 

    getElementValue: function (selector) { 
    var el = self.resolveSelector(selector); 
    return el ? el.getAttribute('value') : ''; 
    } 

} 

Тогда вы можете просто использовать обычные CSS селекторы, чтобы установить свои значения:

helper.setElementValue('[ng-model="data.person"] input:nth-child(1)', '1st Input Value'); 
helper.setElementValue('[ng-model="data.person"] input:nth-child(2)', '2nd Input Value'); 
helper.setElementValue('[ng-model="data.person"] input:nth-child(3)', '3rd Input Value'); 

И вы можете проверить ожидаемых значений с чем-то вроде этого:

expect(helper.getElementValue('[ng-model="data.person"] input:nth-child(1)')).toEqual('something') 

Answer 4

Это именно то, что метод оценки предназначен для: http://angular.github.io/protractor/#/api?view=ElementFinder.prototype.evaluate

element(by.model('data.person')).evaluate('data.person.firstname = "yourvaluehere"'); 

Я предполагаю, что с помощью «таргетинга на модель» вы хотите изменить значение контроллера и изменить директиву ng-model на представление, а не наоборот.