angularjs - Protractor:如何测试使用 ngTagsInput 构建的元素？

Question

我目前有一个简单的表单，正在尝试使用 Protractor 进行测试。虽然它似乎适用于基本输入类型，但它似乎不适用于 ngTagsInput我的设置方式。我想知道是否有一种特殊的方法可以在不触发下面的错误的情况下进行设置。

Failed: unknown error: cannot focus element
(Session info: ...)
(Driver info: ...)
...

目前我的表单有 4 个元素。名称(标准输入)、类型(单选按钮)、目标(标签输入)和提交按钮。在 HTML 中，它看起来像这样。

<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>

最后，我编写的一个 Protractor 测试如下所示。

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

感谢 MBielski 的评论，我们成功找到了解决方案。事实证明，您需要查看呈现的 HTML 并关注其中一个元素，因为它是自定义元素。使用 Google Chrome 的开发者工具，我设法找到了一些用于组成标签的内部代码。简而言之，它显示为:

<input class="input" ng-model="newTag.text">

这个内部元素中有更多信息，但我留下了相关的内容。因此，您将信息添加到我在所提出的问题中定义的标签收件箱中，您只需关注名为“newTag.text”的模型，如下所示。

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();
}

这解决了我的问题。希望对其他人也同样如此。