title: Does protractor work with Angular material dialog popups?
body: <p>I am trying to target elements in a popup dialog in protractor however I get the following error once the popup dialog shows up: </p>
  
  <blockquote>
    <p>Failed: unknown error: Element is not clickable at point (1204, 32).
    Other element would receive the click: ...</p>
  </blockquote>
  
  <p>I am new to angular and protractor and I have searched to see if there are similar issues.
  The javascript:<br/></p>
  
  <pre><code>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);
              })
          });
  
      });
  
  })
  </code></pre>
  
  <p><br/>
  The html template (the actual popup):<br/></p>
  
  <pre><code>&lt;md-dialog aria-label="Case edit dialog"&gt;
    &lt;form name="form"&gt;
      &lt;md-toolbar layout="row"&gt;
        &lt;div class="md-toolbar-tools"&gt;
          &lt;h2 ng-hide="editCase"&gt;{{ 'CASE.CREATE_CASE' | translate }}&lt;/h2&gt;
          &lt;h2 ng-show="editCase"&gt;{{ 'CASE.EDIT_PROPERTIES' | translate }}&lt;/h2&gt;
        &lt;/div&gt;
      &lt;/md-toolbar&gt;
      &lt;md-dialog-content style="max-width:800px;max-height:810px;min-width:20em;"&gt;
  
        &lt;md-input-container&gt;
          &lt;label&gt;&lt;span class="md-warn"&gt;*&lt;/span&gt; {{ 'CASE.TITLE' | translate }}&lt;/label&gt;
          &lt;input type="text" ng-model="case.title" required focus-me&gt;
        &lt;/md-input-container&gt;
  
        &lt;md-input-container&gt;
          &lt;label&gt;{{ 'CASE.DESCRIPTION' | translate }}&lt;/label&gt;
          &lt;textarea ng-model="case.description"&gt;&lt;/textarea&gt;
        &lt;/md-input-container&gt;
  
      &lt;/md-dialog-content&gt;
      &lt;div class="md-actions" layout="row"&gt;
        &lt;md-button id="create-case-dlg-btn" type="submit" class="md-primary" ng-click="vm.update(case)" ng-disabled="form.$invalid"&gt;
          {{ 'COMMON.OK' | translate }}
        &lt;/md-button&gt;
        &lt;md-button type="button" ng-click="vm.cancel(form)"&gt;
          {{ 'COMMON.CANCEL' | translate }}
        &lt;/md-button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/md-dialog&gt;
  </code></pre>