Protractor同class元素定位优化：替代nth-child方案咨询

嘿，作为刚接触Protractor和E2E测试的新手，你能意识到硬编码nth-child序号的风险真的很赞——这种依赖元素顺序的定位方式确实会因为页面结构调整直接导致测试用例失效，下面给你几个更优的替代方案：

1. 利用语义化属性定位（最推荐） #

你的按钮都带有唯一的tooltip属性，这是非常理想的定位依据，完全不依赖元素顺序：

• 定位所有"Color"按钮：element.all(by.css('button.btn1[tooltip="Color"]'))
• 定位所有"Background Color"按钮：element.all(by.css('button.btn1[tooltip="Background Color"]'))

如果需要按div分组点击，也可以结合父容器筛选：

// 遍历每个div，点击里面的Color按钮
element.all(by.css('div')).each(div => {
  div.element(by.css('button.btn1[tooltip="Color"]')).click();
});

// 同理处理Background Color按钮
element.all(by.css('div')).each(div => {
  div.element(by.css('button.btn1[tooltip="Background Color"]')).click();
});

这种方式完全基于元素的语义化属性，页面元素重排也不会影响定位，是最健壮的方案。

2. 结合子元素的样式特征定位 #

如果tooltip属性可能变动，还可以利用按钮内部color-indicator的背景色来定位：

// 定位所有黑色指示器的按钮
element.all(by.css('.color-indicator[style*="rgb(0, 0, 0)"]')).each(indicator => {
  // 通过xpath找到父按钮并点击
  indicator.element(by.xpath('..')).click();
});

// 定位所有深灰色指示器的按钮
element.all(by.css('.color-indicator[style*="rgb(50, 50, 50)"]')).each(indicator => {
  indicator.element(by.xpath('..')).click();
});

不过要注意，style属性的格式可能会有变动（比如空格、十六进制颜色值），如果页面样式生成逻辑改变，这种方式可能会失效，所以优先级低于属性定位。

3. 按容器分组遍历（不依赖具体元素特征） #

如果不需要区分按钮类型，只是想点击每个div里的所有按钮，可以直接按容器分组遍历：

element.all(by.css('div')).each(div => {
  // 获取当前div下的所有btn1按钮并逐个点击
  div.all(by.css('button.btn1')).each(button => {
    button.click();
  });
});

这种方式完全不关心按钮的顺序和特征，只要div里的按钮class是btn1就会被点击，适合批量操作场景。

总的来说，优先选择语义化属性定位，它的维护成本最低、稳定性最高；如果没有合适的属性，再考虑子元素特征或容器分组的方式。

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