期望一个元素有一个滚动

问题描述

在我们的一个内部 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 属性指定内容区域的高度元素.内容区域在内边距、边框和边距内元素.

使用 scrollHeight:

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

如果 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.

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