Updated: Check whether an element is visible or hidden with Javascript

jQuery

You can say:

$(element).is(':visible')

and

$(element).is(':hidden')

jQuery considers an element to be visible if it consumes space in the document. For most purposes, this is exactly what you want.

Native DOM AP...

If you have content inside a page that is hidden by CSS, the following will work with Selenium, but not when using the Rack::Test driver. The Selenium driver correctly only considers text that is actually visible to a user.

Then I should not ...

• The step we used in the past (Then "foo" should not be visibile) doesn't reliably work in Selenium features.
• I overhauled the entire step so it uses Javascript to detect visibility in Selenium.
• The step has support for jQuery and Prototype...

You can use the code below to check whether the browser can make connections to the current site:

await isOnline() // resolves to true or false

Limitations of navigator.onLine

While you can use the...

Spreewald now comes with a step that tests if a form field is visible:

Then the "Due date" field should be visible
But the "Author" field should not be visible

The step works by looking up the...

Using this step definition you can check if any form field (text field, checkbox, etc) or button is disabled:

Then the "Name" field should be disabled
  And the "Save" button should be disabled
But the "Locked" field should not be dis...

Sometimes you might want to know if an attribute is an associated object or a simple string, integer etc. You can use the reflect_on_association method for t...

This note describes a Cucumber step definition that lets you test whether or not a CSS selector is present on the site:

Then I should see an element "#sign_in"
But I should not see an element "#sign_out"

Here is the step definition for C...

Accessing pseudo elements via JavaScript or jQuery is often painful/impossible. However, accessing their styles is fairly simple.

Using getComputedStyle

First, find the element in question.

let element = document.querySelector(...