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

Time:07-02

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" >
<td >
<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"  onclick="deletevm(this,'3','3:5659','22','abc','22_abc','284')"><i  data-original-title="Remove Mapping" data-toggle="tooltip"></i></button></td>
<td>No</td>
<td>
<div >
<a href="http://192.168.0.1:8080/edit">
<button >
<i  data-original-title="Edit/Update row data" data-toggle="tooltip" data-placement="top"></i></button></a>
 </div></td></tr>

CodePudding user response:

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

CodePudding user response:

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()
        }
      })
  })
})
  • Related