在以下情况下需要帮助找到基于 webtable 的元素的 xpath
Need help in finding the xpath for webtable based element in below scenario
我有一个动态网站table,基于特定的列文本匹配我必须编辑记录,我能够从 table 找到该行但无法点击同一行对应的编辑按钮..
如所附快照中所述,共有 3 个部分-
Tr<> 以红色突出显示:是我可以 select 它基于给定列 value/text [ for ex- Test_j] 使用xpath: //td[contains(.,'Test_j')]
td<> 棕色:有两个按钮 B1
和 B2
-edit 和 Delete ,我必须根据第 1 步中匹配的文本点击两者
- 最后圈出的是列文本 `xpath`,通过它我可以找到要编辑的行。
现在请帮助我仅使用此 tr 的前面或任何其他方式单击此记录的“编辑”按钮。
这是我在 DOM 中看到的 html:
<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>
这个 xpath 应该适合你-
//td[contains(.,'Test_j')]/preceding-sibling::td[1]/div/button[1]
使用以下任一方法xpath
使用preceding-sibling
来识别列。
//td[contains(.,'Test_j')]/preceding-sibling::td[1]//button[@mwiconbutton='pencil-alt']
或识别 row
然后按钮
//tr[.//td[contains(.,'Test_j')]]//button[@mwiconbutton='pencil-alt' and @class='mw-icon-button']
我有一个动态网站table,基于特定的列文本匹配我必须编辑记录,我能够从 table 找到该行但无法点击同一行对应的编辑按钮..
如所附快照中所述,共有 3 个部分-
Tr<> 以红色突出显示:是我可以 select 它基于给定列 value/text [ for ex- Test_j] 使用xpath:
//td[contains(.,'Test_j')]
td<> 棕色:有两个按钮
B1
和B2
-edit 和 Delete ,我必须根据第 1 步中匹配的文本点击两者- 最后圈出的是列文本 `xpath`,通过它我可以找到要编辑的行。
现在请帮助我仅使用此 tr 的前面或任何其他方式单击此记录的“编辑”按钮。
这是我在 DOM 中看到的 html:
<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>
这个 xpath 应该适合你-
//td[contains(.,'Test_j')]/preceding-sibling::td[1]/div/button[1]
使用以下任一方法xpath
使用preceding-sibling
来识别列。
//td[contains(.,'Test_j')]/preceding-sibling::td[1]//button[@mwiconbutton='pencil-alt']
或识别 row
然后按钮
//tr[.//td[contains(.,'Test_j')]]//button[@mwiconbutton='pencil-alt' and @class='mw-icon-button']