Вопрос, как указано в заголовке, т.е. Для доступа к элементу, родитель которого скрыт. Проблема в том, что согласно документам cypress.io:
Элемент считается скрытым, если:
- Его ширина или высота равна 0.
- Свойство CSS (или его предки) - видимость: скрыто.
- Свойство CSS (или его предки): display: none.
- Его CSS-свойство является position: fixed, а его за кадром или скрыто.
Но код, с которым я работаю, требует, чтобы я щелкнул элемент, родитель которого скрыт, а сам элемент видим.
Поэтому каждый раз, когда я пытаюсь нажать на элемент, появляется сообщение об ошибке:
CypressError: Тайм-аут повторной попытки: ожидается, что "<mdc-select-item # mdc-select-item-4.mdc-list-item>" будет "видимым"
Этот элемент <mdc-select-item # mdc-select-item-4.mdc-list-item> невидим, поскольку его родительский элемент <mdc-select-menu.mdc-simple-menu.mdc-select__menu> ' имеет свойство CSS: 'display: none'
Элементом, с которым я работаю, является dropdown item
, который написан на pug
. Элемент - это компонент, определенный в angular-mdc-web, который использует mdc-select
для выпадающего меню и mdc-select-item
для своих элементов (items), к которому я должен получить доступ.
Пример кода аналогичной структуры:
//pug
mdc-select(placeholder="installation type"
'[closeOnScroll]'="true")
mdc-select-item(value="false") ITEM1
mdc-select-item(value="true") ITEM2
Выше ITEM1
- это элемент, к ITEM1
у меня есть доступ. Это я делаю в cypress.io
следующим образом:
//cypress.io
// click on the dropdown menu to show the dropdown (items)
cy.get("mdc-select").contains("installation type").click();
// try to access ITEM1
cy.get('mdc-select-item').contains("ITEM1").should('be.visible').click();
Пытались с помощью {force:true}
щелкнуть предметом, но не повезло. Попытался выбрать элементы с помощью нажатия клавиши {enter}
на родительском mdc-select
, но опять-таки не повезло, так как он выдает:
CypressError: cy.type() может быть вызван только для textarea или: text. Ваша тема: <mdc-select-label class= "mdc-select__selected-text"> Select... </mdc-select-label>
Также пытался использовать команду select
, но это невозможно, потому что движок Cypress не может идентифицировать элемент как элемент select
(потому что это не так, внутренняя работа отличается). Это бросает:
CypressError: cy.select() может быть вызван только для a. Ваша тема: <mdc-select-label class= "mdc-select__selected-text"> Select... </mdc-select-label>
Проблема в том, что mdc-select-menu
, являющееся родительским для mdc-select-item
имеет свойство display:none
из внутренних вычислений при открытии раскрывающихся элементов.
Это свойство перезаписывается для display:flex
, но это не помогает.
Все из идей. Это работает в Selenium
, но не с cypress.io
. Любая подсказка, что может быть возможным взломать для ситуации, кроме перехода на другие платформы или изменения кода пользовательского интерфейса?