期望元素具有滚动

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第三方。