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

Question

背景

我有一些(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以使测试更容易识别组件吗？

Answer 1

1. 有没有理想的方法来确定测试指标？

我会选择by.binding locator作为部分匹配:

var itemTotalElm = element(by.binding('dataController.project.item_total'));
var timeTotalElm = element(by.binding('dataController.project.time_total'));

2. 如果没有理想的方式,没有操纵HTML的最佳方法是什么？

我发现的最好的方法是使用Andres chrome扩展工具elementor.您会惊讶于该工具可以帮助您轻松识别最佳定位器,甚至可以显示与当前页面匹配的总页数.

3. 如果改变HTML是最好的方法是什么？

我相信QA自动化测试应该能够并且鼓励他们更新HTML源代码,只要他遵循一些好的做法,例如从开头添加html类名,e2e-这样开发人员就知道选择器的用途,例如

<p class="metric e2e-item_total">

然后你可以用它来定位它

var itemTotalElm = $('.metric.e2e-item_total');

4. 通常可以改变HTML以使测试更容易识别组件吗？

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

如果您希望在测试中添加逻辑,例如"如果总共有超过5个项目测试,那么其他测试"可能表明您的场景测试数据控制不佳.如果您无法确定当前测试页面的状态,那么您如何可靠地通过端到端查找错误？我的意思是,如果您对当前状态做出反应意味着您事先没有正确验证它,那么您可能会错过正确播种测试数据,这也有助于以后再次发现错误.