量角器：如何测试使用 ngTagsInput 构建的元素？答案

【问题标题】：Protractor: How to test an element built with ngTagsInput?量角器：如何测试使用 ngTagsInput 构建的元素？
【发布时间】：2017-04-27 18:46:08
【问题描述】：

我目前有一个简单的表格，我正在尝试使用 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>

最后，我写的一个量角器测试是这样的。

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

【问题讨论】：

对不起，我输入了这个，而不是复制和粘贴。但是，是的，它是 by.model()。我修正了问题的详细信息。
没有。这是当前页面上唯一的内容。
您需要查看呈现的 HTML 并专注于其中一个元素。自定义元素无法获得焦点。

标签： angularjs protractor ng-tags-input

【解决方案1】：

感谢 MBielski 的评论，他们设法找到了解决方案。事实证明，您需要查看呈现的 HTML 并关注其中一个元素，因为它是自定义元素。使用谷歌浏览器的开发者工具，我设法找到了构成标签的一些内部代码。简而言之，它表现为：

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

这解决了我的问题。希望它也适用于其他人。

【讨论】：