Posted over 8 years ago. Visible to the public.

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.

Your development team has a full backlog of feature requests, chores and refactoring coupled with deadlines? We are familiar with that. With our "DevOps as a Service" offering, we support developer teams with infrastructure and operations expertise.

Owner of this card:

Avatar
Arne Hartherz
Last edit:
over 7 years ago
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Arne Hartherz to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more