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.

Does your version of Ruby on Rails still receive security updates?
Rails LTS provides security patches for old versions of Ruby on Rails (3.2 and 2.3).

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