How to test if an element has scrollbars with JavaScript (Cucumber step inside)

The basic idea is pretty simple: an element's height is accessible via the offsetHeight property, its drawn height via scrollHeight -- if they are not the same, the browser shows scrollbars.

var hasScrollbars = element.scrollHeight != element.offsetHeight;

So, in order to say something like...

Then the element "#dialog_content" should not have scrollbars

... you can use this step (only for Selenium scenarios):

Then /^the element "([^\"]+)" should( not)? have scrollbars$/ do |selector, no_scrollbars|
  scroll_height = page.execute_script("return $('#{selector}').get(0).scrollHeight;")
  offset_height = page.execute_script("return $('#{selector}').get(0).offsetHeight;")

  comparison = no_scrollbars ? '==' : '!='
  scroll_height.should.send(comparison, offset_height)
end

This should respect padding. However, I have not tested if margins have an effect on it.

Arne Hartherz

makandra.com

Say thanks6

Last edit

2013-09-24

License

Source code in this card is licensed under the MIT License.

Posted by Arne Hartherz to makandra dev (2012-12-03 14:02)