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并关注其中一个元素，因为它是一个自定义元素。使用谷歌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();
}

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

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

1 个答案: