Question

在我们的一个内部角度应用程序中，会显示一个许可证文本框。由于里面有很多文本，因此表示为div元素的许可证框具有滚动条。

问题：如何在protractor中测试元素是否有滚动？

以下是元素的HTML表示：

<div class="login-disclaimer-text-canvas ng-binding" ng-bind-html="disclaimer">
Copyright © Company, 2015. All Rights Reserved.
...
</div>

其中login-disclaimer-text-canvas定义了以下CSS样式：

.login-disclaimer-text-canvas {
  height: 50px;
  width: 100%;
  overflow-y: auto;
  background-color: #eee;
  color: #3E6372;
  padding: 4px;
  font-size: 10px;
}

Answer 1

技巧（最初提议here）是比较height属性：

height CSS属性指定了内容区域的高度元件即可。内容区域位于填充，边框和边距内元素。

scrollHeight：

Element.scrollHeight只读属性是的衡量标准元素内容的高度，包括在内容上不可见的内容屏幕溢出。 scrollHeight值等于最小值该元素需要clientHeight才能适合所有内容在不使用垂直滚动条的视点中。它包括元素填充但不是它的边缘。

如果scrollHeight大于height - 那么元素就会有一个滚动条。

在protractor中，我们需要比较getAttribute('height')和getAttribute('scrollHeight')已解决的承诺。让我们制作一个可重复使用的函数，并通过then()让expect()解决第二个问题来解决两个承诺之一：

function elementHasScroll(element) {
    element.getAttribute('height').then(function (height) {
        expect(element.getAttribute('scrollHeight')).toBeGreaterThan(height);
    });
};

其中toBeGreaterThan()便捷匹配器是jasmine-matchers第三方的一部分。

期望一个元素有一个滚动

1 个答案: