如何查看选中元素的XPath？及通过用户名定位对应编辑按钮

问题场景 #

要在动态用户列表里找到指定用户（比如「SeleniumTest」），并点击对应行的「Edit User」按钮，但按钮和表格都没有唯一标识，绝对XPath也因为列表动态变化没法使用。目前已经能定位到用户名元素，但不知道怎么关联到同一行的编辑按钮。

当前定位用户名的代码：

userLookupElement = driver.find_element(By.XPATH,"//*[contains(text(), 'SeleniumTest')]")

用户行的HTML结构：

<tr ng-repeat="user in userData track by $index" ng-class-odd="'o-table-bkodd'" ng-class-even="'o-table-bkeven'" class="ng-scope o-table-bkeven">
                <td colspan="2" class="ng-binding">
                    SeleniumTest &nbsp;
                    <!-- ngIf: user.IsLockedOut -->
                </td>
                <td class="ng-binding">
                    
                </td>
                <th style="width:58px;">
                      <span ng-show="user.AuthorizedFor.indexOf('Operations') != -1" ng-hide="user.AuthorizedFor.indexOf('Operations') == -1"><i class="fa fa-check"></i></span>
                </th>
                <th style="width:58px;">
                      <span ng-show="user.AuthorizedFor.indexOf('Overrides') != -1" ng-hide="user.AuthorizedFor.indexOf('Overrides') == -1"><i class="fa fa-check"></i></span>
                </th>
                <th style="width:58px;">
                      <span ng-show="user.AuthorizedFor.indexOf('Reports') != -1" ng-hide="user.AuthorizedFor.indexOf('Reports') == -1"><i class="fa fa-check"></i></span>
                </th>
                <th style="width:58px;">
                      <span ng-show="user.AuthorizedFor.indexOf('Setup') != -1" ng-hide="user.AuthorizedFor.indexOf('Setup') == -1" class="ng-hide"><i class="fa fa-check"></i></span>
                </th>
                <th style="width:58px;">
                      <span ng-show="user.AuthorizedFor.indexOf('Users') != -1" ng-hide="user.AuthorizedFor.indexOf('Users') == -1" class="ng-hide"><i class="fa fa-check"></i></span>
                </th>
                <th style="width:58px;">
                     <span ng-show="user.RemoteAccessEnabled" ng-hide="!user.RemoteAccessEnabled"><i class="fa fa-check"></i></span>
                </th>
                <td>
                    <label class="btn btn-sm btn-default texture-blue" data-ng-click="editUser(user)">Edit User</label>
                </td>
            </tr>

几种可行的定位方法 #

1. 从用户名元素向上找父行，再定位按钮 #

直接用XPath的轴定位，先找到包含目标用户名的<td>，再往上找到对应的<tr>，最后定位该行里的「Edit User」按钮：

edit_button = driver.find_element(By.XPATH, "//td[contains(text(), 'SeleniumTest')]/ancestor::tr//label[text()='Edit User']")
edit_button.click()

如果已经拿到了用户名元素，也可以基于它做相对定位：

userLookupElement = driver.find_element(By.XPATH,"//*[contains(text(), 'SeleniumTest')]")
edit_button = userLookupElement.find_element(By.XPATH, "./ancestor::tr//label[text()='Edit User']")
edit_button.click()

2. 结合Angular属性定位 #

因为页面用Angular的ng-repeat渲染列表行，还可以结合按钮的data-ng-click属性来精准定位：

edit_button = driver.find_element(By.XPATH, "//tr[.//td[contains(text(), 'SeleniumTest')]]//label[@data-ng-click='editUser(user)']")
edit_button.click()

3. 利用按钮在行内的固定位置 #

如果编辑按钮始终在每行的最后一列，也可以简化定位：

edit_button = driver.find_element(By.XPATH, "//td[contains(text(), 'SeleniumTest')]/ancestor::tr/td[last()]//label")
edit_button.click()

内容的提问来源于stack exchange，提问作者Derek Casey