代码之家 › 专栏 › 技术社区 › alecxe

期望元素具有滚动

protractor scrollbar selenium-webdriver selenium testing

3

alecxe · 技术社区 · 10 年前

在我们的一个内部角度应用程序中,显示了一个许可文本框。由于里面有很多文本,许可证框(表示为 div 元素,具有滚动条。

问题: 如何在中测试元素是否具有滚动 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 {
  height: 50px;
  width: 100%;
  overflow-y: auto;
  background-color: #eee;
  color: #3E6372;
  padding: 4px;
  font-size: 10px;
}

1 回复 | 直到 10 年前

1

5

Community Mohan Dere 8 年前

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

这个 身高 CSS属性指定 内容区域的高度要素 。内容区域位于元素。

具有 scrollHeight :

这个 Element.scrollHeight 只读属性是 测量元素内容的高度,包括在溢出导致的屏幕 这个 滚动高度 值等于最小值 clientHeight 元素将需要以适应所有内容而不使用垂直滚动条。它包括元素填充,但不填充其边距。

如果 滚动高度 大于 身高 -则元素具有滚动条。

在里面 protractor 我们需要比较 getAttribute('height') 和 getAttribute('scrollHeight') 。让我们创建一个可重用的函数,并通过 then() 出租,出租 expect() 解决第二个问题:

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

哪里 toBeGreaterThan() 轻便火柴盒是 jasmine-matchers 第三方。