Cucumber: Test that an element is not overshadowed by another element

I needed to make sure that an element is visible and not overshadowed by an element that has a higher z-index (like a modal overlay).

Here is the step I wanted:

Then the very important notice should not be overshadowed by another element

This is the step definition:

Then(/^(.*?) should not be overshadowed by another element$/) do |locator|
  selector = selector_for(locator)
  expect(page).to have_css(selector)
  js = <<-JS
    var selector = #{selector.to_json};
    var elementFromSelector = document.querySelector(selector);
    var elementBounds = elementFromSelector.getBoundingClientRect();
    var elementCenterX = elementBounds.left + 0.5 * elementBounds.width;
    var elementCenterY = elementBounds.top + 0.5 * elementBounds.height;
    var elementFromPoint = document.elementFromPoint(elementCenterX, elementCenterY);
    // We might hit a child of the element we're checking
    var candidateFromPoint = $(elementFromPoint).closest(elementFromSelector).get(0);
    return elementFromSelector == candidateFromPoint;
  JS
  is_top_element = page.execute_script(js)
  expect(is_top_element).to eq(true)
end

This assumes a selector_for(locator) method, which takes a prose locator like "the very important notice" and returns a CSS selector like .very-important-notice. If you are using Spreewald Show archive.org snapshot , this method is defined in features/support/selectors.rb Show archive.org snapshot .

Henning Koch

makandra.de

Say thanks1

Last edit

2017-06-29

Henning Koch

Keywords

clickable, interacted, with, spreewald

License

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

Capybara: Finding invisible elements and how to test that an element is not visible

When Capybara locates elements in the DOM, by default it allows only accessing visible elements -- when you are using a driver that supports it (e.g. Selenium, not the default Rack::Test driver).

Consider the following HTML:

<div class=...

Check that an element is hidden via CSS with Spreewald

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

Test that a CSS selector is present with Cucumber

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

Test that a select field contains an option with Cucumber

This note describes a Cucumber step definition that lets you say:

Then "Mow lawn" should be an option for "Activity"
But "Reply support mail" should not be an option for "Activity"

Note that this step checks whether an option is availabl...

Posted by Henning Koch to makandra dev (2017-06-29 08:40)

Cucumber: Test that an element is not overshadowed by another element

Related cards:

Summary