Protractor 单页应用测试答案

【问题标题】：Protractor Single Page application testProtractor 单页应用测试
【发布时间】：2017-07-05 19:45:51
【问题描述】：

在 Angular JS 单页应用程序中，ui 路由器被配置为根据应用程序的状态更改视图内容 (<ui-view></ui-view>)。

我们如何在量角器中测试更改的视图内容（页面）？进行页面源视图时不显示视图内容。页面加载正确，但量角器找不到页面元素。

<head>
    <title> Test Application</title>
</head>
<body>
    <div class="wrapper">
        <div class="container">
            <ui-view></ui-view>
        </div>
    <div>
<body>

<ui-view></ui-view> 内部的片段代码

<div class="form-group">
<label for="firstName" class="ng-scope">First Name</label>
<input type="text" id="firstName" name="firstName"  ng-model="customer.firstName">
</div>

Protractor 找不到 by.model 的元素。

describe('Protractor Demo App', function() {
        browser.get('http://example.com');//url
        it("Test..", function() {
        element(by.model('customer.firstName')).sendKeys('FIRSTNAME');
        element(by.model('customer.lastName')).sendKeys('LASTNAME');
       });
    });

【问题讨论】：

当您在例如 Chrome 中使用开发工具时，您应该会看到插入到 <ui-view> 中的 html，您是否也可以在此处粘贴来自开发工具的一段代码，所以我们可以进一步帮助您解决您的问题吗？
能否请您包含量角器测试中的代码

标签： angularjs angular-ui-router protractor

【解决方案1】：

它可能在加载元素之前就在寻找元素，因此丢失了它们。尝试使用protractor.ExpectedConditions。例如：

describe('Protractor Demo App', function() {
    browser.get('http://example.com');
    it("Test..", function() {
        var el = element(by.css('.form-group'));
        var EC = protractor.ExpectedConditions;
        browser.wait(EC.presenceOf(el), 10000).then(function(){
            element(by.model('customer.firstName')).sendKeys('FIRSTNAME');
            element(by.model('customer.lastName')).sendKeys('LASTNAME');
        });
    });
});

在尝试填写输入之前，它会等待最多 10 秒的时间让 .form-group div 出现在页面上。

【讨论】：

堆栈：ElementNotVisibleError：元素不可见
这些元素所在的页面有多大？当量角器正在寻找元素时，它是否足够大以至于元素不在视口中？