testing - 期望一个元素有一个滚动

Question

在我们的一个内部 Angular 应用程序中，显示了一个许可证文本框。由于里面有很多文本，以 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属性:

The height CSS property specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element.

与scrollHeight :

The Element.scrollHeight read-only attribute is a measurement of the height of an element's content, including content not visible on the screen due to overflow. The scrollHeight value is equal to the minimum clientHeight the element would require in order to fit all the content in the viewpoint without using a vertical scrollbar. It includes the element padding but not its margin.

如果 scrollHeight 大于 height - 则元素有滚动条。

---

在 protractor 中，我们需要比较 getAttribute('height') 和 getAttribute('scrollHeight') 的解析 promise 。让我们创建一个可重用函数并通过 then() 解决两个 promise 之一，让 expect() 解决第二个:

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

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