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

UI/UX Design by

We make sure that your target audience has the best possible experience with your digital product. You get:

• Design tailored to your audience
• Proven processes customized to your needs
• An expert team of experienced designers

Read more Show archive.org snapshot

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 .