期望一个元素有一个滚动

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

诀窍(最初在这里提出)是比较height属性:

该heightCSS属性指定元素的内容区域的高度.内容区域位于元素的填充,边框和边距内.

用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第三方.