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

user_18353543 0
Viewed 82

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>
cypress node.js
2 Answers

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()
        }
      })
  })
})
user_45712710

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()
user_169977070
Related