如何在Protractor中选择元素属性相同的第二个复选框

嘿，这种属性完全重复的元素定位确实挺头疼的，不过咱们可以利用复选框旁边的文本内容来精准锁定目标，给你几个实用的方案：

方案1：XPath直接关联文本定位 #

因为每个复选框和对应的产品文本在同一个<tr>行里，我们可以先找到包含“Product2”的<td>，再定位到同一行里的复选框：

// 考虑到文本可能有前后空格，用normalize-space处理
element(by.xpath('//tr[td[normalize-space(text())="Product2"]]//input[@id="checks"]')).click();

这个XPath的逻辑是：找到所有<tr>中，存在一个<td>的文本（去除前后空格后）等于“Product2”的行，然后在该行内找到id为checks的复选框。

方案2：利用Protractor的filter方法筛选 #

如果你更习惯用CSS选择器或者需要更灵活的逻辑，可以先获取所有产品行，再筛选出目标行后点击复选框：

// 获取所有产品行
const productRows = element.all(by.css('tr.prod-input-select'));

// 筛选出文本为Product2的行，然后点击复选框
productRows.filter(row => {
  return row.element(by.css('td.ng-binding')).getText().then(text => {
    return text.trim() === 'Product2';
  });
}).first().element(by.css('input#checks')).click();

这个方法的好处是逻辑更清晰，而且如果以后产品文本有变化，只需要修改判断条件即可。

方案3：结合AngularJS的绑定特性定位 #

因为页面是AngularJS写的，我们还可以通过by.binding定位到产品文本元素，再向上找到父行的复选框：

// 找到绑定productOffering的文本元素，然后找到同一行的复选框
element(by.binding('productOffering')).element(by.xpath('./../td/input[@id="checks"]')).click();

不过这个方法要注意，如果页面中有多个productOffering绑定，可能需要结合filter来确保定位到的是Product2的元素。

小提示 #

一定要注意文本的前后空格！原代码里的<td>文本是带有前后空格的（比如Product2），所以用trim()或者normalize-space()处理后再匹配，能避免定位失败的问题。

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