同一类元素的量角器定位器答案

【问题标题】：Protractor Locator for elements of same class同一类元素的量角器定位器
【发布时间】：2019-03-09 22:16:27
【问题描述】：

我是 Protractor 和 E2E 测试的新手，我想确定我的 CSS 定位器方法对于同一类的相同元素是否正确。

我有一个HTML Fiddle here，它描述了一个包含两个 div 元素的网页，每个元素都包含两个按钮：这些按钮都属于同一类。 HTML 如下：

<!DOCTYPE html>
<html>
<body>
  <div>
    <button class="btn1" tooltip="Color">
              <span class="color-indicator" style="background-color: rgb(0, 0, 0);">
    </button>
    <button class="btn1" tooltip="Background Color">
              <span class="color-indicator" style="background-color: rgb(50, 50, 50);">
    </button>
  </div>
  <div>
    <button class="btn1" tooltip="Color">
              <span class="color-indicator" style="background-color: rgb(0, 0, 0);">
    </button>
    <button class="btn1" tooltip="Background Color">
              <span class="color-indicator" style="background-color: rgb(50, 50, 50);">
    </button>
  </div>
</body>
</html>

我需要单击每个div 中的每个按钮元素。 element(by.css()) Locator 可以使用它们的 CSS 选择器访问按钮（例如 "body > div:nth-child(1) > button:nth-child(1 )") 但是有没有更好的方法来访问这些项目？

我的网站有很多这样的实例，我想知道是否有更好的方法来访问这样的元素，而不是在我的 中硬编码它们的 nth-child 数字it() 脚本。网页上的元素将来可能会重新排序，因此使用编号可能会导致将来出现问题。

谢谢你:-)

【问题讨论】：

标签： html css typescript protractor

【解决方案1】：

如果您知道具有相同类的按钮的确切数量，您可以使用 css 选择器定位它们；在这种情况下，有 4 个，所以它看起来像这样::

element.all(by.css('.btn1')).get(0);
element.all(by.css('.btn1')).get(1);
element.all(by.css('.btn1')).get(2);
element.all(by.css('.btn1')).get(3);

如果有帮助请告诉我！

【讨论】：

这看起来更干净。谢谢！