如何在没有明显可识别属性的量角器中识别页面元素

How to identify page elements in protractor with no obvious identifiable property

本文关键字：识别 属性 量角器 元素      更新时间：2023-12-25

背景

我有一些（Angular JS模板）HTML如下：

<div class="data-handler-container">
    <div class="row">
        <div class="data-handler" ng-if="dataController.showDistance()">
            <p>{{ 'Item Count' | translate}}
            <p class="metric">{{dataController.project.item_total | converter:dataController.user.unit | number: 6}}<span class="unit">{{dataController.user.unit}}</span></p>
        </div>
        <div class="data-handler">
            <p>{{ 'Total Time' | translate}}</p>
            <p class="metric">{{dataController.project.time_total | format:'time':'hh:mm:ss'}}</p>
        </div>
    </div>
</div>

我现在正在用量角器写e2e测试。我需要识别度量元素，这样我就可以访问测试中的值。

在这种情况下，我不认为我可以简单地使用class，因为第一个元素在ng-if中，所以可能不存在。我必须按类进行标识，然后在测试中编写一些逻辑来计算返回数组中的项，并根据计数进行匹配。在这个例子中，它不会太复杂，但在其他情况下，它会很笨拙。

我可以选择具有特定值的项目后面的段落，例如Total Time，这是可行的，但似乎不太理想。如果另一个页面元素有相同的文本怎么办？我的测试需要再次更新。

据我所知，我无法按模型识别项目，因为它们是通过过滤器传递的，我不想将所有过滤器等指定为选择器的一部分。

问题

  1. 是否有一种理想的方法来确定测试的指标
  2. 如果没有理想的方法，那么不操作HTML的最佳方法是什么
  3. 如果可以更改HTML，最好的方法是什么
  4. 一般来说，更改HTML以使测试更容易识别组件可以吗
  1. 是否有一种理想的方法来确定测试的指标

我会选择by.binding定位器，它充当部分匹配：

var itemTotalElm = element(by.binding('dataController.project.item_total'));
var timeTotalElm = element(by.binding('dataController.project.time_total'));
  1. 如果没有理想的方法，那么不操作HTML的最佳方法是什么

我发现的最好的方法是使用Andres chrome扩展工具elementor。你会惊讶于该工具如何轻松地帮助你识别尽可能好的定位器，甚至向你显示与当前页面匹配的总页数。

  1. 如果可以更改HTML，最好的方法是什么

我认为，自动化测试的QA应该能够并鼓励他更新HTML源代码，只要他遵循一些良好的实践，例如添加以e2e-开头的HTML类名，这样开发人员就知道选择器的用途，例如

<p class="metric e2e-item_total">

然后你可以用瞄准它

var itemTotalElm = $('.metric.e2e-item_total');
  1. 一般来说，更改HTML以使测试更容易识别组件可以吗

在3加中回答将添加，只要没有好的选择器可用，就应该只更新底层HTML，所以在这种情况下by.binding应该足够了。

如果你想在测试中添加逻辑，比如"如果总共有5个以上的项目测试，那么其他测试"，这可能表明你对场景测试数据的控制不力。如果您不能确定当前测试页面的状态，那么如何通过端到端可靠地发现错误？我的意思是，如果你对当前状态做出反应，这意味着你没有事先正确验证它，你可能会错过正确的测试数据种子，这也有助于以后重现错误。

相关文章：