使用Protractor进行AngularJS测试 - 如何关闭一个自动打开的对话框以继续测试？

问题描述

我正在为我公司的一个软件产品开发一套自动化测试。该软件是使用AngularJS编写的，我使用Protractor开发测试。

I am developing a suite of automated tests for one of my company's software products. The software has been written using AngularJS, and I am using Protractor to develop the tests.

我目前正在为应用程序的导航编写一组测试，并且根据标准正确执行/失败的所有测试数量。

I am currently writing a set of tests for the navigation of the application, and have number of tests implemented which all pass/ fail correctly depending on the criteria.

但是，我正在编写一个测试，用于导航到应用程序的某个特定页面， （图表），但是当您第一次浏览到此页面时，会自动打开一个对话框，以允许用户创建新图表/配置现有图表。作为用户，我通常只需在此对话框上按取消即可关闭它，然后继续浏览该页面。

However, I am currently working on writing a test for navigating to one particular page of the application, (Charts), but when you first browse to this page, a dialog is automatically opened to allow the user to create a new chart/ configure an existing chart. As a user, I would normally just press 'Cancel' on this dialog in order to close it, and continue to the page.

我遇到的问题是尝试复制单击对话框的取消按钮作为自动测试脚本的一部分。

The issue I'm having is trying to replicate the clicking of the 'Cancel' button for the dialog as part of the automated test script.

我写的所有测试当前都在同一个文件中，所以他们一个接一个地运行，例如：

All of the tests I have written are currently in the same file, and so they run one after the other, for example:

/*Test that 'Alarms' menu item works correctly */
it('should navigate to the Alarms page', function() {
    console.log("Start Alarms page test");
    browser.waitForAngularEnabled(false);
    browser.actions().mouseMove(alarmsMenuBtn).perform();
    alarmsMenuBtn.click();
    console.log("End Alarms page test");
    expect(browser.getCurrentUrl()).toBe('http://192.168.1.212:8080/#/alarms');
});

/*Test that 'Charts' menu item works correctly */
it('should navigate to the Charts page', function() {
    console.log("Start Charts page test");
    var EC = protractor.ExpectedConditions;
    var chartConfigForm = element(by.id('chartConfigForm'));
    browser.waitForAngularEnabled(false);
    browser.actions().mouseMove(chartsMenuBtn).perform();
    chartsMenuBtn.click();
    browser.waitForAngularEnabled(true);
    browser.wait(EC.visibilityOf($('#chartConfigForm')), 10000)
    browser.call(closeDlg);
    console.log("End Charts page test");
    expect(browser.getCurrentUrl()).toBe('http://192.168.1.212:8080/#/charts');
});

/*Test that 'Export' menu item works correctly */
it('should navigate to the Export page', function() {
    browser.waitForAngularEnabled(false);
    browser.actions().mouseMove(exportMenuBtn).perform();
    exportMenuBtn.click();
    expect(browser.getCurrentUrl()).toBe('http://192.168.1.212:8080/#/export');
});

我遇到问题的测试是上述三项中的一项。

The test that I'm having trouble with is the middle one of the three above.

当我从命令行运行测试时，当我逐步完成脚本时，我最终得到以下输出：

When I run the test from the command line, as I step through the script, I eventually get the following output:

- 下一个命令：executeScript

-- Next command: executeScript

- 下一个命令：isElementDisplayed

-- Next command: isElementDisplayed

.Start Alarms page test

.Start Alarms page test

End Alarms page test

End Alarms page test

- 下一个命令：findElements

-- Next command: findElements

- 下一个命令：mouseMoveTo

-- Next command: mouseMoveTo

- 下一个命令：findElements

-- Next command: findElements

- 下一个命令：clickElement

-- Next command: clickElement

- 下一个命令：getCurrentUrl

-- Next command: getCurrentUrl

。开始图表页面测试

结束图表页面测试

- 下一个命令：findElements

-- Next command: findElements

- 下一个命令：mouseMoveTo

-- Next command: mouseMoveTo

- 下一个命令： findElements

-- Next command: findElements

- 下一个命令：clickElement

-- Next command: clickElement

- 下一个命令：executeAsyncScript

-- Next command: executeAsyncScript

- 下一个命令：executeScript

-- Next command: executeScript

- 下一个命令：executeScript

-- Next command: executeScript

FA Jasmine spec超时。重置WebDriver控制流程。

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

- 下一个命令：findElements

-- Next command: findElements

- 下一个命令：mouseMoveTo

-- Next command: mouseMoveTo

- 下一个命令：findElements

-- Next command: findElements

在测试中，我有一个电话我专门编写的一个函数来关闭该页面上显示的对话框，并在它之前添加了一个 browser.wait（...）以确保该对话框具有在我尝试关闭之前有时间加载：

Within the test, I have a call to a function I have written specifically to close the dialog that appears on that page, and have added a browser.wait(...) before it to ensure that the dialog has had time to load before I try to close it:

browser.wait(EC.visibilityOf($('#chartConfigForm')), 10000)
browser.call(closeDlg);

closeDlg（）函数定义为：

function closeDlg(){
    console.log("closeDlg() function called ")
    var EC = protractor.ExpectedConditions;
    var chartConfigForm = element(by.id('chartConfigForm'));
    browser.wait(EC.visibilityOf($('#chartConfigForm')), 10000)
    var closeDlgBtn = element.driver(by.id('editGraphCancelBtn'));

    browser.waitForAngularEnabled(true);
    console.log(closeDlgBtn.click());
}

我添加了对 browser.wait（。 ..）在这个函数中，为了确保在我尝试关闭对话框之前有时间加载，但由于某种原因，我的控制台显示一条消息，指出Jasmine规范已经超时，并且运行测试的浏览器会在对话框打开的情况下卡在图表页面上（其他测试都无法运行，因为在关闭对话框之前其他页面元素将无法访问）。

I added the call to browser.wait(...) within this function, to ensure that the dialog had had time to load before I tried to close it, but for some reason, my console shows a message stating that a Jasmine spec has timed out, and the browser in which the tests are being run gets stuck on the 'Charts' page with the dialog open (none of the other tests can run, as the other page elements won't be accessible until the dialog is closed).

如何确保我的测试脚本实际上保持对话框的取消按钮，然后点击它？

How can I ensure that my test script actually gets hold of the dialog's 'Cancel' button, and clicks it?

编辑

我刚刚注意到我运行的控制台 webdriver-manager start 显示当此测试调用我的 closeDlg（）函数时抛出了错误：

I have just noticed that the console where I ran webdriver-manager start is showing that an error has been thrown when my closeDlg() function is called by this test:

In控制台我运行量角器conf.js 开始运行我的测试脚本，当我看到e debug：

In the console where I ran protractor conf.js to start running my test scripts, when I see the debug:

我运行的控制台 webdriver-manager start （单独的控制台）显示了相当长的错误消息和堆栈跟踪，其中一部分表示：

the console where I ran webdriver-manager start (separate console) shows quite a long error message and stack trace, part of which says:

看来这个问题可能与Angular /有关量角器同步......？如何解决此问题？

It appears that this issue is possibly something to do with Angular/ Protractor synchronisation...? How would I resolve this issue?

推荐答案

您可以在运行测试时禁用对话框动画。

You can already disable dialog animations while running your tests.

在protractor.conf.js中：

In protractor.conf.js :

exports.config = {
 onPrepare: function() {
  browser.addMockModule('disableModalAnimations', function() {
   angular.module('disableModalAnimations',
   []).config(['$uibModalProvider', function($uibModalProvider) {
    $uibModalProvider.options.animation = false;
  }]);
 }
}

这将避免你 browser.wait（...）

这篇关于使用Protractor进行AngularJS测试 - 如何关闭一个自动打开的对话框以继续测试？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！