在我们的一个内部角度应用程序中,显示了一个许可证文本框。由于内部有很多文本,因此以div元素表示的许可证框具有滚动条。
div
问题: 如何测试元素是否具有滚动protractor?
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
.login-disclaimer-text-canvas { height: 50px; width: 100%; overflow-y: auto; background-color: #eee; color: #3E6372; padding: 4px; font-size: 10px; }
技巧(最初在这里提出)是比较height属性:
height
该heightCSS属性指定 元素的内容区域的高度 。内容区域位于元素的填充,边框和边距之内。
与scrollHeight:
scrollHeight
的Element.scrollHeight只读属性是一个 元素的含量的高度,其中包括由于溢出内容在屏幕上不可见的测量 。该scrollHeight值等于clientHeight元素所需的最小值 ,以便在不使用垂直滚动条的情况下适合视点中的所有内容。它包括元素填充,但不包括其边距。
Element.scrollHeight
clientHeight
如果scrollHeight大于height-,则元素具有滚动条。
在protractor我们需要比较的解决承诺getAttribute('height')和getAttribute('scrollHeight')。让我们通过两个承诺的可重复使用的功能和解决一个then()让expect()来解决第二个:
getAttribute('height')
getAttribute('scrollHeight')
then()
expect()
function elementHasScroll(element) { element.getAttribute('height').then(function (height) { expect(element.getAttribute('scrollHeight')).toBeGreaterThan(height); }); };
其中toBeGreaterThan()得心应手匹配器的一部分jasmine- matchers第三方。
toBeGreaterThan()
jasmine- matchers