期望元素具有滚动 [英] Expect an element to have a scroll
问题描述
在我们的一个内部角度应用程序中,显示了一个许可证文本框.由于里面有很多文本,因此许可证框(以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;
}
推荐答案
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. ThescrollHeight
value is equal to the minimumclientHeight
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')
的已解决承诺.让我们做一个可重用的函数,并通过then()
来解决两个诺言之一,让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屋!