期望一个元素有一个滚动

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) is to compare 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') 的已解决承诺。让我们创建一个可重用的函数并通过 then() 让 expect() 解决第二个承诺来解决两个承诺之一：

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

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

期望一个元素有一个滚动

Expect an element to have a scroll

testing

selenium

scrollbar

selenium-webdriver

protractor