How to click a button inside a div with particular content using cypress?

user_16104900 0
Viewed 929

below is the html code,

<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>

Now i want to click the svg from the div with content name1. how can i do it?

i have tried to use

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

this gives the div with content Name1 but how do i click the icon that is contained in its parent div CardHeader. could someone help me with this thanks.

cypress
2 Answers

Get the parent div (card) instead of the card title div

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

You can do something like this:

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