I have a dynamic webtable on which based on the certain column text match I have to edit the record, I'm able to locate the row from table but unable to click on edit button corresponding to the same row..
there are 3 sections as explained in attached snap-
Tr<> as highlighted in Red: is the row I could select it based on the given column value/text [ for ex- Test_j] using xpath: //td[contains(.,'Test_j')]
td<> in brown color: have tow buttons B1
and B2
-edit and Delete, I have to click on both based on the text matched in step 1
Now Please help me clicking on the Edit button for this record only using preceding of this tr or any other ways.
Here is the html I can see in DOM:
<tr kendogridlogicalrow="" data-kendo-grid-item-index="20" role="row" aria-rowindex="22" class="ng-star-inserted">
<!---->
<!---->
<!---->
<!----><td aria-selected="false" kendogridcell="" kendogridlogicalcell="" role="gridcell" colspan="1" aria-colindex="1" class="ng-star-inserted">
<!---->
<!----><!---->
<!---->
<div _ngcontent-elp-c18="" class="no-wrap ng-star-inserted">
<button _ngcontent-elp-c18="" class="mw-icon-button" mwiconbutton="pencil-alt"><em class="fa fa-pencil-alt" style="margin-right: 0px;"></em></button>
<button _ngcontent-elp-c18="" mwdeletebutton="" title="Delete"><i class="fa fa-trash-alt"></i></button>
</div>
<!---->
<!---->
<!---->
<!---->
</td><td aria-selected="false" kendogridcell="" kendogridlogicalcell="" role="gridcell" colspan="1" aria-colindex="2" class="ng-star-inserted">
<!---->
<!----><!---->
<!---->
<!---->
<!---->Test_j
<!---->
<!---->
</td><td aria-selected="false" kendogridcell="" kendogridlogicalcell="" role="gridcell" colspan="1" aria-colindex="3" class="ng-star-inserted">
<!---->
<!----><!---->
<!---->
<!---->
<!---->General
<!---->
<!---->
</td><td aria-selected="false" kendogridcell="" kendogridlogicalcell="" role="gridcell" colspan="1" aria-colindex="4" class="ng-star-inserted">
<!---->
<!----><!---->
<!---->
<span _ngcontent-elp-c18="" class="ng-star-inserted">xxx xxx Lee</span>
<!---->
<!---->
<!---->
<!---->
</td><td aria-selected="false" kendogridcell="" kendogridlogicalcell="" role="gridcell" colspan="1" aria-colindex="5" class="ng-star-inserted" style="text-align: center;">
<!---->
<!----><!---->
<!---->
<span _ngcontent-elp-c18="" class="ng-star-inserted">6</span>
<!---->
<!---->
<!---->
<!---->
</td><td aria-selected="false" kendogridcell="" kendogridlogicalcell="" role="gridcell" colspan="1" aria-colindex="6" class="ng-star-inserted">
<!---->
<!----><!---->
<!---->
<em _ngcontent-elp-c18="" class="fa fa-check ng-star-inserted">
</em>
<!---->
<!---->
<!---->
<!---->
</td><td aria-selected="false" kendogridcell="" kendogridlogicalcell="" role="gridcell" colspan="1" aria-colindex="7" class="ng-star-inserted">
<!---->
<!----><!---->
<!---->
<em _ngcontent-elp-c18="" class="fa fa-check ng-star-inserted">
</em>
<!---->
<!---->
<!---->
<!---->
</td>
</tr>
Use either of the following xpath
Use preceding-sibling
to identify the column.
//td[contains(.,'Test_j')]/preceding-sibling::td[1]//button[@mwiconbutton='pencil-alt']
or identify the row
and then button
//tr[.//td[contains(.,'Test_j')]]//button[@mwiconbutton='pencil-alt' and @class='mw-icon-button']