如何在Protractor中定位目标用户行内的编辑/删除按钮

我明白你遇到的困扰了——你当前的代码之所以总是定位到页面第一个按钮，核心问题在于调用getDriver()后，你回到了全局的浏览器驱动上下文，而非目标用户所在行的局部上下文里查找元素。下面是具体的解决方案：

问题根源 #

你这段代码的问题出在这里：

var deleteButton = editedUserCell.getDriver().findElement(by.css('[ng-click="deleteUserClicked(user)"]'));

getDriver()返回的是整个浏览器的WebDriver实例，调用findElement时会在整个页面范围内匹配元素，自然会拿到第一个符合条件的删除按钮，而非目标用户行内的那个。

正确的定位方式 #

我们需要先锁定目标用户所在的<tr>行，再在这一行的局部上下文里查找编辑/删除按钮，确保只在当前用户的行内定位元素。

方法1：先定位目标行，再找按钮

// 1. 找到包含目标邮箱的<td>，再获取它的父元素<tr>
var targetUserRow = element(by.xpath('//td[text()="' + EDITED_EMAIL + '"]/parent::tr'));

// 2. 在该行内查找删除按钮
var deleteButton = targetUserRow.element(by.css('[ng-click="deleteUserClicked(user)"]'));
// 或者查找编辑按钮
var editButton = targetUserRow.element(by.css('[ng-click="editUserClicked(user.id)"]'));

// 执行点击操作
deleteButton.click();
// editButton.click();

方法2：用XPath直接定位行内按钮

也可以用XPath一步到位，直接定位到目标用户行内的按钮：

// 删除按钮
var deleteButton = element(by.xpath('//td[text()="' + EDITED_EMAIL + '"]/following-sibling::td[@title="Delete"]/span[@ng-click="deleteUserClicked(user)"]'));

// 编辑按钮
var editButton = element(by.xpath('//td[text()="' + EDITED_EMAIL + '"]/following-sibling::td[@title="Edit"]/span[@ng-click="editUserClicked(user.id)"]'));

deleteButton.click();

方法3：用cssContainingText定位（适合用用户名作为标识）

如果用户名更适合作为定位依据，也可以这样写：

// 找到包含目标用户名的<td>，再获取父行
var targetUserRow = element(by.cssContainingText('td', EDITED_USERNAME)).element(by.xpath('..'));

// 在该行内找删除按钮（用样式类简化定位）
var deleteButton = targetUserRow.element(by.css('.btn-details.warning'));
deleteButton.click();

这些方法都限定了查找范围在目标用户的行内，不会再匹配到页面其他行的按钮了。

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