量角器是否适用于 Angular 材质对话框弹出窗口？答案

【问题标题】：Does protractor work with Angular material dialog popups?量角器是否适用于 Angular 材质对话框弹出窗口？
【发布时间】：2015-10-08 13:42:18
【问题描述】：

我正在尝试在量角器的弹出对话框中定位元素，但是一旦弹出对话框出现，我就会收到以下错误：

失败：未知错误：元素在点 (1204, 32) 处不可点击。其他元素会收到点击：...

我是角度和量角器的新手，我已经搜索过是否有类似的问题。 javascript:

it('should create a case and wait for the case page to load',  function(){
    casePage.goToCasesPage();
    var createCaseBtn = element(by.id("create-case-btn"));
    createCaseBtn.click();
    var stdCaseTypeBtn = element(by.css('[ng-click="vm.createCase($event, \'standard\')"]') );
    expect(stdCaseTypeBtn);
    stdCaseTypeBtn.click().then(function(){
        browser.getAllWindowHandles().then(function(handles){
            var popUpDialog = handles[1];
            browser.switchTo().window(popUpDialog).then(function(){
                var oeUtils = require('../common/utils');
                console.log("switched");

                //Fill the crud form and click create
                var caseTitle = element(by.model('case.title'));
                var caseDescription = element(by.model('case.description'));
                var okDialogBtn = element(by.id('create-case-dlg-btn'));

                var caseTxtTitle = oeUtils.generateRandomString(8);
                caseTitle.sendKeys(caseTxtTitle);
                caseDescription.sendKeys(oeUtils.generateRandomString(20));
                okDialogBtn.click();

                expect(element(by.binding('case["cm:title"]'))).getText().toEqual(caseTxtTitle);
            })
        });

    });

})

html 模板（实际弹出窗口）：

<md-dialog aria-label="Case edit dialog">
  <form name="form">
    <md-toolbar layout="row">
      <div class="md-toolbar-tools">
        <h2 ng-hide="editCase">{{ 'CASE.CREATE_CASE' | translate }}</h2>
        <h2 ng-show="editCase">{{ 'CASE.EDIT_PROPERTIES' | translate }}</h2>
      </div>
    </md-toolbar>
    <md-dialog-content style="max-width:800px;max-height:810px;min-width:20em;">

      <md-input-container>
        <label><span class="md-warn">*</span> {{ 'CASE.TITLE' | translate }}</label>
        <input type="text" ng-model="case.title" required focus-me>
      </md-input-container>

      <md-input-container>
        <label>{{ 'CASE.DESCRIPTION' | translate }}</label>
        <textarea ng-model="case.description"></textarea>
      </md-input-container>

    </md-dialog-content>
    <div class="md-actions" layout="row">
      <md-button id="create-case-dlg-btn" type="submit" class="md-primary" ng-click="vm.update(case)" ng-disabled="form.$invalid">
        {{ 'COMMON.OK' | translate }}
      </md-button>
      <md-button type="button" ng-click="vm.cancel(form)">
        {{ 'COMMON.CANCEL' | translate }}
      </md-button>
    </div>
  </form>
</md-dialog>

【问题讨论】：

您是否尝试使用getAllWindowHandles() 切换到对话框弹出窗口，看看您是否可以使用它执行操作？
我还没有遇到过这个功能。谢谢。我去看看
如果对您有帮助，这里有一个示例 - browser.getAllWindowHandles().then(function(handles){browser.switchTo().window(handles[1]).then(function(){//Perform your operations on the dialog pop-up})});
@GirishSortur 不高兴。错误仍然存在
上述量角器脚本中的哪一行准确地抛出了错误？

标签： javascript angularjs selenium jasmine protractor

【解决方案1】：

这可能会对你有所帮助。

以md-dialog为例：

<md-dialog aria-label="Page Preference Dialog" class="page-pref-dialog confirmation-dialog">
    <md-dialog-content class="dialog">`enter code here`
        <div class="dialog-body bold confirmation-dialog-body">
            <form name="confirmationForm">
                <div>
                    <h4>{{'Admin_viewQuestionnaire_popup_confirm_inactive'|translate}}</h4>
                </div>
            </form>
        </div>
        <div class="dialog-footer">
            <button type="button" id="admin_dialog_confirm_cancel" class="btn ink-reaction btn-primary" ng-click="cancelDialog()">{{"Admin_commonButton_button_cancel"| translate}}</button>
            <button type="button" id="admin_dialog_confirm_deactivate_user" class="btn ink-reaction btn-primary" ng-click="closeDialog()">{{'Admin_user_btn_viewUser_Deactivate'|translate}}</button>
        </div>
    </md-dialog-content>
</md-dialog>

测试用例：

    it( "view user", function () {
        browser.get( loginPageUrl );
        element( by.model( 'pageData.loginData.userName' ) ).sendKeys( adminUsername );
        browser.driver.sleep( 500 );
        element( by.model( 'pageData.loginData.userPassword' ) ).sendKeys( adminPassword );
        browser.driver.sleep( 500 );
        element( by.id( 'login-btn' ) ).click();
        browser.waitForAngular();
        element( by.id( 'admin_dialog_confirm_deactivate_user' ) ).click();
        console.log("success");
        browser.driver.sleep( 1500 );
    } );

【讨论】：