Элемент доступа, родитель которого скрыт-cypress.io

после долгих nashing в зубы, я думаю, у меня есть ответ.

я думаю, что основная причина в том, что mdc-select-item и display:flex, что позволяет ему превышать границы его родителей (строго говоря, это похоже на неправильное применение display flex, если я правильно помню учебник, однако...).

Cypress делает много родительской проверки при определении visibilty, см. видимости.кофе!--20-->,

## WARNING:
## developer beware. visibility is a sink hole
## that leads to sheer madness. you should
## avoid this file before its too late.
...
when $parent = parentHasDisplayNone($el.parent())
  parentNode = $elements.stringify($parent, "short")

  "This element '#{node}' is not visible because its parent '#{parentNode}' has CSS property: 'display: none'"
...
when $parent = parentHasNoOffsetWidthOrHeightAndOverflowHidden($el.parent())
  parentNode  = $elements.stringify($parent, "short")
  width       = elOffsetWidth($parent)
  height      = elOffsetHeight($parent)

  "This element '#{node}' is not visible because its parent '#{parentNode}' has CSS property: 'overflow: hidden' and an effective width and height of: '#{width} x #{height}' pixels."

но, при использовании .should('be.visible'), мы застряли с родительскими свойствами, не проверяющими видимость ребенка, хотя мы действительно можем видеть ребенка.
Нам нужен альтернативный тест.

работающим

Ref С помощью jQuery.js, это одно из определений видимости самого элемента (игнорирование родительских свойств).

jQuery.expr.pseudos.visible = function( elem ) {
  return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
}

поэтому мы могли бы использовать это в качестве основы для альтернативы.

describe('Testing select options', function() {

  // Change this function if other criteria are required.
  const isVisible = (elem) => !!( 
    elem.offsetWidth || 
    elem.offsetHeight || 
    elem.getClientRects().length 
  )

  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").then (item1 => {
      expect(isVisible(item1[0])).to.be.true
    });
  });

  it('checks select option is not visible', function() {

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

    cy.document().then(function(document) {

      const item1 = document.querySelectorAll('mdc-select-item')[0]
      item1.style.display = 'none'

      cy.get('mdc-select-item').contains("ITEM1").then (item => {
        expect(isVisible(item[0])).to.be.false
      })
    })
  });

  it('checks select option is clickable', function() {

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

    //cy.get('mdc-select-item').contains("ITEM1").click()    // this will fail
    cy.get('mdc-select-item').contains("ITEM1").then (item1 => {

      cy.get('mdc-select-item').contains("ITEM2").then (item2 => {
        expect(isVisible(item2[0])).to.be.true  //visible when list is first dropped
      });

      item1.click();
      cy.wait(500)

      cy.get('mdc-select-item').contains("ITEM2").then (item2 => {
        expect(isVisible(item2[0])).to.be.false  // not visible after item1 selected
      });
    });

  })

сноска-использование 'then' (или 'каждый')

обычно вы используете утверждение в cypress с помощью командных цепочек, которые в основном обертывают тестируемые элементы и обрабатывают такие вещи, как повтор и ожидание изменений DOM.

однако в этом случае мы имеем противоречие между стандартным утверждением видимости .should('be.visible') и рамки, используемые для создания страницы, поэтому мы используем then(fn) (ref), чтобы получить доступ к развернутому DOM. Затем мы можем применить нашу собственную версию тест видимости с использованием синтаксиса ожидания stand jasmine.

получается, вы также можете использовать функцию .should(fn), это тоже работает

it('checks select option is visible - 2', function() {
  const doc = cy.visit('http://localhost:4200')
  cy.get("mdc-select").contains("installation type").click()

  cy.get('mdc-select-item').contains("ITEM1").should(item1 => {
    expect(isVisible(item1[0])).to.be.true
  });
});

используя should вместо then не имеет значения в тесте видимости, но обратите внимание на should версия может повторить функцию несколько раз, поэтому ее нельзя использовать с