等待异步 Angular 任务在 11 秒后完成超时

Question

我是 Protractor 的新手，正在尝试为一个非常简单的场景编写测试用例：转到登录页面并提交表单，重定向到仪表板页面，然后单击仪表板上的搜索按钮。部分登录工作正常：

pages/login.js：

'use strict';

var LoginPage = function () {
    this.email = element(by.css('#email'));
    this.password = element(by.css('#password'));
    this.submit = element(by.css('[type="submit"]'));

    expect(this.email.isPresent()).toBe(true, 'Email field not found');
    expect(this.password.isPresent()).toBe(true, 'Password field not found');
    expect(this.submit.isPresent()).toBe(true, 'Submit button not found');
};

module.exports = new LoginPage();

test-spec.js：

it('should log in', function () {
        console.log('Logging into Application.');
        browser.get('https://example.com/auth/login');

        var loginPage = require('./pages/login');
        loginPage.email.sendKeys('myemail@example.com');
        loginPage.password.sendKeys('mypassword');
        loginPage.submit.click();

        console.log('Waiting to be redirected to the dashboard page...');
        return browser.driver.wait(function () {
            return browser.driver.getCurrentUrl().then(function (url) {
                return /dashboard/.test(url);
            });
        }, 30000);
    });

但是，当我尝试找到搜索按钮并单击它时...

pages/dashboard.js：

'use strict';

    var DashboardPage = function () {
        var elementFromSecondPage = $('a[href*="/property/search"]');
        console.log('trying to wait for element to be visible: ' + elementFromSecondPage);
        browser.wait(protractor.until.elementIsVisible(elementFromSecondPage), 60000, 'Error: Element did not display within 1 minute');
        console.log('done waiting');

        console.log('trying to find this.search element');
        this.search = element(by.css('a[href*="/property/search"]'));
        console.log('this.search: ' + this.search);

        expect(this.search.isPresent()).toBe(true, 'Search button not found');
    };

    module.exports = new DashboardPage();

test-spec.js：

it('should go to search', function () {
        console.log('Going to the Search page.');
        var dashboardPage = require('./pages/dashboard');
        dashboardPage.search.click();
    });

当试图找到搜索按钮时，它会出错：

登录上游。
正在等待重定向到仪表板页面...
转到“搜索”页面。
试图等待元素可见：[object Object]
等待完成
试图找到 this.search 元素 this.search: [object 对象]
失败：1）angularjs上游添加列表应该去搜索消息：失败：超时等待异步Angular任务在11秒后完成。这可能是因为当前页面不是 Angular 应用程序。请参阅常见问题解答以获取更多详细信息：https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular While waiting element with locator - Locator: By(css selector, a[href*="/property/search"])

这是我要搜索的元素的 html：

<a routerlinkactive="active" class="caret rpr-labeled-button rpr-labeled-button-search-alt active" href="/property/search">
...     
</a>

我尝试了多种不同的解决方案来尝试等待仪表板页面及其 DOM 加载，但无论如何我仍然收到此错误。这很令人困惑，因为如果您查看上面的输出，当我执行 jQuery 时会发现它成功加载了元素，所以它显然就在那里。

Answer 1

问题最终是@Gunderson 建议的。 Angular 正在进行连续（轮询）网络调用，因此 Protractor 从未将其视为“完成”加载。因此，无论我等待多长时间，每个 find 元素调用都会超时。

作为一个黑客，我使用这个命令来禁用等待：

browser.waitForAngularEnabled(false);

这行得通，但是，如果 Protractor 没有特殊的等待 Angular 应用程序，那么在另一个测试框架上使用 Protractor 有什么意义呢？然后，我们更改了我们正在测试的 Web 应用程序，以在对其运行测试时禁用轮询（通过登录页面上的查询字符串参数），然后一切都开始正常运行。

Answer 2

browser.wait() 所做的只是安排一个命令等待某个条件。您表示您的 JQuery 选择器 $('a[href*="/property/search"]'); 正在努力获取该元素。 一种可能的解决方法是创建您自己的函数，该函数具有自己的超时时间，并将使用该选择器查找元素并在找到元素后返回布尔值 true 或在超时时返回 false。

function waitForElem(){
   //JQuery timeout logic here
   if(elementFound){ return true}
   else{//after some time interval
         return false;
   }
}

然后在你的量角器代码中仍然使用browser.wait()

browser.wait(waitFormElem(), 60000, 'Error: Element did not display within 1 minute');

我为伪代码道歉，但我真的不知道 JQuery，看来你这样做了，我认为你有足够的信息来实现该逻辑

Answer 3

你可以使用这个库： https://www.protractortest.org/#/api?view=ProtractorExpectedConditions 等待元素有几个选项可见，可点击，包含一些文本，检查最适合你的。我通常会像这样等待元素可见：

var EC = protractor.ExpectedConditions;
browser.wait(EC.visibilityOf(element(by.css('a[href*="/property/search"]'))), 30000, "Element is not visible");