Как нажать кнопку внутри тени Cypress.io

Я использую cypress.io, и мне нужно нажать кнопку внутри теневого корня.

Код HTML

Мне нужно нажать кнопку Да.

Как я могу это сделать?


html cypress shadow-dom
person Cava    schedule 11.01.2021    source источник
comment
Можете ли вы добавить, что вы пробовали до сих пор и какую ошибку вы получаете или что происходит, когда вы пытаетесь щелкнуть?   -  person A J    schedule 11.01.2021

Ответы (3)


arrow_upward
2
arrow_downward

Вероятно, вы захотите использовать текст кнопки, а не классы, чтобы выбрать нужную кнопку.

Один и тот же класс .buttons-confirmation отображается на обеих кнопках, поэтому при его выборе вы получите обе кнопки.

cy.get('base-confirmation')
  .shadow()
  .contains('button', 'Yes')
  .click();
person Community    schedule 11.01.2021

arrow_upward
1
arrow_downward

Вы можете использовать .shadow() для прохождения через теневой дом и выполнения действий на нужный элемент.

Если вы хотите нажать кнопку Да:

cy.get('base-confirmation')
  .shadow()
  .find('.modal-content')
  .find('.content-confirmation')
  .find('.base-confirmation')
  .find('.buttons-confirmation')
  .click()

Если вы хотите нажать кнопку Нет:

cy.get('base-confirmation')
  .shadow()
  .find('.modal-content')
  .find('.content-confirmation')
  .find('.base-confirmation')
  .find('.buttons-confirmation.cancelBtn')
  .click()
person Alapan Das    schedule 11.01.2021
comment
Хороший ответ, но в кнопке Да нужно выбрать кнопку Да. Потому что у тебя 2 кнопки. - person Cava; 12.01.2021

arrow_upward
0
arrow_downward

Вы можете просто добавить { "includeShadowDom" : true } в файл cypress.json вместе с другими свойствами и щелкнуть элемент, как щелкнув обычный элементвведите здесь описание изображения

cy.get('base-confirmation')
  .contains('button', 'Yes')
  .click();
person Uditha Silva    schedule 05.05.2021