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

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" } 

I'm new to protractor.I'm unable to click anywhere on the modal dialog. Clicking anywhere on the dialog closes a dropdown (That's the functionality i target to test) The elements of modal dialog are attached.

I have tried the following code in my spec through a page object model

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();

Elements as text :

Answer 1

The best way to handle this is as follows:

 var elm = element(by.css('.mat-dialog-container')); //Click anywhere in the modal dialog browser.actions().mouseMove(elm, {x: 500, y: 500}).click().perform()