Как нажать кнопку внутри div с определенным контентом с помощью cypress?

#cypress

Вопрос:

ниже приведен html-код,

 <div class="StyledCard">
    <div class="CardHeader">
        <div class ="CardHeaderLeft">
            <div class="CardTitle">
                Name1
            </div>
        </div>
        <div class="CardHeaderRight">
            <button type="button" class="IconButton">
                <svg class="Icon/>
            </button>
        </div>
    </div>
</div>
<div class="StyledCard">
    <div class="CardHeader">
        <div class ="CardHeaderLeft">
            <div class="CardTitle">
                Name2
            </div>
        </div>
        <div class="CardHeaderRight">
            <button type="button" class="IconButton">
                <svg class="Icon/>
            </button>
        </div>
    </div>
</div>
 

Теперь я хочу щелкнуть svg из div с именем содержимого 1. как я могу это сделать?

я пытался использовать

 cy.get('div[class*="CardTitle"]')
    .contains('Name1')
 

это дает div с именем содержимого 1, но как мне щелкнуть значок, который содержится в его родительском заголовке div. не мог бы кто-нибудь помочь мне с этим, спасибо.

Ответ №1:

Получите родительский div (карточку) вместо заголовка карточки

 cy.contains('div.StyledCard', 'Name1')
  .contains('Name1')
  .find('svg')
  .click()
 

Ответ №2:

Вы можете сделать что-то вроде этого:

 cy.contains('div.StyledCard', 'Name1')
  .find('button')
  .click()