问题描述
在我们的一个内部 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;
}
推荐答案
The trick (originally proposed here) is to compare height
property:
height
CSS 属性指定内容区域的高度元素.内容区域在内边距、边框和边距内元素.
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.
这篇关于期望一个元素有一个滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!