Make selection using cypress in Angular if you're using material forms

Question

I have a form that looks something like this:

...
    

    &l         


        
      

Answer 1

I found the following test to work with your repository (Latest commit 353633c),

describe('Test Gender Select', () => {

  before(function () {
    cy.visit('http://localhost:4200/')
  })

  it('signs up a new user', () => {
    cy.get('button').contains('Create New Account').click();

    cy.get('#gender').select('Female', {
      force: true
    });
    cy.get('#gender').contains('Female')
  });
});

You can see from the Cypress test runner that it has indeed selected the Female option, so I believe it covers the aim of your original test.

If I try to use click() like so

cy.get('#gender').click({
  force: true
});

cypress gives the message

CypressError: cy.click() cannot be called on a element. Use cy.select() command instead to change the value.

So, following this instruction and using

cy.get('#gender').select('Female');

gives the following error message about visibility, which seems to be standard for a select using material design (both angular-material and materialize).

CypressError: Timed out retrying: cy.select() failed because this element is not visible ... Fix this problem, or use {force: true} to disable error checking.

so using { force: true } option on cy.select() fixes this problem.

I understand the visibility issue occurs because material design covers the parent with the options list, and Cypress uses criteria for visibility based on the parent (see this question), although now the force option works (with Cypress v3.0.3).