Search code examples
seleniumxpathwebdriverdomxpath

Need help in finding the xpath for webtable based element in below scenario


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-

  1. 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')]

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

  3. as circled in last is the column text `xpath` by which I can find out row to be edited.

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>

enter image description here


Solution

  • 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']