期望一个元素有一个滚动答案

【问题标题】：Expect an element to have a scroll期望一个元素有一个滚动
【发布时间】：2015-05-17 03:21:58
【问题描述】：

在我们的一个内部 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;
}

【问题讨论】：

标签： testing selenium selenium-webdriver scrollbar protractor

【解决方案1】：

诀窍（最初提出here）是比较height属性：

height CSS 属性指定内容区域的高度元素。内容区域在内边距、边框和边距内元素。

scrollHeight:

Element.scrollHeight 只读属性是对元素内容的高度，包括在屏幕溢出。 scrollHeight 值等于最小值 clientHeight 元素需要以适应所有内容在不使用垂直滚动条的视点中。它包括元素填充，但不是它的边距。

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

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

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

其中toBeGreaterThan()handy matcher 是jasmine-matchersthird-party 的一部分。

【讨论】：

感谢您的提问和回答。非常方便。