CODEWITHSUNDEEP
node.jscypress
Anky
Anky

Reputation: 11

how to click on edit a button in front of Particular text in Cypress

I want to click on the edit button in front of if found Yes in the third column(Yes is also have botton)

element

I was using below code in test case but didn't work

`cy.get(':nth-child(6)').contains('Yes').within(() => { cy.get('.btn.btn-xs.btn-edit').click() }) or

`cy.get(':nth-child(6)').contains('Yes').find(button).eq(1).click()

HTML Table Structure

    <tr role="row" class="even">
<td class="sorting_1">
<a href="http://192.168.0.1:8080/details">abc</a>
</td>
<td>xyz</td>
<td>aws</td>
<td>No</td>
<td>No</td>
<td>"Yes"
<button data-role="remove" id="support_22_abc" class="btn btn-rejecttxt" onclick="deletevm(this,'3','3:5659','22','abc','22_abc','284')"><i class="fa fa-times-circle" data-original-title="Remove Mapping" data-toggle="tooltip"></i></button></td>
<td>No</td>
<td>
<div class="btn-group">
<a href="http://192.168.0.1:8080/edit">
<button class="btn btn-xs btn-edit">
<i class="fa fa-pencil" data-original-title="Edit/Update row data" data-toggle="tooltip" data-placement="top"></i></button></a>
 </div></td></tr>

Upvotes: 1

Views: 510

Answers (2)

Alapan Das
Alapan Das

Reputation: 18624

Assuming .btn.btn-xs.btn-edit is the correct selector for edit button. You can directly use the eq command to click the edit button on the third row.

cy.get('.btn.btn-xs.btn-edit').eq(2).click()

Based on the available info, I came up with this. Here we are looping through the all the tr first and then using within we are scoping the next commands inside the same tr. Now using eq(5) we are searching for the Yes button, and if we found the it, then we click the Edit button.

cy.get('tr').each(($ele) => {
  //Loop through all tr
  cy.wrap($ele).within(() => {
    //scope the next commands within the same tr
    cy.get('td')
      .eq(5)
      .invoke('text')
      .then((text) => {
        //here eq(5) gets the sixth td element in the row
        if (text.includes('Yes')) {
          cy.get('.btn.btn-xs.btn-edit').click()
        }
      })
  })
})

Upvotes: 0

Fody
Fody

Reputation: 32138

If I'm reading it correctly, you want the 3rd <td> after the one with "Yes ".

Not sure what :nth-child(6) is selecting, but try this

cy.contains('td', 'Yes')
  .siblings()
  .eq(6)            // 6th sibling
  .find('button.btn.btn-xs.btn-edit')
  .click()

Upvotes: 0

Related Questions