单击模式对话框中的其他任何位置以关闭下拉列表

Question

<mat-dialog-container aria-modal="true" class="mat-dialog-container ng-tns-c41-301 ng-trigger ng-trigger-dialogContainer ng-star-inserted" tabindex="-1" id="mat-dialog-1" role="dialog" aria-labelledby="mat-dialog-title-1" style="transform: none;" css="1"><!--bindings={
  "ng-reflect-portal": ""
}--><app-create-opportunity _nghost-c42="" class="ng-star-inserted"><form _ngcontent-c42="" action="" novalidate="" class="ng-invalid ng-touched ng-dirty"><!--bindings={}--><!--bindings={
  "ng-reflect-ng-if": "true"
}--><h2 _ngcontent-c42="" class="text-capitalize mat-dialog-title ng-star-inserted" mat-dialog-title="" id="mat-dialog-title-1" style="">Create Opportunity</h2><div _ngcontent-c42="" fxlayout="column" ng-reflect-fx-layout="column" style="flex-direction: column; box-sizing: border-box; display: flex;"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div _ngcontent-c42="" fxflex="" ng-reflect-fx-flex="" class="ng-star-inserted" style="flex: 1 1 1e-09px; box-sizing: border-box;"><mat-form-field _ngcontent-c42="" class="mat-form-field ng-tns-c12-302 mat-primary mat-form-field-type-mat-input mat-form-field-appearance-legacy mat-form-field-can-float mat-form-field-hide-placeholder ng-pristine ng-invalid mat-form-field-invalid ng-touched"><div class="mat-form-field-wrapper"><div class="mat-form-field-flex"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "0"
}--><div class="mat-form-field-infix"><input _ngcontent-c42="" class="mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored ng-pristine ng-invalid ng-touched" matinput="" name="owner" placeholder="Customer" required="" type="text" ng-reflect-autocomplete="[object Object]" ng-reflect-required="" ng-reflect-name="owner" ng-reflect-model="" ng-reflect-placeholder="Customer" ng-reflect-type="text" autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" id="mat-input-9" aria-invalid="true" aria-required="true" aria-describedby="mat-error-1"><mat-autocomplete _ngcontent-c42="" class="mat-autocomplete"><!----></mat-autocomplete><span class="mat-form-field-label-wrapper"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><label class="mat-form-field-label ng-tns-c12-302 mat-empty mat-form-field-empty ng-star-inserted" ng-reflect-ng-switch="false" ng-reflect-disabled="true" id="mat-form-field-label-55" for="mat-input-9" aria-owns="mat-input-9"><!--bindings={
  "ng-reflect-ng-switch-case": "false"
}--><!---->Customer<!--bindings={
  "ng-reflect-ng-switch-case": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span aria-hidden="true" class="mat-placeholder-required mat-form-field-required-marker ng-tns-c12-302 ng-star-inserted">&nbsp;*</span></label></span></div><!--bindings={
  "ng-reflect-ng-if": "0"
}--></div><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="mat-form-field-underline ng-tns-c12-302 ng-star-inserted"><span class="mat-form-field-ripple"></span></div><div class="mat-form-field-subscript-wrapper" ng-reflect-ng-switch="error"><!--bindings={
  "ng-reflect-ng-switch-case": "error"
}--><div class="ng-tns-c12-302 ng-trigger ng-trigger-transitionMessages ng-star-inserted" style="opacity: 1; transform: translateY(0%);"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><mat-error _ngcontent-c42="" class="mat-error ng-star-inserted" role="alert" id="mat-error-1" style=""><!--bindings={
  "ng-reflect-ng-if": "true"
}

我是量角器的新手。无法在模式对话框中的任何位置单击。单击对话框上的任意位置将关闭一个下拉列表（这是我要测试的功能）附加了模式对话框的元素。

我已经通过页面对象模型在规范中尝试了以下代码

this.ModalDialog = function(){
var ModalDialog = protractor.ExpectedConditions;
var ModalDialogClick = element(by.css('.mat-dialog-container')).click();
browser.wait(ModalDialog.presenceOf(ModalDialogClick), 10000);
ModalDialog.click(); 
    }
;
browser.actions().mouseMove(ModalDialog, {x: 50, y: 50}).click().perform();

元素为文本：

Answer 1

处理此问题的最佳方法如下：

csv