title: Selecting options from Mat-select using cypress
body: <p>I have Mat-select dropdown as follows </p>
  
  <pre><code>&lt;mat-form-field&gt;
     &lt;mat-label&gt;Gender&lt;/mat-label&gt;
        &lt;mat-select id="gender" required formControlName="gender"&gt;
           &lt;mat-option id="Male" value="male"&gt; Male &lt;/mat-option&gt;
           &lt;mat-option value="female"&gt; Female &lt;/mat-option&gt;
        &lt;/mat-select&gt;
   &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>I'm trying to use Cypress to select male or female from the field.</p>
  
  <pre><code>cy.get('mat-select').click().select('Male')
  </code></pre>
  
  <p>With the above code I get the following error:</p>
  
  <pre><code>CypressError: cy.select() can only be called on a &lt;select&gt;. Your subject is a: &lt;mat-select&gt;
  </code></pre>
  
  <p>I need some help in fixing this, thank you.</p>
  
  <p>The code that worked for me.</p>
  
  <pre><code>cy.get('#gender').click().then(() =&gt; {
              cy.get('#male').click()
          })
  </code></pre>