Targeting elements within an element directive with Protractor

Question

Consider the following view model:

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

and the following element directive:

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

which contains three input tags to display the data. How do I use protractor to populate the input fields by targeting ng-model="data.person"?

Answer 1

It depends on how you're getting data in/out of the inputs in the directive. However, in all cases you can chain together element(<locator>) calls to search for sub-elements of the directive:

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

If you're using ng-model in the directive itself on each of the inputs, you can do something like:

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'));

and then on each call sendKeys

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

If you're not using ng-model in the directive template, you can use other locators to find the sub elements, together with get if needs be, and depend on the order they're in the DOM

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

However, I suspect none of the above will work if you have replace: true specified in the directive, as it depends on the original element, with the ng-model attribute, being in the DOM.