тень

Переход в теневой DOM элемента.

Синтаксис

.shadow(selector)
.shadow(selector, options)

Использование

Правильное использование

cy.get('.shadow-host').shadow()

Неправильное использование

cy.shadow() // Errors, cannot be chained off 'cy'
cy.exec('npm start').shadow() // Errors, 'exec' does not yield DOM element
cy.get('.not-a-shadow-host').shadow() // Errors, subject must host a shadow root

Возвращаемые значения

• .shadow() возвращает новый DOM элемент(ы), который(е) он нашел.

Примеры

Поиск и нажатие на кнопку внутри теневого DOM

<div class="shadow-host">
  #shadow-root
  <button class="my-button">Click me</button>
</div>

// yields [#shadow-root (open)]
cy.get('.shadow-host').shadow().find('.my-button').click()

Правила

Требования

• .shadow() требует цепочки команд, возвращающей DOM элемент, который является узлом тени (т. е. имеет непосредственно прикрепленный к нему корень тени).

Утверждения

• .shadow() будет автоматически повторяться до тех пор, пока элемент(ы) не появятся в DOM
• .shadow() будет автоматически повторяться до тех пор, пока элемент(ы) не будут содержать корень тени.
• .shadow() будет автоматически повторяться до тех пор, пока все цепные утверждения не пройдут

Таймауты

• .shadow() может сработать таймаут ожидания элемента(ов) в DOM .
• .shadow() может сработать таймаут ожидания элемента(ов), содержащего корень тени.
• .shadow() может сработать таймаут ожидания прохождения всех добавленных утверждений.

Известная проблема

При работе с cy.click(), иногда в Chrome не нажимается нужный элемент. Это происходит из-за неопределенности в спецификации.

В этом случае передайте { position: 'top' } в cy.click() следующим образом:

cy.get('#element').shadow().find('[data-test-id="my-button"]').click({ position: 'top' })

Журнал команд

Переход в теневой DOM элемента

cy.get('.shadow-host').shadow()

Вышеприведенные команды будут отображаться в журнале команд как:

При нажатии на команду shadow в журнале команд, консоль выводит следующее:

См. также

• cy.get() с опцией includeShadowDom
• cy.find() с опцией includeShadowDom
• cy.contains() с опцией includeShadowDom
• includeShadowDom опция конфигурации