Question

我是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（））定位器使用其CSS选择器来访问按钮（例如，“ body> div：nth-child（1）> button：nth-child（1））” ），但是有更好的方法来访问这些项目吗？

我的网站上有很多这样的实例，我想知道是否有更好的方法来访问这样的元素，除了在我的中将其 nth-child 数字硬编码之外it（）脚本。网页上的元素将来可能会重新排序，因此使用编号可能会导致断例。

谢谢：-）

Answer 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);

让我知道是否有帮助！

相同类元素的量角器定位器

1 个答案: