Access element whose parent is hidden - cypress.io

Question

The question is as given in the title, ie, to access element whose parent is hidden. The problem is that, as per the cypress.io docs :

An element is

Answer 1

For convenience and reusability I had to mix the answer of Richard Matsen and Josef Biehler.

Define the command

// Access element whose parent is hidden
Cypress.Commands.add('isVisible', {
  prevSubject: true
}, (subject) => {
  const isVisible = (elem) => !!(
    elem.offsetWidth ||
    elem.offsetHeight ||
    elem.getClientRects().length
  )
  expect(isVisible(subject[0])).to.be.true
})

You can now chain it from contains

describe('Testing select options', function() {
  it('checks select option is visible', function() {

    const doc = cy.visit('http://localhost:4200')
    cy.get("mdc-select").contains("installation type").click()

    //cy.get('mdc-select-item').contains("ITEM1").should('be.visible') // this will fail
    cy.get('mdc-select-item').contains("ITEM1").isVisible()
  });
});