期望一个元素有一个滚动 [英] Expect an element to have a scroll

问题描述

在我们的一个内部 Angular 应用程序中，显示了一个许可文本框.由于里面有很多文本，所以以 div 元素表示的许可框有一个滚动条.

In one of our internal angular applications, there is a license text box displayed. Since there is a lot of text inside, the license box, represented as a div element, has a scroll.

问题:如何在protractor中测试一个元素是否有滚动条?

Question: How to test whether an element has a scroll or not in protractor?

这是元素的 HTML 表示:

Here is an HTML representation of the element:

<div class="login-disclaimer-text-canvas ng-binding" ng-bind-html="disclaimer">
Copyright © Company, 2015. All Rights Reserved.
...
</div>

其中 login-disclaimer-text-canvas 定义了以下 CSS 样式:

where login-disclaimer-text-canvas has the following CSS styles defined:

.login-disclaimer-text-canvas {
  height: 50px;
  width: 100%;
  overflow-y: auto;
  background-color: #eee;
  color: #3E6372;
  padding: 4px;
  font-size: 10px;
}

推荐答案

诀窍(原提出here)是比较 height 属性:

The trick (originally proposed here) is to compare height property:

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

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:

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

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 - 则元素有滚动条.

If scrollHeight is greater than height - then an element has a scrollbar.

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

In protractor we need to compare the resolved promises of getAttribute('height') and getAttribute('scrollHeight'). Let's make a reusable function and resolve one of two promises via then() letting expect() to resolve the second:

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

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

where toBeGreaterThan() handy matcher is a part of jasmine-matchers third-party.

这篇关于期望一个元素有一个滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！