使用量角器执行异步脚本的AngularJS测试 [英] AngularJS testing with Protractor- executing asynchronous scripts

问题描述

我正在开发一套自动化测试，以使用Protractor在AngularJS应用程序上运行.在执行此任务之前，我从未使用过自动化测试，因此对它的工作方式/如何实施测试等仍然不甚了解.

I am developing a suite of automated tests to run on an AngularJS application using Protractor. I have never used automated testing prior to working on this task, so am still quite unfamiliar with how it works/ how to implement the tests, etc.

我最近在实现自动单击对话框中的取消"按钮时遇到了麻烦，当其中一个测试浏览到特定页面时，该对话框会自动显示.

I recently had a bit of trouble with implementing an automated click on the 'Cancel' button of a dialog that was displayed automatically when one of the tests browsed to a particular page.

我现在已经成功单击了取消"按钮，但是由于异步回调的错误，测试脚本仍然失败.

I have now got the click to the 'Cancel' button working successfully, but the test script is still failing, due to an error with an asynchronous callback.

测试脚本的编写方式为:

The test script is written as:

it('should navigate to the Charts page', function(done) {
    console.log("Start Charts page test");
    browser.waitForAngularEnabled(false);
    browser.actions().mouseMove(chartsMenuBtn).perform();
    chartsMenuBtn.click();
    browser.waitForAngularEnabled(true);
    //browser.sleep(5000);
    browser.call(closeDlg);
    //var closeDlgFn = closeDlg();
    //browser.wait(closeDlgFn, 5 * 1000, 'Dialog should close within 5 seconds');
    console.log("End Charts page test");
    expect(browser.getCurrentUrl()).toBe('http://192.168.1.212:8080/#/charts');
});

和脚本中调用的 closeDlg()函数的定义如下:

and the closeDlg() function called within the script is defined with:

function closeDlg(){
    browser.waitForAngularEnabled(false);
    console.log("closeDlg() function called ")
    var EC = protractor.ExpectedConditions;
    var chartConfigForm = element(by.id('chartConfigForm'));
    var closeDlgBtn = element(by.id('editGraphCancelBtn'));
    console.log("About to click closeDlgBtn ");
    closeDlgBtn.click();
    console.log("just clicked closeDlgBtn ");
    console.log("End of closeDlg() function ")
}



    browser.call(closeDlg).then(function(){console.log("End Charts page test"); done();});

运行脚本时，会在命令行中获得以下输出:

When I run the script as it currently stands, I get the following output in the command line:

.开始图表页面测试

.Start Charts page test

最终图表"页面测试

-下一个命令:findElements

-- Next command: findElements

-下一个命令:mouseMoveTo

-- Next command: mouseMoveTo

-下一个命令:findElements

-- Next command: findElements

-下一步命令:clickElement

-- Next command: clickElement

closeDlg()函数称为

closeDlg() function called

关于单击closeDlgBtn

About to click closeDlgBtn

只需单击closeDlgBtn

just clicked closeDlgBtn

closeDlg()函数的结尾-下一个命令:findElements

End of closeDlg() function -- Next command: findElements

全部显示后，该对话框当前仍在浏览器中打开.当我继续进行测试时，在命令行中出现以下两个提示:

When this is all displayed, the dialog is still currently open in the browser. As I continue to step through the test, I get the next two prompts in the command line:

-下一个命令:clickElement

-- Next command: clickElement

最终图表"页面测试

-下一个命令:executeAsyncScript

-- Next command: executeAsyncScript

那就是关闭对话框的时间.

and that is when the dialog is then closed.

如果我随后继续执行测试脚本，则会失败:

If I then continue to execute my test script, I get a failure:

FA茉莉花规格超时.重置WebDriver控制流.

FA Jasmine spec timed out. Resetting the WebDriver Control Flow.

茉莉花规格超时.重置WebDriver控制流.

A Jasmine spec timed out. Resetting the WebDriver Control Flow.

失败:

1)应用程序应导航到图表"页面

1) App should navigate to the Charts page

消息:

错误:超时-jasmine.DEFAULT_TIMEOUT_INTERVAL指定的超时内未调用异步回调.

堆栈:

错误:超时-jasmine.DEFAULT_TIMEOUT_INTERVAL指定的超时内未调用异步回调.在ontimeout(timers.js:386:11)在tryOnTimeout(timers.js:250:5)在Timer.listOnTimeout(timers.js:214:5)

消息:

错误:超时-jasmine.DEFAULT_TIMEOUT_INTERVAL指定的超时内未调用异步回调.

堆栈:

错误:超时-jasmine.DEFAULT_TIMEOUT_INTERVAL指定的超时内未调用异步回调.在ontimeout(timers.js:386:11)在tryOnTimeout(timers.js:250:5)在Timer.listOnTimeout(timers.js:214:5)

5个规格，1个故障

在260.014秒内完成

Finished in 260.014 seconds

我在网上找到的所有内容似乎都表明我应该增加 jasmine.js 中的 j $ .DEFAULT_TIMEOUT_INTERVAL 变量的值，我已经完成了-我ve从10000(默认值)增加到500000.

Everything I have found online seems to indicate that I should increase the value of the j$.DEFAULT_TIMEOUT_INTERVAL variable in jasmine.js, which I have done- I've increased it from 10000 (default value) to 500000.

我还在我的 conf.js 文件中添加了 allScriptsTimeout 值:

I have also added an allScriptsTimeout value in my conf.js file:

exports.config = {
    framework: 'jasmine',
    seleniumAddress: 'http://localhost:4444/wd/hub',
    specs: ['spec.js'], // List all of the different files in which the tests are defined here
    allScriptsTimeout: 120000,
    onPrepare: function() {
        browser.addMockModule('disableModalAnimations', function(){
            angular.module('disableModalAnimations', []).value('foo', 'bar');
        });
    },
    multiCapabilities: {
        browserName: 'firefox'
    }
}

我不明白为什么会收到此超时错误?

I don't understand why I'm getting this timeout error?

我尝试将测试脚本中对 closeDlg()的调用更改为:

I tried changing the call to closeDlg() in the test script to:

browser.call(closeDlg).then(function(){console.log("End Charts page test"); done();});

，但仍然出现相同的错误.

but still get the same error.

我怀疑这个问题实际上是超时问题，但是我不确定我是否正确执行了异步脚本.

I doubt that the issue is actually a timeout issue, but I'm not sure about whether I am executing the asynchronous scripts correctly.

有人可以在这里发现我在做什么错吗?错误告诉我未在指定的超时内调用我的异步回调是什么?我正在做什么的哪一部分是异步的?

Can anyone spot what I'm doing wrong here? What is the Async callback that the error is telling me was not invoked within the timeout specified? What part of what I'm doing is asynchronous?

推荐答案

因此，在弄乱了很多代码之后，将&进行更改，尝试不同的方法，以及在线查看各种文章以获取有关如何执行此操作的建议，最后通过将测试的 expect 子句放在 .then()函数链接到对我的 closeDlg()函数的调用(并将其从测试的 it()级别中删除:

So after a lot of messing around with the code, chopping & changing, trying different approaches, and looking at various articles online for suggestions of how to do this, I finally got it working by putting the expect clause of my test inside a .then() function chained to the call to my closeDlg() function (and removing it from the it() level of the test:

it('should navigate to the Charts page', function() {
    console.log("Start Charts page test");
    browser.waitForAngularEnabled(false);
    browser.actions().mouseMove(chartsMenuBtn).perform();
    chartsMenuBtn.click();
    browser.waitForAngularEnabled(true);
    browser.call(closeDlg).then(function(){
        expect(browser.getCurrentUrl()).toBe('http://192.168.1.212:8080/#/alarms');
});

此测试现在可以正确通过，并逐步进行测试，我可以看到它按预期执行了命令，并产生了正确的结果.

This test now passes correctly, and following it through step by step, I can see that it executes the commands as expected, and produces the correct results.

这篇关于使用量角器执行异步脚本的AngularJS测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！