Expect an element to have a scroll

Question

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.

Question: How to test whether an element has a scroll or not in protractor?

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>

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;
}

Answer 1

The trick (originally proposed here) is to compare height property:

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.

with scrollHeight:

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. The scrollHeight value is equal to the minimum clientHeight 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.

If scrollHeight is greater than height - then an element has a scrollbar.

---

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);
    });
};

where toBeGreaterThan() handy matcher is a part of jasmine-matchers third-party.