Protractor: How to test an element built with ngTagsInput? - angularjs

Question

I currently has a simple form that I am trying to test with Protractor. While it seems to work fine with basic input types, it does not seem to work with ngTagsInput the way I have it set up. I was wondering if there was a particular way of setting this up without triggering the error below.
Failed: unknown error: cannot focus element
(Session info: ...)
(Driver info: ...)
...
Currently my form, has 4 elements. A name (standard input), a type (radio buttons), targets (the tag inputs), and a submit button. In HTML, it appears something like this.
<div class="form-group">
<input class="form-control" placeholder="Enter name here..." ng-model="name">
</div>
<div class="form-group">
<div id="t1" class="radio">
<input name="radioType" id="a" value="A" checked="" type="radio" ng-model="type">
</div>
<div id="t2" class="radio">
<input name="radioType" id="b" value="B" type="radio" ng-model="type">
</div>
<div id="t3" class="radio">
<input name="radioType" id="c" value="C" type="radio" ng-model="type">
</div>
</div>
<div class="form-group">
<tags-input class="btags" name="targets" min-length=1 placeholder="Enter your targets here..." min-tags=1 add-on-blur="true" ng-model="targets">
</div>
<div class="form-group">
<button id="submit" type="button" class="btn btn-primary" ng-click="submitThing()"></button>
</div>
Lastly, the one Protractor test I have written looks like this.
it('should submit a valid thing',function(){
//Sets a name for the object
element(by.model('name')).sendKeys('user');
//Sets a type for the object
element(by.id('t1')).click();
/*Inputting tags (the functions below) seem to not work and throw an error*/
//Clicks (or focuses on) the tag input box
element(by.model('targets')).click();
//Types in the elements within it
element(by.model('targets')).sendKeys('target1');
//Presses Enter to submit that particular target
browser.actions().sendKeys(protractor.Key.ENTER).perform();
//Repeat for more
element(by.model('targets')).sendKeys('target2');
browser.actions().sendKeys(protractor.Key.ENTER).perform();
element(by.model('targets')).sendKeys('target3');
browser.actions().sendKeys(protractor.Key.ENTER).perform();
element(by.id('submit')).click();
}

Answer 1

The managed to find a solution thanks to MBielski's comment. It turns out that you need to look at the HTML that is rendered and focus on one of those elements since it is a custom element. Using Google Chrome's developer tools, I managed to find some of the inner code for the make up of the tags. In short, it appears as:
<input class="input" ng-model="newTag.text">
There is much more information in this inner element, but I left what was relevant. So, you add information into the tags inbox I've defined in the question asked, you would simply focus on the model called "newTag.text", like this.
it('should submit a valid thing',function(){
//Sets a name for the object
element(by.model('name')).sendKeys('user');
//Sets a type for the object
element(by.id('t1')).click();
//Clicks (or focuses on) the tag input box // This may not be needed
element(by.model('newTag.text')).click();
//Types in the elements within it
element(by.model('newTag.text')).sendKeys('target1');
//Presses Enter to submit that particular target
browser.actions().sendKeys(protractor.Key.ENTER).perform();
//Repeat for more
element(by.model('newTag.text')).sendKeys('target2');
browser.actions().sendKeys(protractor.Key.ENTER).perform();
element(by.model('newTag.text')).sendKeys('target3');
browser.actions().sendKeys(protractor.Key.ENTER).perform();
element(by.id('submit')).click();
}
This solved the problem for me. Hopefully it also does for others.