Нажатие кнопки, которая существует несколько раз и также является вложенной
У меня возникла проблема: я хотел бы нажать кнопку, которая существует несколько раз на сайте и вложена в cards.
Я ищу card, где имя питомца Bala, см. вложение ниже, и я хотел бы нажать на нем кнопку с надписью Detail.
Самое далекое, что я сделал со своим решением, это то, что я могу искать правильный card и просто нажимать первую из этих кнопок Detail.
HTML:
<div _ngcontent-eng-1 = "" class = "col-md-3 pt-3 pb-3">
<app-pet _ngcontent-eng-1 = "" _nghost-eng-2 = "" class = "dog"><div _ngcontent-eng-2 = "" class = "pet">
<!--template bindings = {}--><div _ngcontent-eng-2 = "" class = "card">
<div _ngcontent-eng-2 = "" class = "card-block">
<h4 _ngcontent-eng-2 = "" class = "card-title">Bala</h4> //Checking this?
<h6 _ngcontent-eng-2 = "" class = "card-subtitle mb-2">
<!--template bindings = {}--><div _ngcontent-eng-2 = "" class = "badge badge-pill badge-success">
New
</div>
<!--template bindings = {}--><div _ngcontent-eng-2 = "" class = "badge badge-pill badge-info">
Important
</div>
</h6>
<ul _ngcontent-eng-2 = "" class = "list-group list-group-flush">
<li _ngcontent-eng-2 = "" class = "list-group-item">
<div _ngcontent-eng-2 = "" class = "age">
<span _ngcontent-eng-2 = "">Age: </span>
<span _ngcontent-eng-2 = "">20</span>
</div>
</li>
<li _ngcontent-eng-2 = "" class = "list-group-item">
<div _ngcontent-eng-2 = "" class = "type">
<a _ngcontent-eng-2 = "" href = "/pet/494">
<img _ngcontent-eng-2 = "" src = "/assets/dog.gif">
</a>
</div>
</li>
<li _ngcontent-eng-2 = "" class = "list-group-item">
<a _ngcontent-eng-2 = "" class = "btn btn-primary" href = "/pet/494">
Detail
</a> //CLICK
</li>
</ul>
</div>
</div>
</div>
</app-pet>
</div>
Мой код
Then('I click on the Detail button', () => {
cy.get('div.card').contains('Bala').find('a.btn.btn-primary').click();
});
Это то, что у меня есть в настоящее время, но я уже использовал несколько разных подходов, таких как find('a').contains('Detail') или find('a').contains('btn.btn-primary') и некоторые другие подобные фрагменты кода.
Графически
Также я просмотрел некоторые похожие темы SO, но они не совсем сработали для меня.
Ответы 2
Вы можете использовать eq, если хотите нажать определенную кнопку:
cy.contains('a', 'Detail').eq(0).click() //Clicks first Detail button
cy.contains('a', 'Detail').eq(1).click() //Clicks second Detail button
Или, если вы хотите нажать все кнопки одну за другой, вы можете использовать each:
cy.contains('a', 'Detail').each(($ele) => {
cy.wrap($ele).click()
})
Я хотел бы нажать кнопку, где имя питомца «Бала». Однако я действительно не нашел способ сделать это.
Как насчет того, чтобы попробовать это cy.contains('Bala').find('.btn.btn-primary').click()?
К сожалению, не работает :/ Я также пробовал: cy.contains('Bala').find('btn.btn-primary').click(), cy.contains('Bala').find('btn-primary').click(), cy.contains('Bala').find('a.btn.btn-primary').click(), cy.contains('Bala').contains('Detail').click(), но все они выдают ошибку, потому что Cypress ищет ее в h4.card-title.
У вас есть правильная идея найти карту в первую очередь. Вот как вы можете изменить свой тест, чтобы сделать это.
Then('I click on the Detail button', () => {
cy.contains('div.card', 'Bala').find('a.btn.btn-primary').click();
})
Вы указываете элемент и текст в одной команде.
Кажется, я был очень близок, но все же так далеко :D Большое спасибо, теперь это работает отлично!
У вас есть сайт, на который мы можем ссылаться? Это облегчило бы задачу.