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.

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

So, in order to say something like...

Copy
Then the element "#dialog_content" should not have scrollbars

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

Copy
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.